取引先責任者リストを表示およびプレビューする

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Trail Together の動画

エキスパートの説明を見ながらこのステップを進めて行きたい場合は、Trail Together シリーズの一部である、こちらの動画をご覧ください。

(巻き戻して最初から見直したい場合、このクリップは 10:45 分から開始されます。)

取引先責任者リストを表示する

1. 次のコードをコメント <!-- Contact list goes here --> の後の新しい行に追加します。
   <lightning:datatable data="{!v.Contacts }" columns="{!v.Columns }" keyField="Id" hideCheckboxColumn="true"/>
lightning:datatable は別の Lightning 基本コンポーネントで、取引先責任者のリストを表示します。
   
2. [File (ファイル)] | [Save (保存)] を選択します。
   
3. [MyContactListController.js] タブをクリックします。
   
4. var action 行の上の新しい行に次のコードを追加して myAction 関数を更新します。
   

   component.set("v.Columns", [
       {label:"First Name", fieldName:"FirstName", type:"text"},
       {label:"Last Name", fieldName:"LastName", type:"text"},
       {label:"Phone", fieldName:"Phone", type:"phone"}
   ]);

   このデータベースコンポーネントは、Columns (列) 属性に保存された値を使用して、表示する列数を決定します。
   
5. [File (ファイル)] | [Save (保存)] を選択します。
   
6. 組織の取引先ページを更新します。
   

まとめ

お疲れさまでした。最初の Lightning コンポーネントを作成できました。これでシステム管理者はあなたのコンポーネントを組織に追加して、取引先の取引先責任者を表示できるようになりました。他の開発者もあなたのコンポーネントを利用でき、それぞれコードを記述する必要がなくなります。