Add a Tile for Each Contact
メモ
日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語で受講していただく必要があります。英語の意味についてはかっこ内の翻訳をご参照ください。Trailhead Playground では (1) [Locale (地域)] を [United States (米国)] に、[Language (言語)] を [English (英語)] に切り替えて、(2) 英語の値のみをコピーして貼り付けてください。こちらの指示に従ってください。
翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。
操作内容
- 組織から取引先責任者のリストを取得する
- タイルコンポーネントを使用して各取引先責任を表示する
ステップ 1: 取引先責任者タイルを追加する
基本的なページができたところで、取引先責任者のリストを取得し、各取引先責任者をタイルとして「contact-list」div に追加していきます。
データへのアクセスには Visualforce リモートオブジェクトを使用し、JavaScript 経由でアクセスします。
<!-- JAVASCRIPT --> コメントの間に次のコードを追加して、コードベースを変更します。
<!-- JAVASCRIPT --> <script> (function () { var contact = new SObjectModel.Contact(); var contactList = document.getElementById('contact-list'); /* FUNCTION createTile */ function createTile(record) { return ['<li class="slds-item">', '<div class="slds-tile slds-media">', '<div class="slds-media__body">', '<h3 class="slds-truncate" title="', record.get('Name'), '"><a href="javascript:void(0);">', record.get('Name'), '</a></h3>', '<div class="slds-tile__detail slds-text-body_small">', '<p class="slds-truncate">', record.get( 'Title'), '</p>', '</div>', '</div>', '</div>', '</li>' ].join(''); } /* FUNCTION createTile */ contact.retrieve({ orderby:[{ LastModifiedDate:'DESC' }], limit:810 }, function (error, records) { if (error) { alert(error.message); } else { contactList.innerHTML = records.map(createTile).join(''); } }); })(); </script> <!-- JAVASCRIPT --> ステップ 2: プレビューする
ページを保存して、[Preview (プレビュー)] ボタンをクリックします。
リソース
Design System サイトに、上記で使用したコンポーネントの他のドキュメントや例が掲載されています。
