Salesforce学习 Lwc（十五）【Picklist项目的Label值取得方法】

原创

repick

修改于 2021-03-10 09:37:28

9700

修改于 2021-03-10 09:37:28

文章被收录于专栏：Salesforce

几乎每个Object中都有Picklist类型的项目，实际开发过程中会遇到画面上需要显示当前Picklist的值，利用Lwc如何开发呢，下边通过简单的例子说明一下。

我在【Account】Object中创建一个Picklist的项目【Importance__c】，具体有三个值，高，中，低

下边我们开发一个Lwc，用于在Account详细页面显示它当前值，通过Lwc的【getRecord】方法可以轻松取得Picklist项目的值。

warningMsgPanel.html

<template>
  <lightning-card title="警告" icon-name="custom:custom14">
      <div class="slds-p-around_medium">
          <template if:true={messages.length}>
              <template for:each={messages} for:item="message">
                  <p key={message} class="warning-message" style="color:crimson;">{message}</p>
              </template>
          </template>
      </div>
  </lightning-card>
</template>

warningMsgPanel.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord }    from 'lightning/uiRecordApi';

//取引先項目取得
import ACC_NAME from '@salesforce/schema/Account.Name'
import ACC_IMPORTANCE from '@salesforce/schema/Account.Importance__c'

export default class WarningMsgPanel extends LightningElement {
    @api recordId;          // レコードID
    @api messages =[];      // 表示するメッセージ
    accountData;            // 取得した取引先データ

    /**
     * 取引先データ取得(wire getRecord)
     */
    @wire(getRecord, { recordId: '$recordId', fields: [ACC_NAME, ACC_IMPORTANCE] })
    wiredGetRecord({ error, data }) {
        if (data) {
            this.accountData = data;
            //メッセージ作成
            this.createMessage();
        } else if (error) {
            console.log('error');
        }
    }

    /**
     * 表示するメッセージを作成
     */
    async createMessage(){
        //項目の値を取得
        const NAME_VAL = this.accountData.fields.Name.value;
        const IMP_VAL  = this.accountData.fields.Importance__c.value;

        //メッセージ作成
        const MSG = NAME_VAL + 'の重要度は' + IMP_VAL + 'です。';
        //メッセージを変数に追加
        this.messages = [MSG];
    }
}

效果展示：

期待效果：

Burlington Textiles Corp of Americaの重要度は中です。

实际效果：

Burlington Textiles Corp of Americaの重要度は1です。

通过上边的测试我们发现，Picklist项目取得的值是【API Name】，但我们在画面上想显示的是Label值，跟我们预想的不一致，要如何实现呢，考虑可以有以下三种实现方案。

1.toLabel方法

通过ApexClass，查询Picklist项目，然后使用toLabel方法进行转换，Js中通过调用Apex，取得查询结果

WarningMsgPanelCtrl.cls

/**
 * 取引先を取得
 * @param accId 取引先Id
 */
@AuraEnabled
public static Account getAccount(String accId){
    List<Account> accList = [SELECT Name ,toLabel(Importance__c) FROM Account WHERE Id = :accId];
    return accList ;
}

※如何通过Js调用Apex，在之前的文章中有过记载，今天先省略，下边通过开发者Console进行查询验证一下。

2.通过ApexClass，查询【Schema.DescribeFieldResult】情报，取得我们需要的结果，具体方法如下。

WarningMsgPanelCtrl.cls

public with sharing class WarningMsgPanelCtrl {
    /**
     * 重要度の選択リスト値のラベルを取得
     * @param pickVal 選択リスト値のApi名
     */
    @AuraEnabled
    public static String getImpPickListLabel(String pickVal){
        String labelString = '';
        // 対象項目のDescribeFieldResultを取得する。
        Schema.DescribeFieldResult dfr = Account.Importance__c.getDescribe();
        // 選択リスト値の一覧を取得する。
        List<Schema.PicklistEntry> peList = dfr.getPicklistValues();
        // 選択リスト値一覧から、対象の値のラベルを取得する。
        for(Schema.PicklistEntry pe :  peList ){
            if(pe.getValue() == pickVal){
                labelString = pe.getLabel();
            }
        }
        return labelString;
    }
}

