Загрузите модуль JavaScript один раз и используйте его в любых веб-компонентах Lightning
Это руководство проведет вас через интеграцию ваших пользовательских модулей JavaScript с веб-компонентами Salesforce Lightning и их использование в организациях Salesforce.
Salesforce Developer 101: терминология и основные понятия
Что такое организация Salesforce?
Организация Salesforce - это платформа для работы с клиентами, которая содержит данные Salesforce.
Что такое веб-компонент Lightning (LWC)?
Веб-компонент Lightning - это, по сути, веб-компонент, который использует фирменные стили Salesforce и инкапсулирует данные Salesforce.
Среда разработки и инструментарий
Что тебе понадобится:
- Учетная запись Trailhead, которая позволяет вам создать игровую площадку / тестовую организацию Trailhead.
- Клиент командной строки Salesforce Developer Experience (SFDX)
- Код Visual Studio
Если вы еще не настроили полную среду Salesforce Developer Experience (SFDX), перейдите в Trailhead, зарегистрируйтесь и заполните Quick Start: Lightning Web Components Trail. Это настроит весь набор инструментов, который нам нужен для этого урока, и это займет не более 20 минут.
Если вы Visualforce или разработчик Aura, который установил SFDX, но не знаком с LWC, я бы порекомендовал вам проработать последний модуль Быстрого старта: LWC Trail, чтобы создать HelloWorld LWC.
Если вы уже знакомы с SFDX и LWC, создайте простой HelloWorld LWC. LWC не обязательно должен быть чем-то большим, чем <div>Hello World</div>
.
Куда бы вы ни приехали, у вас должна получиться страница организации, содержащая настраиваемый LWC с файлами helloWorld.html, helloWorld.js, и helloWorld.js-meta.xml.
Добавьте кнопку в пользовательский LWC, используя тегlightning-button
. Его атрибут label
содержит отображаемый текст. Его атрибут onclick
должен указывать на обработчик событий с именем clickHandler
.
В helloWorld.html добавьте HTML-код для кнопки:
<lightning-button label=”Say Hello in the JS Console” onclick={clickHandler}></lightning-button>
В helloWorld.js реализуйте метод clickHandler
:
clickHandler() { console.log('hello from helloWorld.js'); }
Откройте страницу организации по умолчанию (в Visual Studio Code, Command + Shift + P, SFDX: Открыть организацию по умолчанию), откройте веб-консоль, нажмите кнопку, и мы должны увидеть журнал консоли.
Если организация не обновляется автоматически, нажмите на значок шестеренки в правом верхнем углу страницы, перейдите в раздел «Параметры страницы», «Обновить текущую страницу» и «Сохранить».
Создайте модуль JavaScript статического ресурса
Создайте два файла в force-app / main / default / staticresources, helloModule.js и helloModule.resource-meta.xml.
Чтобы использовать пользовательский файл JavaScript в качестве статического ресурса, нам нужно обернуть его выражением немедленно вызываемой функции (IIFE).
IIFE в helloModule.js:
(function() { function sayHello() { console.log('hello from helloModule.js'); } // this makes the sayHello function available in the window namespace // so we can call window.sayHello from any LWC JS file window.sayHello = sayHello; })();
В helloModule.resource-meta.xml мы указываем тип содержимого ресурса и свойство cache-control:
<?xml version="1.0" encoding="UTF-8"?> <StaticResource xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld"> <cacheControl>Private</cacheControl> <contentType>application/javascript</contentType> </StaticResource>
Разверните force-app / main / default / staticresources в организации. На странице организации перейдите в Настройка и найдите Статические ресурсы. Должен быть ресурс с именем helloModule с типом application / javascript и управлением частным кешем.
Используйте статический ресурс в LWC
В helloWorld.js добавьте импорт для статического ресурса и для метода, загружающего статический ресурс:
import SAY_HELLO from '@salesforce/resourceUrl/helloModule'; import { loadScript } from 'lightning/platformResourceLoader';
Затем реализуйте обратный вызов, который запускается, когда LWC отображается на странице:
renderedCallback() { loadScript(this, SAY_HELLO) .then(() => console.log('Loaded sayHello')) .catch(error => console.log(error)); }
Разверните этот LWC в орг. Обновите страницу организации, и мы должны увидеть журнал консоли, указывающий, что статический ресурс helloModule был успешно загружен.
Теперь, когда ресурс успешно загружен, мы можем использовать функцию sayHello
в LWC. В helloWorld.js обновите обработчик нажатия кнопки для вызова window.sayHello
:
clickHandler() { console.log('hello from helloWorld.js'); window.sayHello(); }
Разверните в организации, обновите, нажмите кнопку, и мы должны увидеть журнал из helloModule, напечатанный на консоли.
Бонус: создание модуля JavaScript статического ресурса, который обращается к стороннему API
Из-за настроек безопасности организации Salesforce по умолчанию, если нашей функции JavaScript необходимо вызвать сторонний API, не относящийся к Salesforce, нам необходимо указать эти сайты как доверенные сайты CSP (Content-Sharing Policy). В качестве примера воспользуемся JSONPlaceholder. Перейдите в Настройка и найдите Надежные сайты CSP. Добавьте новый надежный сайт следующим образом: (Обратите внимание, что Salesforce не принимает URL, заканчивающийся косой чертой, т. Е. https://mysite.com
работает, а https://mysite.com/
- нет.)
CSP может занять от двух до пяти минут, чтобы вступить в силу. А пока добавьте функцию в helloModule.js (все еще внутри IFFE), а также выставьте ее в пространстве имен окна:
function retrieveData(dataId) { fetch('https://jsonplaceholder.typicode.com/todos/' + dataId) .then(response => response.json()) .then(json => console.log(json)); } window.retrieveData = retrieveData;
Обновите clickHandler
в helloWorld.js, чтобы использовать window.retrieveData
с параметром:
clickHandler() { console.log('hello from helloWorld.js'); window.sayHello(); for (let i = 1; i < 4; i++) { window.retrieveData(i); } }
Разверните, обновите, если нет ошибки CSP (что означает, что CSP еще не действует), мы должны увидеть некоторые данные JSON, полученные из стороннего API, в журнале консоли.
Полные файлы выглядят следующим образом:
helloWorld.html:
<template> <lightning-card title="HelloWorld" icon-name="custom:custom14"> <div class="slds-m-around_medium"> <p>Hello, {greeting}!</p> <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input> <lightning-button label="Say Hello in the JS Console" onclick={clickHandler}></lightning-button> </div> </lightning-card> </template>
helloWorld.js:
import { LightningElement } from 'lwc'; import SAY_HELLO from '@salesforce/resourceUrl/helloModule'; import { loadScript } from 'lightning/platformResourceLoader'; export default class HelloWorld extends LightningElement { greeting = 'World'; changeHandler(event) { this.greeting = event.target.value; } clickHandler() { console.log('hello from helloWorld.js'); window.sayHello(); for (let i = 1; i < 4; i++) { window.retrieveData(i); } } renderedCallback() { loadScript(this, SAY_HELLO) .then(() => console.log('Loaded sayHello')) .catch(error => console.log(error)); } }
helloModule.js:
(function() { function sayHello() { console.log('hello from helloModule.js'); } function retrieveData(dataId) { fetch('https://jsonplaceholder.typicode.com/todos/' + dataId) .then(response => response.json()) .then(json => console.log(json)); } // this makes the sayHello function available in the window namespace // so we can call window.sayHello from any LWC JS file window.sayHello = sayHello; window.retrieveData = retrieveData; })();
Дополнительные ресурсы см. В Trailhead и Официальной документации Salesforce для разработчиков.