Salesforce LWC では、指定されたオプションのリストからユーザーがオプションを選択できるようにする場合、コンボボックスが使用されます。このガイドでは、コンボボックスの作成方法と、コンボボックスでサポートされるさまざまな属性について例を示して説明します。
コンボボックス
基本的に、コンボボックスは、指定されたオプションからオプションを選択するための入力を提供する読み取り専用フィールドです。これは、 lightning-combobox タグを使用して作成できます。属性はスペースで区切られて次々と速度になります。コンボボックスの作成時に必要ないくつかの属性について説明します。
- ラベル – これは、コンボボックスのラベル (テキスト) を指定するために使用されます。
- オプション – 各オプションは「label」属性と「value」属性を受け取ります。複数のオプションをカンマで区切ったリストで指定できます。
- プレースホルダー : オプションを選択する前に、ユーザーはオプションに関連する情報を知る必要があります。そこで、この属性を指定します。
- 必須 : 場合によっては、オプションの選択が必須となる場合があります。この属性を指定することで必須にすることができます。
- 無効 : チェックボックスからオプションを選択することで、ユーザーを防止することができます。この属性はコンボボックスを無効にします。
構文：
いくつかの重要な属性を備えたコンボボックスを作成する方法を見てみましょう。
<ライトニングコンボボックス
名前=「名前」
ラベル='ラベル名'
値={オプションからの値}
placeholder='ヘルプテキスト'
options={オプションのリスト}
onchange={ハンドル変更} >
仕様：
コンボボックスを作成して操作する手順を見てみましょう。
JavaScript ファイルで、「getter」メソッド内にラベルと値を含むオプションのリストを作成します。
デフォルトのオプションを格納する変数を作成します。
ユーザーが UI から選択したオプションを保存するハンドル関数を作成します。
HTML ファイルでコンボボックスを作成し、属性を渡します。また、コンボボックス内のオプションを処理する onchange() イベント ハンドラーを渡す必要があります。 「js」ファイル内に作成された「Handler」関数を使用します。
このガイドで説明するすべての例では、ロジックは「js」コードとして提供されます。その後、「js」コード全体を含むスクリーンショットを指定します。
例 1:
Javascript ファイルに 5 つの件名 (詳細) を含むコンボボックスを作成します。デフォルト値は「JAVA」を指定します。 handleSubjectsOnChange() メソッドでコンボボックスを処理します。ラベル付きの HTML ファイルの「値とオプション」属性に値と詳細を渡し、コンポーネントをデプロイします。
最初の例.html
<テンプレート><稲妻カード タイトル = 「件名コンボボックス」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 >
<ライトニングコンボボックス
ラベル = 「件名を選択してください:」
価値 = { 価値 }
オプション = { 詳細 }
変更中 = { ハンドルSubjectsOnChange } >< / ライトニングコンボボックス>
< br >
< p > 件名: < b > {価値} < / b >< / p >
< / ディビジョン >
< / ライトニングカード>
< / テンプレート>
最初の例.js
// コンボボックスのデフォルト値「JAVA」を作成します価値 = 「ジャワ」 ;
// 件名を表示
得る 詳細 ( ） {
// 5科目
戻る [ { ラベル : 「ジャワ」 、 価値 : 「ジャワ」 } 、
{ ラベル : 「パイソン」 、 価値 : 「パイソン」 } 、
{ ラベル : 「HTML」 、 価値 : 「HTML」 } 、
{ ラベル : 「C」 、 価値 : 「C」 } 、
{ ラベル : 「C++」 、 価値 : 「C++」 } ] ;
}
// 値を設定するためのロジックを処理します
ハンドルSubjectsOnChange ( イベント ） {
これ 。 価値 = イベント。 詳細 。 価値 ;
}
}
コード全体:
firstComponent.js-meta.xml
バージョン = 「1.0」 ?><公開されている> 真実 < / 露出しています>
<ターゲット>
<ターゲット> lightning__AppPage < / ターゲット>
<ターゲット> lightning__RecordPage < / ターゲット>
< / ターゲット>
< / ライトニングコンポーネントバンドル>
出力：
このコンポーネントを任意のオブジェクトの「レコード」ページに追加します。 HTML ファイルでは、段落タグに値を表示します。ユーザーがオプションを選択すると、そのオプションは太字で表示されます。デフォルトでは、「JAVA」が選択され、コンポーネントがページ上にレンダリングされた後に表示されます。
件名を「C」にしてみましょう。コンボボックスの下に「C」が返されます。
例 2:
この例では、(Campaign オブジェクトからの) キャンペーン タイプ選択リストの値に基づいて、さまざまなコンポーネントをレンダリングします。
- キャンペーン タイプが「カンファレンス」の場合、テキスト「キャンペーン ステータス: 計画中」を返すテンプレートがレンダリングされます。
- キャンペーン タイプが「ウェビナー」の場合、テキスト「キャンペーン ステータス: COMPLETED」を返すテンプレートがレンダリングされます。
- キャンペーン タイプが「パートナー」の場合、テキスト「キャンペーン ステータス: 進行中」を返すテンプレートがレンダリングされます。
- キャンペーン ステータス: 残りのオプションについては中止されました。
2 番目の例.html
<テンプレート><稲妻カード タイトル = 「キャンペーンタイプ」 アイコン- 名前 = 「標準:キャンペーン」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 スタイル = 「高さ:20px; 幅:400px」 >
<テンプレートの幸運:if = { CampaignTypeValues。 データ } >
<ライトニングコンボボックス 価値 = { 価値 }
オプション = { CampaignTypeValues。 データ .values }
変更中 = { ハンドル変更 } >
< / ライトニングコンボボックス>
< / テンプレート>< br / >
< / ディビジョン >
< br >< br >
<テンプレートの幸運:if = { カンファレンス } >
< 中心 > キャンペーンのステータス: < b >< 私 > 計画中< / 私 >< / b > < / 中心 >
< / テンプレート>
<テンプレート幸運:elseif = { ウェビナーバル } >
< 中心 > キャンペーンのステータス: < b >< 私 > 完了< / 私 >< / b > < / 中心 >
< / テンプレート>
<テンプレート幸運:elseif = { パートナーヴァル } >
< 中心 > キャンペーンのステータス: < b >< 私 > 進行中< / 私 >< / b > < / 中心 >
< / テンプレート>
<テンプレートの幸運:else>
< 中心 > キャンペーンのステータス: < b >< 私 > 中止されました< / 私 >< / b > < / 中心 >
< / テンプレート>
< / ライトニングカード>
< / テンプレート>
2番目の例.js
Campaign オブジェクト (標準) を CAMPAIGN としてインポートし、そこから Type を TYPE としてインポートします。 lightning/uiObjectInfoApi から、getPicklistValues と getObjectInfo をインポートします。これらは、「タイプ」フィールドで使用可能な選択リストの値を取得します。これらはコンボボックスのオプションとして利用されます。以下は handleChange() で処理されます。
- 値 === 「会議」の場合、conferenceval 変数を true に設定し、他の 2 つを false に設定します。
- 値 === 「Webinar」の場合、webinarval 変数を true に設定し、他の 2 つを false に設定します。
- 値 === 「Partners」の場合、partnerval 変数を true に設定し、他の 2 つを false に設定します。
- 値が指定されたオプションにない場合、すべて false になります。
輸入 からのキャンペーン 「@salesforce/スキーマ/キャンペーン」 ;
輸入 タイプから 「@salesforce/schema/Campaign.Type」 ;
輸入 { getPicklistValues } から 'lightning/uiObjectInfoApi' ;
輸入 { オブジェクト情報の取得 } から 'lightning/uiObjectInfoApi' ;
輸出 デフォルト クラス 2 番目の例 伸びる 稲妻要素 {
@ 値を追跡する ;
// オブジェクトを取得します
@ ワイヤー ( オブジェクト情報の取得 、 { オブジェクトApi名 : 運動 } ）
オブジェクト情報 ;
// キャンペーン タイプ - 選択リストを取得します
@ ワイヤー ( getPicklistValues 、 { レコードタイプID : '$objectInfo.data.defaultRecordTypeId' 、 フィールドAPI名 : タイプ } ）
キャンペーンタイプ値 ;
カンファレンス = 間違い ;
ウェビナーバル = 間違い ;
パートナーヴァル = 間違い ;
他の = 間違い ;
// ハンドルロジック
ハンドル変更 ( イベント ） {
これ 。 価値 = イベント。 目標 。 価値 ;
もし ( これ 。 価値 === '会議' ） {
// ステータスを PLANNED として表示します
これ 。 カンファレンス = 真実 ;
これ 。 ウェビナーバル = 間違い ;
これ 。 パートナーヴァル = 間違い ;
}
それ以外 もし ( これ 。 価値 === 「ウェビナー」 ） {
// ステータスを COMPLETED として表示します
これ 。 ウェビナーバル = 真実 ;
これ 。 カンファレンス = 間違い ;
これ 。 パートナーヴァル = 間違い ;
}
それ以外 もし ( これ 。 価値 === 「パートナー」 ） {
// ステータスを「進行中」として表示します
これ 。 ウェビナーバル = 間違い ;
これ 。 カンファレンス = 間違い ;
これ 。 パートナーヴァル = 真実 ;
}
それ以外 {
// ステータスを IN ABORTED として表示します
これ 。 ウェビナーバル = 間違い ;
これ 。 カンファレンス = 間違い ;
これ 。 パートナーヴァル = 間違い ;
}
}
}
SecondComponent.js-meta.xml
バージョン = 「1.0」 ?><公開されている> 真実 < / 露出しています>
<ターゲット>
<ターゲット> lightning__AppPage < / ターゲット>
<ターゲット> lightning__RecordPage < / ターゲット>
< / ターゲット>
< / ライトニングコンポーネントバンドル>
出力：
「会議」と入力します。したがって、ステータスは「計画中」です。
「ウェビナー」と入力します。ステータスは「完了」になっています。
「パートナー」と入力します。つまり、ステータスは「進行中」です。
このタイプは提供されたオプションにありません。したがって、ステータスは「ABORTED」になります。
例 3:
次に、キャンペーン レコードをオプションとして含むコンボボックスを作成します。いずれかのオプションを選択すると、対応するキャンペーン タイプが UI に返されます。
まず、getCampaign() メソッドを使用して Apex クラスを作成する必要があります。このメソッドは、ID、名前、タイプ、ステータスを含むすべてのキャンペーンのリストを返します。
キャンペーン記録。 apxc共有による公開 クラス キャンペーン記録 {
@ オーラ有効 ( キャッシュ可能 = 真実 )
// キャンペーンのリストを取得します
公共 静的 リスト < 運動 > キャンペーンを取得する ( ) {
戻る [ IDの選択 、 名前 、 タイプ 、 キャンペーンのステータス ] ;
}
}
thirdExample.html
<テンプレート><稲妻カード タイトル = 「キャンペーンタイプ」 アイコン- 名前 = 「標準:キャンペーン」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 スタイル = 「高さ:20px; 幅:400px」 >
<ライトニングコンボボックス 名前 = '運動'
ラベル = 「キャンペーン名を選択してください」
オプション = { キャンペーンオプション }
価値 = { 価値 }
変更中 = { 変更時の処理 }
>
< / ライトニングコンボボックス>
< / ディビジョン >< br >
< br >
< p > このキャンペーンのキャンペーン タイプ: < b > {価値} < / b >< / p >
< / ライトニングカード>
< / テンプレート>
3番目の例.js
- Connectedcallback() メソッド内でキャンペーンのリストを取得するメソッドを指定する必要があります。 「camps」という名前の配列を宣言し、ラベルをキャンペーン ID、値をキャンペーン タイプとして結果を保存します。この配列は、campaignNames への入力です (これはトラック デコレータで作成する必要があります)。
- Campaignoptions() ゲッター メソッドで、campaignNames 配列を返します。したがって、コンボボックスはこれらのオプションを使用します。
- 選択した値を handleonchange() ハンドラー メソッドに設定します。
輸入 キャンペーンを取得する 「@salesforce/apex/CampaignRecords.getCampaign」 ;
輸出 デフォルト クラス 3番目の例 伸びる 稲妻要素 {
価値 = 」 ;
@ キャンペーン名を追跡する = [ ] ;
得る キャンペーンオプション ( ) {
戻る これ 。 キャンペーン名 ;
}
// Apex から Camps 配列にオプションを追加します。
// ラベルはキャンペーン名になります
// 値はキャンペーンタイプになります
接続済みコールバック ( ) {
キャンペーンを取得する ( )
。 それから ( 結果 => {
キャンプしましょう = [ ] ;
のために ( だった k = 0 ; k < 結果。 長さ ; k ++ ) {
キャンプ。 押す ( { ラベル : 結果 [ k ] 。 名前 、 価値 : 結果 [ k ] 。 タイプ } ) ;
}
これ 。 キャンペーン名 = キャンプ ;
} )
}
// 値を処理する
変更時の処理 ( イベント ) {
これ 。 価値 = イベント。 詳細 。 価値 ;
}
}
出力：
レコードを選択してタイプを確認してみましょう。
結論
LWC でコンボボックスを作成する方法を属性と例とともに学びました。まず、値のリストを含むコンボボックスを作成し、選択された値を表示しました。次に、条件付きレンダリングを通じて、選択された値に基づいて HTML テンプレートをレンダリングします。最後に、既存の Salesforce レコードからコンボボックスのオプションを作成し、関連フィールドを UI に表示する方法を学びました。