pickListLabelUtils.js

import getImpPickListLabel from '@salesforce/apex/WarningMsgPanelCtrl.getImpPickListLabel';

const getImpPickListLabelValue = (pickValStr) => {
    return getImpPickListLabel({pickVal : pickValStr})
    .then(result => {
        return result;
    })
    .catch(error =>{
        console.log(error);
    });
}
export {getImpPickListLabelValue};

warningMsgPanel.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord }    from 'lightning/uiRecordApi';
import {getImpPickListLabelValue} from 'c/pickListLabelUtils';

//取引先項目取得
import ACC_NAME from '@salesforce/schema/Account.Name'
import ACC_IMPORTANCE from '@salesforce/schema/Account.Importance__c'

export default class WarningMsgPanel extends LightningElement {
    @api recordId;          // レコードID
    @api messages =[];      // 表示するメッセージ
    accountData;            // 取得した取引先データ

    /**
     * 取引先データ取得(wire getRecord)
     */
    @wire(getRecord, { recordId: '$recordId', fields: [ACC_NAME, ACC_IMPORTANCE] })
    wiredGetRecord({ error, data }) {
        if (data) {
            this.accountData = data;
            //メッセージ作成
            this.createMessage();
        } else if (error) {
            console.log('error');
        }
    }

    /**
     * 表示するメッセージを作成
     */
    async createMessage(){
        //項目の値を取得
        const NAME_VAL = this.accountData.fields.Name.value;
        const IMP_VAL  = await getImpPickListLabelValue(this.accountData.fields.Importance__c.value);

        //メッセージ作成
        const MSG = NAME_VAL + 'の重要度は' + IMP_VAL + 'です。';
        //メッセージを変数に追加
        this.messages = [MSG];
    }
}

效果展示：

※上边的【pickListLabelUtils】的共通方法，现在只能取得一个Object得情报，如果是大项目的话，可以考虑改造成为共通类，取得所有Object得情报，改造后如下：

WarningMsgPanelCtrl.cls

public with sharing class WarningMsgPanelCtrl {
    // globalDescribeMap
    private static Map<String,Schema.SObjectType> globalDescribeMap = Schema.getGlobalDescribe();
    /**
     * 重要度の選択リスト値のラベルを取得
     * @param pickVal 選択リスト値のApi名
     */
    @AuraEnabled
    public static String getImpPickListLabel(String pickVal){
        String labelString = '';
        // 対象項目のDescribeFieldResultを取得する。
        Schema.DescribeFieldResult dfr = Account.Importance__c.getDescribe();
        // 選択リスト値の一覧を取得する。
        List<Schema.PicklistEntry> peList = dfr.getPicklistValues();
        // 選択リスト値一覧から、対象の値のラベルを取得する。
        for(Schema.PicklistEntry pe :  peList ){
            if(pe.getValue() == pickVal){
                labelString = pe.getLabel();
            }
        }
        return labelString;
    }

    /**
     * 指定されているオブジェクトの選択リスト値のラベルを取得
     * @param objectName オブジェクトのApi名
     */
    @AuraEnabled(cacheable=true)
    public static List<PicklistWrapper> getPicklistWrapperList(String objectName) {
        List<PicklistWrapper> picklistWrapperList = new List<PicklistWrapper>();
        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();
                for(Schema.PicklistEntry picklistEntry : picklistEntries) {
                    if(picklistEntry.isActive()) {
                        PicklistWrapper pWrapperItem = new PicklistWrapper();
                        pWrapperItem.fieldApiName = fieldName;
                        pWrapperItem.picklistLabel = picklistEntry.getLabel();
                        pWrapperItem.picklistValue = picklistEntry.getValue();
                        picklistWrapperList.add(pWrapperItem);
                    }
                }
            }
        }
        return picklistWrapperList;
    }
    private static Schema.DescribeSObjectResult getDescribeObjectResult(String objectName) {
        Schema.SObjectType objectType = globalDescribeMap.get(objectName);
        Schema.DescribeSObjectResult objectResult = objectType.getDescribe();
        return objectResult;
    }
    public class PicklistWrapper {
        @AuraEnabled
        public String picklistLabel;
        @AuraEnabled
        public String picklistValue;
        @AuraEnabled
        public String fieldApiName;
    }
}

