2021.01.20
Lightning Web Components (LWC)で選択リスト値のラベルを取得する方法
はじめに
Lightning Web Components(LWC)のリリースから一年以上が経過し、LWCでの開発の必要性が増してきたのではないでしょうか。日本語の記事や公式ドキュメントも増えてきましたが、まだまだ不明な点が多く、手を出すのが億劫になっている方も多いかと思います。
今回はLWCでの選択リスト値の扱いについて、少しご紹介できればと思います。
今回はLWCでの選択リスト値の扱いについて、少しご紹介できればと思います。
レコード詳細画面にメッセージを表示する
今回は取引先レコードの詳細画面にメッセージを表示するコンポーネントを作成し、取引先の重要度(Importance__c)を表示してみます。
メッセージ例:サンプル株式会社の重要度は高です。
重要度の選択リスト値は以下です。
メッセージ例:サンプル株式会社の重要度は高です。
重要度の選択リスト値は以下です。
値 | API 参照名 |
---|---|
高 | 0 |
中 | 1 |
低 | 2 |
さっそくLWCでコンポーネントを作成してみましょう。
HTML部
変数"messages"に格納された文字列を表示する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.html
JS部
1. uiRecordApiからgetRecordをimportし、wireメソッドで取引先データを取得します。
2. createMessageで取得した取引先データからメッセージを作成し、HTMLで表示するための変数"messages"に値を代入します。
2. createMessageで取得した取引先データからメッセージを作成し、HTMLで表示するための変数"messages"に値を代入します。
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 + 'の重要度は' + IMP_VAL + 'です。'; //メッセージを変数に追加 this.messages = [MSG]; } }
warningMsgPanel.js
実行結果
期待:「サンプル株式会社の重要度は高です。」
結果:「サンプル株式会社の重要度は0です。」
uiRecordApiのgetRecordでレコードを取得した場合、どうやら選択リストの値はApi参照名で取得されるようです。
結果:「サンプル株式会社の重要度は0です。」
uiRecordApiのgetRecordでレコードを取得した場合、どうやら選択リストの値はApi参照名で取得されるようです。
選択リストのラベルを取得する方法
では、どのように選択リスト値のラベルを取得すればいいのでしょうか。
ここでは、3つの方法を紹介します。
1つはLWCのみで完結する方法で、あとの2つはApexを介して取得する方法です。
ここでは、3つの方法を紹介します。
1つはLWCのみで完結する方法で、あとの2つはApexを介して取得する方法です。
1. toLabelを使用する(Apex)
まずは、toLabelを使用する方法です。
そもそも、uiRecordApiのgetRecordを使わず、ApexクラスでSOQLを発行してデータを取得します。
SELECT句で選択リストに対しtoLabelを使用すると、API名ではなくラベルを取得してくれます。
uiRecordApiを使う必要がない場合や、取得する項目が固定の場合には問題なく使用できそうです。
後で変換処理等も必要ないので便利ですが、uiRecordApiを使う必要がある場合には、解決策になっていませんね。
そもそも、uiRecordApiのgetRecordを使わず、ApexクラスでSOQLを発行してデータを取得します。
SELECT句で選択リストに対しtoLabelを使用すると、API名ではなくラベルを取得してくれます。
uiRecordApiを使う必要がない場合や、取得する項目が固定の場合には問題なく使用できそうです。
後で変換処理等も必要ないので便利ですが、uiRecordApiを使う必要がある場合には、解決策になっていませんね。
/** * 取引先を取得 * @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 ; }
WarningMsgPanelCtrl.cls
公式ドキュメント
toLabel(fields)
toLabel(fields)
2. Schemaから取得する(Apex)
ApexクラスでSchema.DescribeFieldResultから項目の情報を取得できます。
こちらはご存じの方も多いかと思いますが、簡単に流れを記載します。
1. getDescribe()を使用し、対象項目のDescribeFieldResultを取得する。
2. getPicklistValues()を使用し、選択リスト値の一覧を取得する。
3. getLabel()を使用し、選択リストのラベルを取得する。
今回はわかりやすくするために簡潔に作っていますが、他の選択リスト値にも使えるよう汎用的に作成すると、非常に便利です。
こちらはご存じの方も多いかと思いますが、簡単に流れを記載します。
1. getDescribe()を使用し、対象項目のDescribeFieldResultを取得する。
2. getPicklistValues()を使用し、選択リスト値の一覧を取得する。
3. getLabel()を使用し、選択リストのラベルを取得する。
今回はわかりやすくするために簡潔に作っていますが、他の選択リスト値にも使えるよう汎用的に作成すると、非常に便利です。
/** * 重要度の選択リスト値のラベルを取得 * @param pickVal 選択リスト値のApi名 */ @AuraEnabled public static String getImpPickListLabel(String pickVal){ // 対象項目のDescribeFieldResultを取得する。 Schema.DescribeFieldResult dfr = Account.Importance__c.getDescribe(); // 選択リスト値の一覧を取得する。 List<Schema.PicklistEntry> peList = dfr.getPicklistValues(); // 選択リスト値一覧から、対象の値のラベルを取得する。 for(Schema.PicklistEntry pe : peList ){ if(pe.getValue() == pickVal){ return pe.getLabel(); } } }
WarningMsgPanelCtrl.cls
3. uiObjectInfoApiから取得する(LWC)
最後にApexを経由せず、LWCのみで取得する方法です。
LWCで選択リスト値を取得するには、uiObjectInfoApiのgetPicklistValuesByRecordTypeを使用します。
getPicklistValuesByRecordTypeでは、オブジェクト名とレコードタイプから対象オブジェクトの選択リスト項目の情報を取得できます。
処理を簡潔に記載します。
1. uiObjectInfoApiから、getObjectInfoとgetPicklistValuesByRecordTypeをインポート
2. getObjectInfo()で、オブジェクトの情報を取得(デフォルトレコードタイプ取得のため)
3. getPicklistValuesByRecordType()で、選択リストの情報を取得
4. getPickListLabel()で、選択リスト値のラベルを取得
getPicklistValuesByRecordTypeでは、オブジェクト名とレコードタイプから対象オブジェクトの選択リスト項目の情報を取得できます。
処理を簡潔に記載します。
1. uiObjectInfoApiから、getObjectInfoとgetPicklistValuesByRecordTypeをインポート
2. getObjectInfo()で、オブジェクトの情報を取得(デフォルトレコードタイプ取得のため)
3. getPicklistValuesByRecordType()で、選択リストの情報を取得
4. getPickListLabel()で、選択リスト値のラベルを取得
import { LightningElement, api, wire } from 'lwc'; import { getRecord } from 'lightning/uiRecordApi'; import { getObjectInfo } from 'lightning/uiObjectInfoApi'; import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi'; // 中略 export default class WarningMsgPanel extends LightningElement { @api recordId; // レコードID @api messages =[]; // 表示するメッセージ objectInfo =[]; // 取得したオブジェクト情報 pickListInfo =[]; // 取得した選択リスト情報 accountData; // 取得した取引先データ objectName; // オブジェクトApi名 // 中略 /** * オブジェクトの情報取得 */ @wire(getObjectInfo, { objectApiName: '$objectName' }) wiredObjectInfo({ data, error }) { if(data){ this.objectInfo = data; } else if (error) { console.log('getObjectInfo error:' + error); } } /** * 選択リストの情報取得 */ @wire(getPicklistValuesByRecordType, { objectApiName: '$objectName', 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){ //選択リスト値のラベルを取得 if(this.pickListInfo[fieldApiName]){ return this.pickListInfo[fieldApiName].values.find(data => data.value === fieldVal).label; } } }
warningMsgPanel.js
4のgetPickListLabelでは、引数の項目Api名と選択リスト値のApi名により、3で取得した"pickListInfo"から選択リスト値を特定し、ラベルを取得しています。
※簡略化して記述しているため、実際の実装時にはnullの考慮を忘れずに行ってください。
※getPicklistValuesで特定の項目の選択リストの値を取得することも可能です。詳細は公式ドキュメントをご参照ください。
※簡略化して記述しているため、実際の実装時にはnullの考慮を忘れずに行ってください。
※getPicklistValuesで特定の項目の選択リストの値を取得することも可能です。詳細は公式ドキュメントをご参照ください。
最後に、表示するメッセージを作成するcreateMessageでgetPickListLabelを呼び出すように変更し、メッセージを作成すれば完了です。
/** * 表示するメッセージを作成 */ 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]; }
warningMsgPanel.js
実行結果
無事に選択リスト値のラベルが取得できました。
おわりに
今回はLWCで選択リスト値のラベルを取得する方法を3つご紹介しました。
Apexを経由するものやLWCで完結するものなど、場面によって適した方法を選択してご使用ください。
少しでも参考になれば幸いです。
Apexを経由するものやLWCで完結するものなど、場面によって適した方法を選択してご使用ください。
少しでも参考になれば幸いです。
39 件