単一レコード使用
操作内容
Ursus Park のレンジャーは、公園内を徘徊する熊を追跡するために、あなたに協力を要請します。Salesforce にはすでに情報を入力してあるのですが、カスタマイズされたアプリケーション環境を提供してほしいと依頼されます。
Bear Location (熊の位置) コンポーネントを作成する
- VS Code で、
lwc
フォルダーを右クリックして [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] をクリックします。 - コンポーネントに「
bearLocation
」と名前を付けます。 -
bearLocation.js-meta.xml
ファイルを編集して<isExposed>false</isExposed>
を次の行に置き換えます。 これで、コンポーネントを Bear (熊) レコードページにのみ配置できます。 -
bearLocation.html
の内容を次のマークアップに置き換えます。 コードのポイント:-
cardTitle
式に基づく動的なタイトルを含むカードコンポーネントを表示します。 - カードには、
mapMarkers
で定義したマーカーを使用する地図コンポーネントが含まれています。
-
-
bearLocation.js
の内容を次に置き換えます。 コードのポイント:- Lightning データサービスを使用してレコードを取得できる
getRecord
アダプターをインポートします。Apex を記述する必要はありません。 -
getFieldValue
ヘルパー関数をインポートして、項目値を取得します。 -
bearFields
定数のBear__c
オブジェクトからハードコードされた項目名のリストを作成します。このアプローチでは参照整合性がサポートされていません。コンパイル時にオブジェクトと項目の存在を確認することはできません。つまり、Bear__c
またはその項目は、コードで使用されていても削除される可能性があります。次のコンポーネントでは、参照整合性をサポートする別のアプローチを使用します。 -
@api
でデコレートされたrecordId
プロパティは、自動的に現在のレコード ID を受け取ります。 -
loadBear
関数で@wire
デコレーターを使用し、データとエラーを取得して関数に渡します。@wire
はパラメーターが指定されたgetRecord
アダプター関数をコールするよう設定されています。これらのパラメーターは、取得するレコード ID と レコード項目のリストです。@wire
デコレーターのおかげで、コンポーネントが読み込まれる、またはレコード ID が変更されると、loadBear
が自動的にコールされます。 - このコンポーネントの最初のバージョンでは、エラーの処理は行いません。今はスキップしておきます。
- エラーがなければ、熊の名前を保存し、その熊の座標を使用して地図マーカーを作成します。
- Lightning データサービスを使用してレコードを取得できる
- 更新したコードを組織にリリースします。default フォルダーを右クリックして [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] をクリックします。
Bear Location (熊の位置) コンポーネントを Bear (熊) レコードページに追加する
コンポーネントを実装したところで、そのコンポーネントをページに追加して表示しましょう。
- 組織で、[Bears (熊)] タブをクリックし、任意のレコードを開きます。
- [Setup (設定)] (
) をクリックして、[Edit Page (編集ページ)] を選択します。
- [Custom (カスタム)] コンポーネントで bearLocation コンポーネントを見つけ、右側の列の上部にドラッグします。
- [Save (保存)] をクリックします。
- 標準の Bear (熊) レコードページを今回初めて変更したため、更新済みのページを有効にして、変更した内容がユーザーに表示されるようにします。[Activate (有効化)] をクリックします。
- [App Default (アプリケーションのデフォルト)] タブをクリックします。
- [Assign as App Default (アプリケーションのデフォルトとして割り当て)] をクリックします。
- [Ursus Park] を選択します。
- [Next (次へ)]、[Next (次へ)]、[Save (保存)] の順にクリックします。
- [Back (戻る)] をクリックして [Bear (熊)] レコードページに戻り、作業内容を確認します。
これで完了です。地図に熊が表示されるようになりました。熊レコードページをさらにカスタマイズしましょう。
Bear Supervisor (熊の監視者) コンポーネントを作成する
パークレンジャーには監視する特定の熊が割り当てられます。危険な行動をしている熊が発見された場合、公園従業員はその熊の監視者と迅速に連絡を取る必要があります。それを容易にするために、熊の監視者カードを熊レコードページに追加します。
- VS Code で、
lwc
フォルダーを右クリックして [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] をクリックします。 - コンポーネントに「
bearSupervisor
」と名前を付けます。 -
bearSupervisor.js-meta.xml
ファイルを編集して<isExposed>false</isExposed>
を次の行に置き換えます。 これで、コンポーネントを熊レコードページに配置できます。 -
bearSupervisor.html
の内容を次に置き換えます。 コードのポイント:-
if:true
ディレクティブを使用して、熊のデータが読み込まれたら条件に応じて監視者を表示します。 -
lightning-record-form
を使用して監視者 (Contact) レコードのコンパクトビューを表示します。 -
if:true
ディレクティブとerror
プロパティを使用して、熊レコードを読み込めない場合に条件に応じてエラーメッセージを表示します。
-
-
bearSupervisor.js
の内容を次に置き換えます。 コードのポイント:- 熊の位置コンポーネントで行ったようにハードコードされた文字列を使用する代わりに、スキーマインポートを使用して
Bear__c.Supervisor__c
項目をインポートします。このアプローチの大きな利点は、参照整合性が確保されることです。 -
@wire
デコレーターとgetRecord
アダプターを使用して、熊レコードを取得します。 -
supervisorId
式を公開します。この式では、getFieldValue
関数を使用して Supervisor Field (監視者項目) の値を取得します。
- 熊の位置コンポーネントで行ったようにハードコードされた文字列を使用する代わりに、スキーマインポートを使用して
- 更新したコードを組織にリリースします。default フォルダーを右クリックして [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] をクリックします。
Bear Supervisor (熊の監視者) コンポーネントを Bear (熊) レコードページに追加する
新しいコンポーネントを熊レコードページに追加しましょう。
- 組織で、[Bears (熊)] タブをクリックし、任意の熊をクリックして、熊レコードページに移動します。熊レコードページから、[Setup (設定)] (
) をクリックして [Edit Page (編集ページ)] を選択します。
- [Custom (カスタム)] コンポーネントで bearSupervisor コンポーネントを見つけ、bearLocation コンポーネントの下にドラッグします。
- [Save (保存)] をクリックしてから、[Back (戻る)] をクリックしてレコードページに戻り、作業内容を確認します。
このステップはこれで完了です。Lightning Web コンポーネントで @wire
アダプターを使用して単一レコードをどのように処理できるかを確認しました。次は、レコードのリストに進みましょう。