pickListLabelUtils.js

import getImpPickListLabel from '@salesforce/apex/WarningMsgPanelCtrl.getImpPickListLabel';
import getPicklistWrapperList from '@salesforce/apex/WarningMsgPanelCtrl.getPicklistWrapperList';

const getImpPickListLabelValue = (pickValStr) => {
    return getImpPickListLabel({pickVal : pickValStr})
    .then(result => {
        return result;
    })
    .catch(error =>{
        console.log(error);
    });
}

const getAllPicklist = (objectAPIName) => {
    return getPicklistWrapperList({objectName : objectAPIName})
            .then(result => {
                return result;
            })
            .catch(error =>{
               console.log(error);
            });
};
export {getImpPickListLabelValue, getAllPicklist};

warningMsgPanel.js

import { LightningElement, api, wire, track } from 'lwc';
import { getRecord }    from 'lightning/uiRecordApi';
import {getImpPickListLabelValue, getAllPicklist} from 'c/pickListLabelUtils';

//取引先項目取得
import ACC_NAME from '@salesforce/schema/Account.Name'
import ACC_IMPORTANCE from '@salesforce/schema/Account.Importance__c'

export default class WarningMsgPanel extends LightningElement {
    @api recordId;          // レコードID
    @api messages =[];      // 表示するメッセージ
    accountData;            // 取得した取引先データ
    @track importanceCodeList = [];

    /**
     * 取引先データ取得(wire getRecord)
     */
    @wire(getRecord, { recordId: '$recordId', fields: [ACC_NAME, ACC_IMPORTANCE] })
    wiredGetRecord({ error, data }) {
        if (data) {
            this.accountData = data;
            //メッセージ作成
            this.createMessage();
        } else if (error) {
            console.log('error');
        }
    }

    /**
     * 表示するメッセージを作成
     */
    async createMessage(){
        //項目の値を取得
        const NAME_VAL = this.accountData.fields.Name.value;
        const IMP_VAL  = await getImpPickListLabelValue(this.accountData.fields.Importance__c.value);

        //メッセージ作成
        const MSG = NAME_VAL + 'の重要度は' + IMP_VAL + 'です。';
        //メッセージを変数に追加
        this.messages = [MSG];
    }
    async connectedCallback() {
        const picklistResult = await getAllPicklist('Account');
            let importanceListTemp = [];
            importanceListTemp.push({label:'--なし--', value:''});
            picklistResult.forEach(item => {
                if(item.fieldApiName.toLowerCase() === 'importance__c'.toLowerCase()) {
                    console.log('>>>>>>>>>>>>>>>item.picklistLabel::'+item.picklistLabel);
                    console.log('>>>>>>>>>>>>>>>item.picklistValue::'+item.picklistValue);
                    importanceListTemp.push({ label: item.picklistLabel, value: item.picklistValue });
                }
            });
            this.importanceCodeList = importanceListTemp;
    }
}

warningMsgPanel.html

<template>
  <lightning-card title="警告" icon-name="custom:custom14">
      <div class="slds-p-around_medium">
          <template if:true={messages.length}>
              <template for:each={messages} for:item="message">
                  <p key={message} class="warning-message" style="color:crimson;">{message}</p>
              </template>
          </template>
          <template for:each={importanceCodeList} for:item="commonwWrapper">
            <li key={commonwWrapper.value}>
                <h1>{commonwWrapper.label}</h1>
            </li>
        </template>
      </div>
  </lightning-card>
