ワイヤサービスでの基本コンポーネントの使用

基本コンポーネントを使用することで、レコードデータの表示と操作を簡素化して開発をスピードアップできます。

カスタムユーザインターフェースを作成する場合や、lightning-record*form ではニーズを満たすことができない場合は、ワイヤサービスで他の基本コンポーネントを使用することを検討してください。たとえば、カスタムフォームの構築やレコードデータの表示には、lightning-input および lightning-formatted-* コンポーネントを使用します。

これらのコンポーネントの詳細は、「コンポーネントの参照」を参照してください。

lightning-checkbox-group

1 つ以上のオプションを選択するための 2 つ以上のチェックボックスを表示します。

lightning-combobox

選択可能なオプションのドロップダウンリストを表示します。

lightning-input

指定されたユーザ入力の種別に応じて項目を表示します。

lightning-input-address

住所の入力に対して複合項目を表示します。

ワイヤーサービスでの lightning-input の使用例については、github.com/trailheadapps/lwc-recipes リポジトリの ldsCreateRecord コンポーネントを参照してください。

lightning-input-location

地理位置情報の入力に対して複合項目を表示します。

lightning-input-name

名前の入力に対して複合項目を表示します。

lightning-input-rich-text

コンテンツを書式設定するためのツールバー付きリッチテキストエディタを表示します。

lightning-radio-group

1 つ以上のオプションを選択するための 2 つ以上のチェックボックスを表示します。

lightning-textarea

複数行のテキスト入力項目を表示します。

lightning-input は多くの項目種別をサポートしていますが、異なる項目種別を操作する場合は他の基本コンポーネントの使用も検討してください。

ユーザインターフェースに、挨拶文の選択リストと [名] および [姓] 項目を含めたいとします。lightning-combobox を使用して挨拶文の選択リストを含めるか、または lightning-input-name を使用できます。次の例では、lightning-input-name を使用して、挨拶文の選択リストと [名] および [姓] 項目を現在値と共に表示しています。使用事例に最適な基本コンポーネントを決めるには、「コンポーネントの参照」を参照してください。

次の例では、取引先責任者の挨拶文、名、および姓の値を表示して編集するためのカスタムフォームを作成しています。項目には、取引先責任者レコードからの現在値が表示されます。

項目の初期値を表示するには、getRecord ワイヤアダプタを使用します。

lightning-input-name の選択リストオプションを入力するには。getPicklistValues ワイヤアダプタを使用します。次の例では、デフォルトのレコードタイプ ID を使用しています。現在選択されている挨拶文の値を表示するには、Contact.Salutation 項目の参照をインポートします。

レコードデータを表示するための最も簡単な方法は、lightning-record-form または lightning-record-view-form を使用することです。カスタムユーザインターフェースにレコードデータを表示するには、以下の基本コンポーネントの使用を検討してください。これらのコンポーネントの詳細は、「コンポーネントの参照」を参照してください。

lightning-formatted-address

住所複合項目用のコンポーネントです。lightning-formatted-address は住所をリンク付きで表示します。リンクをクリックすると、その場所が Google マップ上で示されます。リンクは新しいタブで開きます。住所を示して静的な地図を表示することで、コンテキストがより名書くになります。

lightning-formatted-date-time

日付または日付/時間項目用のコンポーネントです。lightning-formatted-date-time は日付と時間を表示します。

lightning-formatted-email

メール項目用のコンポーネントです。lightning-formatted-email は mailto: URL スキームが付いているハイパーリンクとしてメールを表示します。

lightning-formatted-location

地理位置情報項目用のコンポーネントです。lightning-formatted-location は latitude, longitude の形式を使用して 10 進数の度数で地理位置情報を表示します。

lightning-formatted-name

名前項目用のコンポーネントです。lightning-formatted-name は、敬称とサフィックスを含めることができる名前を表示します。

lightning-formatted-number

通貨、数値、パーセント項目用のコンポーネントです。lightning-formatted-number は指定された形式で数値を表示します。

lightning-formatted-phone

電話項目用のコンポーネントです。lightning-formatted-phone は tel: URL スキームが付いているハイパーリンクとして電話番号を表示します。

lightning-formatted-rich-text

リッチテキスト項目用のコンポーネントです。lightning-formatted-rich-text は許可リストに登録されているタグと属性を使用して書式設定されたリッチテキストを表示します。

lightning-formatted-text

テキスト項目用のコンポーネントです。lightning-formatted-text はテキストを表示し、改行を禁則処理で置き換え、リンクを追加します。

lightning-formatted-time

時間項目用のコンポーネントです。lightning-formatted-time はユーザのロケール形式で時間を表示します。

lightning-formatted-url

URL 項目用のコンポーネントです。lightning-formatted-url は URL をハイパーリンクとして表示します。

次の例では、取引先責任者レコードページに住所と静的な地図を表示します。住所または地図をクリックすると、Google マップ上でその場所が開きます。lightning-record-form および lightning-record-view-form コンポーネントは静的地図を提供しないため、この例では lightning-formatted-address コンポーネントを使用しています。

住所複合項目を表示するには、getRecord ワイヤアダプタを使用します。