salesforce 模块

This tutorial will walk you through integrating your custom JavaScript modules with Salesforce Lightning Web Components and use them in Salesforce Orgs.

本教程将引导您逐步将自定义JavaScript模块与Salesforce Lightning Web组件集成在一起，并在Salesforce Orgs中使用它们。

Salesforce Developer 101：术语和基本概念 (Salesforce Developer 101: Terminologies and Basic Concepts)

什么是Salesforce组织？ (What is a Salesforce org?)

A Salesforce org is a customer-facing platform that contains Salesforce data.

Salesforce组织是一个包含Salesforce数据的面向客户的平台。

什么是闪电Web组件(LWC)？ (What is a Lightning Web Component (LWC)?)

A lightning web component is essentially a Web Component that uses Salesforce-branded styles and encapsulates Salesforce data.

闪电Web组件本质上是一个使用Salesforce品牌样式并封装Salesforce数据的Web组件 。

开发环境和工具包 (Dev Environment and Toolkit)

What you will need:

您将需要什么：

A Trailhead account which allows you to create a Trailhead playground/test org

一个Trailhead帐户，可让您创建一个Trailhead游乐场/测试组织

Salesforce Developer Experience (SFDX) command-line client

Salesforce开发人员经验(SFDX)命令行客户端

Visual Studio Code

Visual Studio程式码

If you haven’t yet set up the full Salesforce Developer Experience (SFDX) environment, go to Trailhead, sign up, and complete the Quick Start: Lightning Web Components Trail. This will set up the entire toolkit we need for this tutorial and should take no more than 20 minutes.

如果您尚未设置完整的Salesforce开发人员体验(SFDX)环境，请转到Trailhead，注册并完成“ 快速入门：Lightning Web Components Trail” 。 这将设置本教程所需的整个工具包，并且所需时间不超过20分钟。

If you are a Visualforce or an Aura developer who has set up SFDX but aren’t familiar with LWC, I’d recommend you to work through the last module of the Quick Start: LWC Trail to create a HelloWorld LWC.

如果您是设置了SFDX的Visualforce或Aura开发人员，但不熟悉LWC，建议您完成快速入门的最后一个模块：LWC Trail，以创建HelloWorld LWC。

If you are otherwise already familiar with SFDX and LWC, go ahead and create a simple HelloWorld LWC. The LWC doesn’t have to be anything more than <div>Hello World</div> .

如果您已经熟悉SFDX和LWC，请继续创建一个简单的HelloWorld LWC。 LWC不必超过<div>Hello World</div> 。

Custom HelloWorld LWC is on top of the left panel 自定义HelloWorld LWC位于左侧面板顶部

Wherever you are coming from, you should end up with an org page that contains a custom LWC with files helloWorld.html, helloWorld.js, and helloWorld.js-meta.xml.

无论您来自哪里，都应该以一个组织页面结束，该页面包含一个自定义LWC，其中包含文件helloWorld.html，helloWorld.js和helloWorld.js-meta.xml。

Add a button to the custom LWC using thelightning-button tag. Its label attribute contains the text it displays. Its onclick attribute should point to an event handler called clickHandler .

使用lightning-button标签将按钮添加到自定义LWC。 它的label属性包含它显示的文本。 它的onclick属性应该指向一个名为clickHandler的事件处理程序。

In helloWorld.html, add the HTML for the button:

在helloWorld.html中 ，为按钮添加HTML：

<lightning-button label=”Say Hello in the JS Console” onclick={clickHandler}></lightning-button>

In helloWorld.js, implement the clickHandler method:

在helloWorld.js中 ，实现clickHandler方法：

clickHandler() { console.log('hello from helloWorld.js');}

Open the default org page (in Visual Studio Code, Command + Shift + P, SFDX: Open Default Org), open the web console, click the button, and we should see the console log.

打开默认的组织页面(在Visual Studio Code中，按Command + Shift + P，SFDX：打开默认组织)，打开Web控制台，单击按钮，我们应该看到控制台日志。

In case the org doesn’t automatically refresh, click on the gear icon on the top right hand of the page, go to Page Setup, Refresh the current page, and Save.

如果组织没有自动刷新，请单击页面右上角的齿轮图标，转到页面设置，刷新当前页面，然后保存。

创建静态资源JavaScript模块 (Create the Static Resource JavaScript Module)

Create two files under force-app/main/default/staticresources, helloModule.js, and helloModule.resource-meta.xml.

在force-app / main / default / staticresources下创建两个文件helloModule.js和helloModule.resource-meta.xml。

