Загрузите модуль 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 для разработчиков.