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

Visualforce Remote Objects

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