</template>

效果展示：

3.不使用ApexClass情况下，通过Lwc实现。

·通过【uiObjectInfoApi】导入getObjectInfo，getPicklistValuesByRecordType

·通过【getObjectInfo()】取得Object情报

·通过【getPicklistValuesByRecordType()】取得选择List情报

·通过【getPickListLabel()】取得选择List的Label情报

warningMsgPanelForLwc.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACC_NAME from '@salesforce/schema/Account.Name'
import ACC_IMPORTANCE from '@salesforce/schema/Account.Importance__c'

export default class WarningMsgPanelForLwc extends LightningElement {
    @api recordId;          // レコードID
    @api objectApiName;
    @api messages =[];      // 表示するメッセージ
    objectInfo    =[];      // 取得したオブジェクト情報
    pickListInfo  =[];      // 取得した選択リスト情報
    accountData;            // 取得した取引先データ

    /**
     * 取引先データ取得(wire getRecord)
     */
     @wire(getRecord, { recordId: '$recordId', fields: [ACC_NAME, ACC_IMPORTANCE] })
     wiredGetRecord({ error, data }) {
         if (data) {
             this.accountData = data;
         } else if (error) {
             console.log('error');
         }
     }

     /**
      * オブジェクトの情報取得
      */
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    wireObjectInfo({ error, data }) {
        if (data) {
            this.objectInfo = data;
        } else if (error) {
            console.log('getObjectInfo error:' + error);
        }
    }

    /**
     * 選択リストの情報取得
     */
    @wire(getPicklistValuesByRecordType, { objectApiName: ACCOUNT_OBJECT, recordTypeId: '$objectInfo.defaultRecordTypeId' })
    wiredWorkPlanObjectInfo({ data, error }) {
        if(data){
            this.pickListInfo = data.picklistFieldValues;
            this.createMessage();
        } else if (error) {
            console.log('getPicklistValuesByRecordType error:' + error);
        }
    }

    /**
     * 選択リストのApi値からラベルを取得
     * @param {String} fieldApiName 項目Api名
     * @param {String} fieldVal     選択リスト値（Api）
     */
    async getPickListLabel(fieldApiName, fieldVal){
        console.log('>>>>>>>>>>>>>>>>>>>>>>>>>this.pickListInfo>>>>>'+JSON.stringify(this.pickListInfo));
        //選択リスト値のラベルを取得
        if(this.pickListInfo[fieldApiName]){
            return this.pickListInfo[fieldApiName].values.find(data => data.value === fieldVal).label;
        }
    }
    /**
     * 表示するメッセージを作成
     */
    async createMessage(){
        //項目の値を取得
        const NAME      = this.accountData.fields.Name.value;
        const IMP_VAL   = this.accountData.fields.Importance__c.value;
        const IMP_LABEL = await this.getPickListLabel('Importance__c', IMP_VAL);
        //メッセージ作成
        let msg = NAME + 'の重要度は'+ IMP_LABEL + 'です。';
        //メッセージを変数に追加
        this.messages = [msg];
    }
}

warningMsgPanelForLwc.html

<template>
  <lightning-card title="警告" icon-name="custom:custom14">
      <div class="slds-p-around_medium">
          <template if:true={messages.length}>
              <template for:each={messages} for:item="message">
                  <p key={message} class="warning-message" style="color:crimson;">{message}</p>
              </template>
          </template>
      </div>
  </lightning-card>
</template>

效果展示：

通过Log，取得的【pickListInfo】情报如下，以供参考：

"Importance__c":{"controllerValues":{},"defaultValue":null,"url":"/services/data/v51.0/ui-api/object-info/Account/picklist-values/0126g000000H0rXAAS/Importance__c",

"values":[

{"attributes":null,"label":"高","validFor":[],"value":"0"},

{"attributes":null,"label":"中","validFor":[],"value":"1"},

{"attributes":null,"label":"低","validFor":[],"value":"2"}]

}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

html

登录后参与评论

0 条评论

热度