Aura コンポーネントの作成

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語で受講していただく必要があります。英語の意味についてはかっこ内の翻訳をご参照ください。必ず英語の値をコピーして貼り付けてから、Trailhead Playground の言語を [English] に、ロケールを [United States] に切り替えてください。こちらの指示に従ってください。

翻訳版の Trailhead を活用する方法については、自分の言語の Trailhead バッジをご覧ください。

Trail Together の動画

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

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

Aura コンポーネントを作成してレコードページに追加する

Aura コンポーネントは、マークアップ、JavaScript、および CSS を組み合わせたものです。最初に、コンポーネントバンドルを作成します。

1. 開発者コンソールで、[File (ファイル)] | [New (新規)] | [Lightning Component (Lightning コンポーネント)] を選択します。
2. コンポーネント名に MyContactList と入力します。
3. [Lightning Record Page (Lightning レコードページ)] をオンにして、[Submit (送信)] をクリックします。
4. aura:component タグに Apex コントローラーへの参照 controller="MyContactListController" を追加します。aura:component タグは次のようになります。

    <aura:component controller="MyContactListController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
   

5. 次のコードをコンポーネントの 2 行目に追加します。

   <aura:attribute name="recordId" type="Id" />
   <aura:attribute name="Account" type="Account" />
   <aura:attribute name="Contacts" type="Contact" />
   <aura:attribute name="Columns" type="List" />
   <force:recordData aura:id="accountRecord"
                     recordId="{!v.recordId}"
                     targetFields="{!v.Account}"
                     layoutType="FULL"
                     />
   <lightning:card iconName="standard:contact" title="{!'Contact List for ' + v.Account.Name}">
       <!-- Contact list goes here -->
   </lightning:card>
   

   aura:attribute は、Aura コンポーネント内にデータを保存するために使用します。この場合は現在の取引先レコードページの ID です。このコンポーネントは Lightning Data Service の force:recordData も使用して現在のレコードの項目を取得し、Account という属性に保存するため、取引先の名前をコンポーネントのタイトルとして表示できます。Lightning フレームワークには、Lightning 基本コンポーネントと呼ばれる UI のビルディングブロックが含まれます。lightning:card は、データを表示するための基本コンポーネントです。カードのタイトルは、aura 属性の Account から取引先名を取り込みます。
6. [File (ファイル)] | [Save (保存)] を選択します。
7. アプリケーションランチャー で、[Accounts (取引先)] を見つけて開きます。
8. [Recently Viewed (最近参照したデータ)] リストから [All Accounts (すべての取引先)] に切り替え、United Oil & Gas Corp の取引先をクリックして開きます。
9. [Setup (設定)] 歯車をクリックし、[Edit Page (編集ページ)] を選択してアプリケーションビルダーを起動します。
10. カスタムコンポーネントリストからコンポーネントをドラッグして、右側の列の上部、活動コンポーネントの上にドロップします。
11. [Save (保存)] ボタンをクリックします。
12. [Activate (有効化)] をクリックし、[Assign as Org Default (組織のデフォルトとして割り当て)] をクリックします。
13. [Desktop (デスクトップ)] をクリックして、[Next (次へ)] をクリックします。
14. [Save (保存)] をクリックし、左上の [Back (戻る)] をクリックしてレコードページに戻ります。