Salesforce LWC學習(十五) Async 以及 Picklist 公用方法的實現
本篇參考：salesforce 零基礎學習（六十二）獲取sObject中型別為Picklist的field values(含record type)
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_wire_adapters_picklist_values
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_wire_adapters_picklist_values_record
Salesforce lwc中給我們提供了很多優秀的wire adapter使我們的開發更加便捷，比如getPicklistValues以及getPicklistValuesByRecordType
可以實現獲取某個欄位或者某個record type所有picklist型別欄位的 picklist values。這個元件在便捷的同時又讓我們心生哀怨，因為他不是所有的物件都支援，針對常用物件 Account / Opportunity / Contact 或者自定義物件等可以直接使用，方便快捷，但是針對一些物件則不支援，比如 Event & Task。 所以當專案中使用到 Event & Task 進行自定義開發需要獲取某個或者某些欄位的 picklist values的值時，如果需求不變，我們進行 hard code，將所有的 label-value鍵值對使用 {label,value}的map進行封裝，此種需求只是針對不經常修改的場景。如果需求不明確，或者需要指定的record type顯示指定的picklist values，而 record type配置的 picklist values又可以實時變動的場景來說簡直是災難的，所以有了這篇的針對 LwC公用的方法的實現思路。程式碼並不完善，思路僅供參考。
思路分析：
1. 後臺如何構建，需要滿足哪些場景；
2. 前臺如何搭建，如何做成公用元件使大部分的場景都可以簡單引用便可以使用。
伴隨著這兩個問題進行了考慮。
1） 針對後臺搭建，暫時滿足兩個場景
- 針對一個表可以獲取到所有的 Picklist型別欄位的所有的 Picklist值；
- 針對一個表的某個欄位(可包含 record type)獲取對應的Picklist值。
2）針對前臺的搭建，因為需要從後臺獲取資料，需要保證資料獲取支援非同步處理，即資料處理完進行picklist 資料賦值。
思路分析以後進行功能的構建，本篇參考以前寫過的一篇文章，這裡 PicklistDescriber程式碼便不在放出，直接引用。
一. 後臺搭建
CommonUtilsController：因為Salesforce目前沒有針對 包含 record type對應的 Picklist values的特別好的獲取方法，所以我們根據以前的XML解析模式進行獲取包含record type的場景。 很多人可能會說Salesforce支援了通過user interface方式獲取，只需要一個callout就可以獲取到包含record type對應的picklist欄位對應的values。這種方式其實和wire adapter原理一樣，只是針對一部分object，而不是針對所有的object，考慮到元件的共用性，所以放棄了那種方式。
public without sharing class CommonUtilsController {
private static Map<String,Schema.SObjectType> globalDescribeMap = Schema.getGlobalDescribe();
@AuraEnabled(cacheable=true)
public static Map<String,Map<String,String>> getPicklistMapByObject(String objectName) {
Map<String,Map<String,String>> resultMap = new Map<String, Map<String,String>>();
Schema.DescribeSObjectResult objectResult = getDescribeObjectResult(objectName);
Map<String,SObjectField> fieldsMap = objectResult.fields.getMap();
Map<String,Schema.DescribeFieldResult> picklistName2DescribeFieldMap = new Map<String,Schema.DescribeFieldResult>();
for(String fieldName : fieldsMap.keySet()) {
SObjectField objField = fieldsMap.get(fieldName);
Schema.DescribeFieldResult fieldResult = objField.getDescribe();
if(fieldResult.getType() == Schema.DisplayType.Picklist) {
picklistName2DescribeFieldMap.put(fieldName,fieldResult);
}
}
if(!picklistName2DescribeFieldMap.isEmpty()) {
for(String fieldName : picklistName2DescribeFieldMap.keySet()) {
Schema.DescribeFieldResult fieldResult = picklistName2DescribeFieldMap.get(fieldName);
List<Schema.PicklistEntry> picklistEntries = fieldResult.getPicklistValues();
Map<String,String> fieldValue2LabelMap = new Map<String,String>();
for(Schema.PicklistEntry picklistEntry : picklistEntries) {
if(picklistEntry.isActive()) {
fieldValue2LabelMap.put(picklistEntry.getValue(),picklistEntry.getLabel());
}
}
resultMap.put(fieldName,fieldValue2LabelMap);
}
}
return resultMap;
}
@AuraEnabled(cacheable=true)
public static Map<String,String> getPicklistMapByObjectAndField(String objectName,String field,String recordTypeDevelopName) {
Map<String,String> resultMap = new Map<String,String>();
Schema.DescribeSObjectResult objectResult = getDescribeObjectResult(objectName);
Map<String,SObjectField> fieldsMap = objectResult.fields.getMap();
if(fieldsMap.containsKey(field)) {
SObjectField objField = fieldsMap.get(field);
Schema.DescribeFieldResult fieldResult = objField.getDescribe();
List<Schema.PicklistEntry> picklistEntries = fieldResult.getPicklistValues();
for(Schema.PicklistEntry picklistEntry : picklistEntries) {
if(picklistEntry.isActive()) {
resultMap.put(picklistEntry.getValue(),picklistEntry.getLabel());
}
}
if(String.isNotBlank(recordTypeDevelopName)) {
List<String> picklistValueWithRecordTypeList = PicklistDescriber.describe(objectName,recordTypeDevelopName,field);
Map<String,String> resultForRecordTypeMap = new Map<String,String>();
for(String picklistValue : picklistValueWithRecordTypeList) {
if(resultMap.containsKey(picklistValue)) {
resultForRecordTypeMap.put(picklistValue,resultMap.get(picklistValue));
}
}
return resultForRecordTypeMap;
}
}
return resultMap;
}
private static Schema.DescribeSObjectResult getDescribeObjectResult(String objectName) {
Schema.SObjectType objectType = globalDescribeMap.get(objectName);
Schema.DescribeSObjectResult objectResult = objectType.getDescribe();
return objectResult;
}
}
後臺就這樣搭建完成，暴露了兩個方法：getPicklistMapByObject & getPicklistMapByObjectAndField。第一個方法用來獲取一個表的所有 Picklist型別欄位的label api name對，key為api name，value為picklist的label。我們以 Account表為例，返回的結構類似如下圖所示：
第二個方法用來獲取某個指定object指定欄位的 picklist values的獲取，有record type則傳遞，如果不需要record type則傳遞 null或者不傳遞即可。針對結果集來說則沒有外層的field api name，直接就是 picklist 欄位的 api value -> label，這裡不做截圖。
二. 前臺搭建
這裡需要分成兩步， 第一步是做一個公用元件來實現 傳遞相關引數獲取指定的我們想得到的結果集。
picklistUtils.js：封裝了兩個公用函式，getAllPicklist用於獲取object所有的picklist 型別欄位的結果集；getFieldPicklistMap用於通過object & field [record type developer name]來獲取指定欄位的結果集。
import getPicklistMapByObject from '@salesforce/apex/CommonUtilsController.getPicklistMapByObject';
import getPicklistMapByObjectAndField from '@salesforce/apex/CommonUtilsController.getPicklistMapByObjectAndField';
const getAllPicklist = (objectAPIName) => {
//let resultMap = new Map();
return getPicklistMapByObject({objectName:objectAPIName})
.then(result => {
return result;
})
.catch(error =>{
console.log(error);
});
};
const getFieldPicklistMap = (objectAPIName, fieldAPIName, recordTypeDevelopName) => {
return getPicklistMapByObjectAndField({objectName:objectAPIName,field:fieldAPIName,recordTypeDevelopName:recordTypeDevelopName})
.then(result => {
return result;
})
.catch(error =>{
console.log(error);
});
}
export {getAllPicklist,getFieldPicklistMap};
當我們將程式碼賦值貼上到vs code裡面，我們會發現他有一個提示： This may be converted to an async function.為什麼會有這樣的提示呢？是因為我們這個從後臺進行結果集獲取，此步驟不是實時的，而是一個非同步的操作，所以他提示了將會將這個轉換成了一個非同步的函式。
這樣的解釋可能過於乾燥，什麼是非同步的？非同步怎麼處理呢？這裡放一個連結用來更好的理解：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function。當我們聲明瞭非同步函式，呼叫源呼叫它時需要使用await去共同使用，從而實現結果集返回時可以正常的接收以及處理。
AccountPicklistComponent.js：公共元件搞定以後我們寫一個元件進行測試，下面的元件只試驗了獲取所有picklist型別欄位的測試，其他的方法感興趣的自行測試。 這裡的程式碼有幾個關鍵點需要注意：- 頭部需要引入我們需要用到的函式，這裡引用的是：import {getAllPicklist} from 'c/picklistUtils';
- 我們將生命週期函式connectedCallback使用async宣告成了一個非同步函式，因為這裡我們需要有呼叫非同步的函式使用await，所以方法宣告async；
- 針對非同步的函式接受結果集需要使用await，否則獲取的結果集變成了同步操作獲取的便是null，只有通過await進行標識才可以正常返回；
- 結果集接受操作需要使用臨時變數，最後將臨時變數賦值給我們需要展示前臺的變數，不用臨時變數賦值不會進行渲染，因為是非同步的操作，沒法reactive。
import { LightningElement,track } from 'lwc';
import {getAllPicklist} from 'c/picklistUtils';
export default class AccountPicklistComponent extends LightningElement {
@track industryList = [];
@track typeList = [];
@track accountSourceList = [];
@track ratingList = [];
async connectedCallback() {
const result = await getAllPicklist('Account');
console.log('total result : ' + JSON.stringify(result));
let typeTempList = [];
let industryTempList = [];
let accountSourceTempList = [];
let ratingTempList = [];
for(let key in result) {
if (result.hasOwnProperty(key)) { // Filtering the data in the loop
if(key === 'type') {
let typeResult = result[key];
console.log('type result : ' + JSON.stringify(typeResult));
for(let typeValue in typeResult) {
typeTempList.push({label:typeResult[typeValue],value:typeValue});
}
} else if(key === 'industry') {
let industryResult = result[key];
for(let industryValue in industryResult) {
industryTempList.push({label:industryResult[industryValue],value:industryValue});
}
} else if(key === 'accountsource') {
let accountSourceResult = result[key];
for(let accountSourceValue in accountSourceResult) {
accountSourceTempList.push({label:accountSourceResult[accountSourceValue],value:accountSourceValue});
}
} else if(key === 'rating') {
let ratingResult = result[key];
for(let ratingValue in ratingResult) {
ratingTempList.push({label:ratingResult[ratingValue],value:ratingValue});
}
}
}
}
this.typeList = typeTempList;
this.industryList = industryTempList;
this.accountSourceList = accountSourceTempList;
this.ratingList = ratingTempList;
}
}
accountPicklistComponent.html：用來展示相關欄位的select option
<template>
<lightning-card>
<lightning-layout multiple-rows="true">
<lightning-layout-item size="6">
<lightning-combobox
name="industry"
label="industry"
options={industryList}>
</lightning-combobox>
</lightning-layout-item>
<lightning-layout-item size="6">
<lightning-combobox
name="type"
label="type"
options={typeList}>
</lightning-combobox>
</lightning-layout-item>
<lightning-layout-item size="6">
<lightning-combobox
name="accountSource"
label="Account Source"
options={accountSourceList}>
</lightning-combobox>
</lightning-layout-item>
<lightning-layout-item size="6">
<lightning-combobox
name="rating"
label="rating"
options={ratingList}>
</lightning-combobox>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
結果展示：這個表的相關欄位的picklist值便可以動態取出
總結：篇中只是根據某種需求去分析思考並進行程式碼的編寫。程式碼並沒有進行優化以及異常處理。篇中有錯誤地方還請指出，有不懂歡迎留言。有更好的方式歡迎溝通。