To use a custom JavaScript file as a static resource, we need to wrap it in an Immediately Invoked Function Expression (IIFE).

要将自定义JavaScript文件用作静态资源，我们需要将其包装在立即调用函数表达式(IIFE)中。

IIFE in helloModule.js:

helloModule.js中的IIFE：

(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;})();

In helloModule.resource-meta.xml, we specify the resource content type and cache-control property:

在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>

Deploy force-app/main/default/staticresources to the org. On the org page, go to Setup and search for Static Resources. There should be a resource named helloModule, with type application/javascript and private cache control.

将force-app / main / default / staticresources部署到组织。 在组织页面上，转到设置并搜索静态资源。 应该有一个名为helloModule的资源，其类型为application / javascript和私有缓存控件。

在LWC中使用静态资源 (Use the Static Resource in an LWC)

In helloWorld.js, add the import for the static resource and for the method that loads the static resource:

在helloWorld.js中 ，为静态资源和加载静态资源的方法添加导入：

import SAY_HELLO from '@salesforce/resourceUrl/helloModule';import { loadScript } from 'lightning/platformResourceLoader';

Then implement a callback that runs when the LWC is rendered on the page:

然后实现在页面上呈现LWC时运行的回调：

renderedCallback() { loadScript(this, SAY_HELLO) .then(() => console.log('Loaded sayHello')) .catch(error => console.log(error));}

Deploy this LWC to org. Refresh the org page and we should see the console log indicating that the helloModule static resource has been successfully loaded.

将此LWC部署到组织。 刷新组织页面，我们应该看到控制台日志，指示helloModule静态资源已成功加载。

Now that the resource is successfully loaded, we are able to use the function sayHello in the LWC. In helloWorld.js, update the button click handler to call window.sayHello:

现在，资源已成功加载，我们可以在LWC中使用函数sayHello了。 在helloWorld.js中 ，更新按钮单击处理程序以调用window.sayHello ：

clickHandler() { console.log('hello from helloWorld.js'); window.sayHello();}

Deploy to org, refresh, click on the button, and we should see the log from helloModule printed to the console.

部署到组织，刷新，单击按钮，我们应该会看到helloModule的日志打印到控制台。

奖励：创建一个静态资源JavaScript模块，该模块可以调用第三方API (Bonus: Create a Static Resource JavaScript Module that Makes Calls to a Third-Party API)

Because of the default security settings of Salesforce org, if our JavaScript function needs to call a non-Salesforce, third-party API, we need to list those sites as CSP (Content-Sharing Policy) Trusted Sites. We will use JSONPlaceholder as an example. Go to Setup and search for CSP Trusted Sites. Add a new trusted site as follows: (Note that Salesforce won’t accept a URL that ends with a forward slash, i.e., https://mysite.com works but https://mysite.com/ doesn’t.)

由于Salesforce组织的默认安全设置，如果我们JavaScript函数需要调用非Salesforce第三方API，则需要将这些站点列为CSP(内容共享策略)受信任站点。 我们将使用JSONPlaceholder作为示例。 转到设置并搜索CSP受信任的站点 。 如下添加新的受信任站点：(请注意，Salesforce将不接受以正斜杠结尾的URL，即https://mysite.com有效，而https://mysite.com/无效。)

CSP might take two to five minutes to become effective. In the meantime, add a function to helloModule.js (still inside the IFFE) and also expose it to the window namespace:

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;

Update clickHandler in helloWorld.js to use window.retrieveData with a parameter:

更新helloWorld.js中的 clickHandler以使用带有参数的window.retrieveData ：

clickHandler() { console.log('hello from helloWorld.js'); window.sayHello(); for (let i = 1; i < 4; i++) { window.retrieveData(i); }}

Deploy, refresh, if there’s no CSP error (which means that CSP isn’t yet in effect), we should be able to see some JSON data fetched from a third-party API in the console log.

部署，刷新，如果没有CSP错误(这意味着CSP尚未生效)，我们应该能够在控制台日志中看到从第三方API获取的一些JSON数据。

The complete files are as follows:

完整的文件如下：

helloWorld.html:

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:

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:

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;})();

For more resources, check out Trailhead and Salesforce’s Official Documentation for Developers.

有关更多资源，请查看Trailhead和Salesforce的开发人员正式文档 。

翻译自: https://towardsdatascience.com/using-custom-javascript-modules-as-static-resources-in-salesforce-orgs-4b6df1477dc4

salesforce 模块