各取引先責任者のタイルの追加

操作内容

  • 組織から取引先責任者のリストを取得する
  • タイルコンポーネントを使用して各取引先責任を表示する

ステップ 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 (プレビュー)] ボタンをクリックします。

取引先責任者のタイルを追加後の Visualforce ページのプレビュー

リソース

Design System サイトに、上記で使用したコンポーネントの他のドキュメントや例が掲載されています。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる