├── .eslintignore ├── .forceignore ├── .gitignore ├── .prettierignore ├── .prettierrc ├── README.md ├── config └── project-scratch-def.json ├── force-app └── main │ └── default │ └── lwc │ ├── .eslintrc.json │ └── iFrame │ ├── iFrame.css │ ├── iFrame.html │ ├── iFrame.js │ └── iFrame.js-meta.xml ├── package.json ├── scripts ├── apex │ └── hello.apex └── soql │ └── account.soql └── sfdx-project.json /.eslintignore: -------------------------------------------------------------------------------- 1 | **/lwc/**/*.css 2 | **/lwc/**/*.html 3 | **/lwc/**/*.json 4 | **/lwc/**/*.svg 5 | **/lwc/**/*.xml 6 | .sfdx -------------------------------------------------------------------------------- /.forceignore: -------------------------------------------------------------------------------- 1 | # List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status 2 | # More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm 3 | # 4 | 5 | package.xml 6 | 7 | # LWC configuration files 8 | **/jsconfig.json 9 | **/.eslintrc.json 10 | 11 | # LWC Jest 12 | **/__tests__/** -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # This file is used for Git repositories to specify intentionally untracked files that Git should ignore. 2 | # If you are not using git, you can delete this file. For more information see: https://git-scm.com/docs/gitignore 3 | # For useful gitignore templates see: https://github.com/github/gitignore 4 | 5 | # Salesforce cache 6 | .sfdx/ 7 | .localdevserver/ 8 | 9 | # LWC VSCode autocomplete 10 | **/lwc/jsconfig.json 11 | 12 | # Logs 13 | logs 14 | *.log 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | # Dependency directories 20 | node_modules/ 21 | 22 | # Eslint cache 23 | .eslintcache 24 | 25 | # MacOS system files 26 | .DS_Store 27 | 28 | # Windows system files 29 | Thumbs.db 30 | ehthumbs.db 31 | [Dd]esktop.ini 32 | $RECYCLE.BIN/ 33 | 34 | # Illuminated Cloud 35 | IlluminatedCloud 36 | *.iml 37 | *.idea 38 | 39 | #VSCode 40 | .vscode -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # List files or directories below to ignore them when running prettier 2 | # More information: https://prettier.io/docs/en/ignore.html 3 | # 4 | 5 | **/staticresources/** 6 | .localdevserver 7 | .sfdx 8 | 9 | coverage/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "none", 3 | "overrides": [ 4 | { 5 | "files": "**/lwc/**/*.html", 6 | "options": { "parser": "lwc" } 7 | }, 8 | { 9 | "files": "*.{cmp,page,component}", 10 | "options": { "parser": "html" } 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sfdc-iframe-lwc 2 | Salesforce Lightning Web Component (LWC) that creates an iFrame with loading spinner. 3 | -------------------------------------------------------------------------------- /config/project-scratch-def.json: -------------------------------------------------------------------------------- 1 | { 2 | "orgName": "brianpoulsen company", 3 | "edition": "Developer", 4 | "features": [], 5 | "settings": { 6 | "lightningExperienceSettings": { 7 | "enableS1DesktopEnabled": true 8 | }, 9 | "securitySettings": { 10 | "passwordPolicies": { 11 | "enableSetPasswordInApi": true 12 | } 13 | }, 14 | "mobileSettings": { 15 | "enableS1EncryptedStoragePref2": false 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /force-app/main/default/lwc/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@salesforce/eslint-config-lwc/recommended"] 3 | } 4 | -------------------------------------------------------------------------------- /force-app/main/default/lwc/iFrame/iFrame.css: -------------------------------------------------------------------------------- 1 | iframe { 2 | min-height: 800px; 3 | } -------------------------------------------------------------------------------- /force-app/main/default/lwc/iFrame/iFrame.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /force-app/main/default/lwc/iFrame/iFrame.js: -------------------------------------------------------------------------------- 1 | import {LightningElement, api} from 'lwc'; 2 | 3 | export default class X7SIframe extends LightningElement { 4 | 5 | @api url; 6 | loading = false; 7 | 8 | /** 9 | * show loading spinner while iFrame content loads 10 | */ 11 | connectedCallback() { 12 | this.loading = true; 13 | } 14 | 15 | /** 16 | * create iFrame and add to DOM 17 | */ 18 | renderedCallback() { 19 | 20 | const spinnerContainer = this.template.querySelector('.slds-spinner_container'); 21 | const containerElem = this.template.querySelector('.iframe-container'); 22 | const iframe = document.createElement('iframe'); 23 | 24 | // onload() before setting 'src' 25 | iframe.onload = function() { 26 | console.log('iframe is loaded'); 27 | spinnerContainer.classList.add("slds-hide"); // hide spinner 28 | }; 29 | iframe.src = this.url; // iFrame src; add this URL to CSP 30 | iframe.id = 'iframe-1'; 31 | iframe.width = '100%'; 32 | iframe.setAttribute('frameborder', '0'); 33 | 34 | containerElem.appendChild(iframe); // add iFrame to DOM 35 | } 36 | 37 | } -------------------------------------------------------------------------------- /force-app/main/default/lwc/iFrame/iFrame.js-meta.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 49.0 4 | create an iFrame with loading spinner 5 | true 6 | iFrame 7 | 8 | lightning__RecordPage 9 | lightning__AppPage 10 | lightning__HomePage 11 | lightningCommunity__Page 12 | lightningCommunity__Default 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "salesforce-app", 3 | "private": true, 4 | "version": "1.0.0", 5 | "description": "Salesforce App", 6 | "scripts": { 7 | "lint": "npm run lint:lwc", 8 | "lint:lwc": "eslint force-app/main/default/lwc", 9 | "test": "npm run test:unit", 10 | "test:unit": "sfdx-lwc-jest", 11 | "test:unit:watch": "sfdx-lwc-jest --watch", 12 | "test:unit:debug": "sfdx-lwc-jest --debug", 13 | "test:unit:coverage": "sfdx-lwc-jest --coverage", 14 | "prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"", 15 | "prettier:verify": "prettier --list-different \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"" 16 | }, 17 | "devDependencies": { 18 | "@prettier/plugin-xml": "^0.7.2", 19 | "@salesforce/eslint-config-lwc": "^0.5.0", 20 | "@salesforce/sfdx-lwc-jest": "^0.7.1", 21 | "eslint": "^6.8.0", 22 | "prettier": "^2.0.5", 23 | "prettier-plugin-apex": "^1.4.0" 24 | } 25 | } -------------------------------------------------------------------------------- /scripts/apex/hello.apex: -------------------------------------------------------------------------------- 1 | // Use .apex files to store anonymous Apex. 2 | // You can execute anonymous Apex in VS Code by selecting the 3 | // apex text and running the command: 4 | // SFDX: Execute Anonymous Apex with Currently Selected Text 5 | // You can also execute the entire file by running the command: 6 | // SFDX: Execute Anonymous Apex with Editor Contents 7 | 8 | string tempvar = 'Enter_your_name_here'; 9 | System.debug('Hello World!'); 10 | System.debug('My name is ' + tempvar); -------------------------------------------------------------------------------- /scripts/soql/account.soql: -------------------------------------------------------------------------------- 1 | // Use .soql files to store SOQL queries. 2 | // You can execute queries in VS Code by selecting the 3 | // query text and running the command: 4 | // SFDX: Execute SOQL Query with Currently Selected Text 5 | 6 | SELECT Id, Name FROM Account; -------------------------------------------------------------------------------- /sfdx-project.json: -------------------------------------------------------------------------------- 1 | { 2 | "packageDirectories": [ 3 | { 4 | "path": "force-app", 5 | "default": true 6 | } 7 | ], 8 | "namespace": "", 9 | "sfdcLoginUrl": "https://login.salesforce.com", 10 | "sourceApiVersion": "48.0" 11 | } --------------------------------------------------------------------------------