Salesforce LWC学习(六) @salesforce & lightning/ui*Api Reference
上一篇中我们在demo中使用了很多的 @salesforce 以及 lightning/ui*Api的方法，但是很多没有细节的展开。其实LWC中针对这些module提供了很多好用的方法，下面对这两种进行详细介绍。
一. @Salesforce
@salesforce模块封装了很多的方法，用于在运行时添加相关的功能。主要方法及使用如下。
1. @salesforce/apex : 此方法用于引入apex的方法，这里的方法包括自定义的方法以及标准的预置的方法，具体操作如下。
1）引入自定义apex类的方法：我们在项目中和后台apex代码交互，首先需要做的就是使用此标签引入需要用到的类的方法。
1 import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';
2 @wire(apexMethod, { apexMethodParams })
3 propertyOrFunction;
针对此函数相关的变量在上一篇有细节描述，除了引入自定义apex方法以外，还有其他的一些封装的标准的方法。
2）getSObjectValue(sobject, fieldApiName)：此方法用与从一个object中获取指定的field的值。这个object是从apex中搜索出来的。
此方法两个参数，sobject代表从后台apex中搜索出来的数据，fieldApiName为想要查询字段值的API name。fieldApiName可以是String类型的api name也可以通过@salesforce/schema方式引入进来。我们在搜索时可能获取父层数据，比如搜索opportunity数据时需要获取其对应的account的owner信息，此种父查询展示的最大深度为5层，比如Opportunity.Account.CreatedBy.LastModifiedBy.Name。
头部需要引用：import { getSObjectValue } from '@salesforce/apex';然后调用此方法即可。
getSObjectValueDemo.html
1
2 {accountOwnerName}
3
getSObjectValueDemo.js：调用findOpportunity后台方法，此方法搜索了Opportunity的Account.Owner.Name，我们可以使用getSObjectValue获取其字段结果。
复制代码
1 import { LightningElement, wire } from 'lwc';
2 import findOpportunity from '@salesforce/apex/OpportunityController.findOpportunity';
3 import { getSObjectValue } from '@salesforce/apex';
4 import OPPORTUNITY_ACCOUNT_OWNER_NAME from '@salesforce/schema/Opportunity.Account.Owner.Name';
5 export default class GetSObjectValueDemo extends LightningElement {
6
7 @wire(findOpportunity,{searchKey:'test'})
8 opportunityList;
9
10 get accountOwnerName() {
11 if(this.opportunityList.data !== undefined) {
12 const opportunity = this.opportunityList.data[0];
13 return getSObjectValue(opportunity,OPPORTUNITY_ACCOUNT_OWNER_NAME);
14 }
15 return '';
16 }
17 }
复制代码
OpportunityController.cls
复制代码
1 public with sharing class OpportunityController {
2 @AuraEnabled(cacheable=true)
3 public static List findOpportunity(String searchKey){
4 String key = '%' + searchKey + '%';
5 return [SELECT Id,Account.Owner.Name
6 FROM Opportunity
7 WHERE Name like :key
8 ORDER BY LastModifiedDate DESC
9 limit 1];
10 }
11 }
复制代码
3）refreshApex(wiredProperty)：用于使用wire注解情况下针对缓存变量的刷新，此方法只针对缓存变量，其他情况无法使用。
头部需要引用：import { refreshApex } from '@salesforce/apex';
详情用法可以查看上一篇。
4）@salesforce/apexContinuation：主要用于长时间运行的callout，此功能后期会单独描述。
5）@salesforce/label：用于引入custom label。
头部需要引入：import labelName from '@salesforce/label/labelReference'
其中：
labelName为我们起的名字，后期js以及前台html中用到此custom label的地方需要使用此名字作为引用
labelReference为在我们org中声明的custom label的label name。引入时需要使用namespace.labelName格式进行引用，如果不是manage package，默认的namespace为c。
因为我们在js中可能获取多个custom label，所以我们可以封装在一个label的变量中，通过label.labelName方式获取。custom label我们声明的时候会有两种形式，一种是正常的，另外一种是可以使用{0}{1}这种format的操作的label。针对classic以及lightning aura我们可以很轻易的对format的label进行处理，遗憾的是针对lwc并没有直接的方式去处理，我们可以使用正则表达式进行函数处理。
stringUtils.js：用于解析字符串中使用{}处理的占位符。
复制代码
1 const formatString = (stringForFormat,params) => {
2 let str = stringForFormat;
3 for (let i = 0; i < params.length; i++) {
4 let re = new RegExp('\\{' + i + '\\}', 'gm');
5 str = str.replace(re, params[i]);
6 }
7 return str;
8 };
9 export {formatString};
复制代码
getCustomLabelDemo.js：引入方法，针对包含format的字符串进行处理。
复制代码
1 import { LightningElement } from 'lwc';
2 import sampleLabel from '@salesforce/label/c.sample_label';
3 import sampleLabelWithParam from '@salesforce/label/c.sample_label_with_param';
4 import {formatString} from 'c/stringUtils';
5 export default class GetCustomLabelDemo extends LightningElement {
6
7 get formatedSampleLabelWithParam() {
8 let paramList = new Array();
9 paramList.push('xx');
10 return formatString(sampleLabelWithParam,paramList);
11 }
12
13 label = {
14 sampleLabel
15 };
16 }
复制代码
getCustomLabelDemo.html：展示两个custom label
复制代码
1
2 {label.sampleLabel}
3
4 {formatedSampleLabelWithParam} 5 复制代码 显示结果： 6）@salesforce/resourceUrl：引入static resource。头部根据当前的静态资源是否在managed package中有两种引用的方式： 1 import resourceName from '@salesforce/resourceUrl/resourceReference'; 2 import myResource from '@salesforce/resourceUrl/namespace__resourceReference'; demo如下： useStaticResourceDemo.js：引入static resource，在sample目录下有一个sample.png图片，前台展示此图片 复制代码 1 import { LightningElement } from 'lwc'; 2 import sampleResource from '@salesforce/resourceUrl/lwc_sample'; 3 export default class UseStaticResourceDemo extends LightningElement { 4 pictureSampleURL = sampleResource + '/sample/sample.png'; 5 } 复制代码 useStaticResourceDemo.html：展示此图片 1 2
3
效果展示：
7）@salesforce/schema：引入object以及field的引用。当我们使用LDS或者wire service获取字段的引用时，官方建议我们使用此种方式而不是字符串方式，详细使用操作可以查看上一篇博客。
8）@salesforce/user：获取当前user的信息。通过此引用可以获取当前user的id 以及当前user是否是一个community guest user。我们通过
import property from '@salesforce/user/property';来引用,property有两个值：Id / isGuest.下面是一个关于user信息的获取的demo。
getUserInfoDemo.js
复制代码
1 import { LightningElement } from 'lwc';
2 import Id from '@salesforce/user/Id';
3 import isGuest from '@salesforce/user/isGuest';
4 export default class GetUserInfoDemo extends LightningElement {
5 userId = Id;
6 isGuestUser = isGuest;
7 }
复制代码
getUserInfoDemo.html
复制代码
1
2 current user Id : {userId}
3 current user is Guest {isGuestUser} 4 复制代码 以上的内容为@salesforce模块封装的主要方法，详情还请自行查看文档。接下来的几部分我们讲的主要是 lightning/ui*Api部分的wire adapter，其主要是为了扩充LDS标准以外的增强方法。LWC针对数据的操作以及解析如下图所示。LWC wire adapter以及LDS转成的都是User Interface API中的内容，所以如果想更好的了解各个wire adapter的使用以及返回类型的详情还请查看User Interface API。下载地址：https://resources.docs.salesforce.com/220/latest/en-us/sfdc/pdf/api_ui.pdf 二. lightning/uiListApi 此模块主要用于针对一个list view获取数据以及metadata。我们针对某个对象数据创建列表视图时，会进行相关的filter，展示某些固定的列，展示多少数据等操作。使用lightning/uiListApi模块我们可以通过object的api name等信息便可以获取到指定的list view的数据。需要注意一点的是，此模块以及模块中的方法目前是beta功能。 1. getListUi：此wire adapter方法用于获取list view中的数据。我们可以通过几个参数以及几种形式获取数据。 1) 使用 object 的api name以及 list view的api name去获取数据； 1 import { getListUi } from 'lightning/uiListApi'; 2 @wire(getListUi, { objectApiName: objName, listViewApiName: listViewName }) 3 propertyOrFunction; 其中objName代表想要获取哪个表的数据，取得是表的api name listViewName取得是当前表的哪个list view的数据，取得是 list view的api name 2）使用list view的id 获取数据； 1 import { getListUi } from 'lightning/uiListApi'; 2 @wire(getListUi, { listViewId:listViewId}) 3 propertyOrFunction; 3）使用object 的api name以及MRU（Most Recently Used）去获取数据.我们在每个表的list view中都有一个rencent view的视图，这个是标准的一个视图，LWC针对此视图有专门的取法。 1 import { getListUi, MRU } from 'lightning/uiListApi'; 2 @wire(getListUi, { objectApiName: objectName, listViewApiName: MRU }) 3 propertyOrFunction; 除了上述的必传的参数以外，此适配器方法还提供了其他的可选参数，比如pageSize等。 https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_resources_list_views_records_md.htm#request_parameters https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_resources_mru_list_views_records.htm 复制代码 1 import { LightningElement, wire,track } from 'lwc'; 2 import {getListUi} from 'lightning/uiListApi'; 3 import ACCOUNT_OBJECT from '@salesforce/schema/Account'; 4 export default class GetListUIDemo extends LightningElement { 5 @track error; 6 @track accountList; 7 @wire(getListUi,{objectApiName:ACCOUNT_OBJECT,listViewApiName:'AllAccounts',pageSize:100}) 8 wiredAccountList({error,data}) { 9 if(data) { 10 this.accountList = data.records.records; 11 this.error = undefined; 12 } else if(error) { 13 this.error = error; 14 this.accountList = undefined; 15 } 16 } 17 } 复制代码 getListUIDemo.html 复制代码 1 2
3
4
5
6
37
38
复制代码
结果展示：
三. lightning/uiObjectInfoApi
此模块的适配器方法用于获取object的metadata以及picklist的value。
1. getObjectInfo：使用wire adapter针对指定的object获取相关的metadata。response包括描述fields/ child relationships / record type/theme metadata信息。下图可以看到我们demo中用到的获取Account的getObjectInfo的结构。我们对于apex中的Schema有了解情况下，可以理解成此适配器相当于DescribeSObjectResult以及相关的方法用来获取相关的metadata信息。demo中我们会演示获取某个字段的label信息，感兴趣的可以自行研究。
getSObjectInfoDemo.js：获取Account表中的AccountSource的label值
复制代码
1 import { LightningElement,wire } from 'lwc';
2 import { getObjectInfo } from 'lightning/uiObjectInfoApi';
3 import ACCOUNT_OBJECT from '@salesforce/schema/Account';
4 export default class GetObjectInfoDemo extends LightningElement {
5 @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
6 accountInfo;
7
8 get recordInfo() {
9 if(this.accountInfo.data !== undefined) {
10 return this.accountInfo.data.fields.AccountSource.label;
11 }
12 return '';
13 }
14 }
复制代码
getSObjectInfoDemo.html：展示AccountSource的label值
1
2 {recordInfo}
3
2. getPicklistValues：使用此wire adapter获取某个 picklist类型字段的picklist value。我们接触apex知道，picklist 字段获取可以使用两种方式，基于record type方式获取某个record type的picklist values以及获取picklist类型字段的所有的values。此wire adapter为通过record type获取values。此wire adapter需要传两个参数，第一个参数是object的某个record type id，第二个参数是想要获取的picklist类型的字段API名称。
@wire(getPicklistValues, { recordTypeId: recordTypeId, fieldApiName: fieldApiName })
propertyOrFunction;
其中,recordTypeId为我们想要操作的指定record type的ID。我们可以根据getObjectInfo 或者getRecordUi这两个wire adapter获取。此变量为必填字段，我们如果想变量改变getPicklistValues动态改变，我们可以使用'$'符号去封装此变量;fieldApiName为想要查询字段的API name，这里推荐使用@salesforce/schame去获取field api的reference。返回的类型有两种，变量或者是方法，变量封装data和error两个子变量，使用方法我们可以将这两个作为参数进行展示。详见上篇的propertyOrFunction的使用。
下面的demo我们来获取account中的industry的picklist values。
getObjectInfoDemo.js：首先我们先使用getObjectInfo获取Account的schema信息，然后通过getPicklistValues获取picklist信息，这里使用$作为动态传参，保证当objectInfo变量先装载，装载以后执行getPicklistValues。
复制代码
1 import { LightningElement,wire} from 'lwc';
2 import { getObjectInfo } from 'lightning/uiObjectInfoApi';
3 import ACCOUNT_OBJECT from '@salesforce/schema/Account';
4 import {getPicklistValues} from 'lightning/uiObjectInfoApi';
5 import ACCOUNT_INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
6 export default class GetObjectInfoDemo extends LightningElement {
7
8 @wire(getObjectInfo,{objectApiName:ACCOUNT_OBJECT})
9 objectInfo;
10
11 @wire(getPicklistValues,{ recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: ACCOUNT_INDUSTRY_FIELD })
12 industryList;
13 }
复制代码
getObjectInfoDemo.html：使用for:each进行遍历industry list,使用select option进行展示数据。
复制代码
1
2
3
4
13
复制代码
效果如下：
3. getPicklistValuesByRecordType：此方法用于获取某个对象，某个record type的所有的picklist 的values，这些picklist values封装在一个map中。
@wire(getPicklistValuesByRecordType, { objectApiName: objectName, recordTypeId: recordTypeId })
propertyOrFunction
其中objectName为想要获取的object的所有的picklist values的object api name，此字段必填，推荐使用@salesforce/schema获取，recordTypeId也是必填字段，获取方式同上一个wire adapter。我们通过一个例子更好的理解。
getPicklistValuesByRecordTypeDemo.js：用来获取record type名称为 Test Record Type的所有的picklist values信息。
复制代码
1 import { LightningElement, wire,track } from 'lwc';
2 import {getObjectInfo} from 'lightning/uiObjectInfoApi';
3 import ACCOUNT_OBJECT from '@salesforce/schema/Account';
4 import {getPicklistValuesByRecordType} from 'lightning/uiObjectInfoApi';
5 export default class GetPicklistValuesByRecordTypeDemo extends Lightni
4 {formatedSampleLabelWithParam} 5 复制代码 显示结果： 6）@salesforce/resourceUrl：引入static resource。头部根据当前的静态资源是否在managed package中有两种引用的方式： 1 import resourceName from '@salesforce/resourceUrl/resourceReference'; 2 import myResource from '@salesforce/resourceUrl/namespace__resourceReference'; demo如下： useStaticResourceDemo.js：引入static resource，在sample目录下有一个sample.png图片，前台展示此图片 复制代码 1 import { LightningElement } from 'lwc'; 2 import sampleResource from '@salesforce/resourceUrl/lwc_sample'; 3 export default class UseStaticResourceDemo extends LightningElement { 4 pictureSampleURL = sampleResource + '/sample/sample.png'; 5 } 复制代码 useStaticResourceDemo.html：展示此图片 1 2
3 current user is Guest {isGuestUser} 4 复制代码 以上的内容为@salesforce模块封装的主要方法，详情还请自行查看文档。接下来的几部分我们讲的主要是 lightning/ui*Api部分的wire adapter，其主要是为了扩充LDS标准以外的增强方法。LWC针对数据的操作以及解析如下图所示。LWC wire adapter以及LDS转成的都是User Interface API中的内容，所以如果想更好的了解各个wire adapter的使用以及返回类型的详情还请查看User Interface API。下载地址：https://resources.docs.salesforce.com/220/latest/en-us/sfdc/pdf/api_ui.pdf 二. lightning/uiListApi 此模块主要用于针对一个list view获取数据以及metadata。我们针对某个对象数据创建列表视图时，会进行相关的filter，展示某些固定的列，展示多少数据等操作。使用lightning/uiListApi模块我们可以通过object的api name等信息便可以获取到指定的list view的数据。需要注意一点的是，此模块以及模块中的方法目前是beta功能。 1. getListUi：此wire adapter方法用于获取list view中的数据。我们可以通过几个参数以及几种形式获取数据。 1) 使用 object 的api name以及 list view的api name去获取数据； 1 import { getListUi } from 'lightning/uiListApi'; 2 @wire(getListUi, { objectApiName: objName, listViewApiName: listViewName }) 3 propertyOrFunction; 其中objName代表想要获取哪个表的数据，取得是表的api name listViewName取得是当前表的哪个list view的数据，取得是 list view的api name 2）使用list view的id 获取数据； 1 import { getListUi } from 'lightning/uiListApi'; 2 @wire(getListUi, { listViewId:listViewId}) 3 propertyOrFunction; 3）使用object 的api name以及MRU（Most Recently Used）去获取数据.我们在每个表的list view中都有一个rencent view的视图，这个是标准的一个视图，LWC针对此视图有专门的取法。 1 import { getListUi, MRU } from 'lightning/uiListApi'; 2 @wire(getListUi, { objectApiName: objectName, listViewApiName: MRU }) 3 propertyOrFunction; 除了上述的必传的参数以外，此适配器方法还提供了其他的可选参数，比如pageSize等。 https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_resources_list_views_records_md.htm#request_parameters https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_resources_mru_list_views_records.htm 复制代码 1 import { LightningElement, wire,track } from 'lwc'; 2 import {getListUi} from 'lightning/uiListApi'; 3 import ACCOUNT_OBJECT from '@salesforce/schema/Account'; 4 export default class GetListUIDemo extends LightningElement { 5 @track error; 6 @track accountList; 7 @wire(getListUi,{objectApiName:ACCOUNT_OBJECT,listViewApiName:'AllAccounts',pageSize:100}) 8 wiredAccountList({error,data}) { 9 if(data) { 10 this.accountList = data.records.records; 11 this.error = undefined; 12 } else if(error) { 13 this.error = error; 14 this.accountList = undefined; 15 } 16 } 17 } 复制代码 getListUIDemo.html 复制代码 1 2
|
8 Account Id
9 |
10
11 Account Name
12 |
13
14 Type
15 |
16
17 Phone
18 |
19
|---|---|---|---|
| {account.id} | 26{account.fields.Name.value} | 27{account.fields.Type.value} | 28{account.fields.Phone.value} | 29
5
10
11
12