Add a Tile for Each Contact

What You’ll Do

  • Fetch a list of contacts from your org
  • Display each one using a tile component

Step 1: Add Contact Tiles

Now that we have the basic page setup, we're going to fetch a list of contacts and append each contact as a tile to the “contact-list” div.

We’ll be using Visualforce remote objects for data access, accessed via JavaScript.

Modify the code base by adding the following code between the <!-- JAVASCRIPT --> comments:

<!-- 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 -->

Step 2: Preview

Save your page, and click the Preview button.

Preview of Visualforce page after adding tiles for contacts

Resources

The Lightning Design System site has more documentation and examples for the components used above.