Hi All,

I'm trying a lightning trailhead link to implement the Tile view for contact. But even after coding the same in VF page I'm unable to see any results upon Preview. Please help.

https://trailhead.salesforce.com/en/project/workshop-lightning-design-system-visualforce/slds-vf-07-contact-tiles

Here is my code- (which is same as mentioned in the trailhead)


<apex:page >

  <h1>Congratulations</h1>
  This is your new Page

 
  <script>
  (function() {
    var contact = new SObjectModel.Contact();
    var contactList = document.getElementById('contact-list');

    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('');
    }

    contact.retrieve(
      { orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
      function(error, records) {
        if (error) {
          alert(error.message);
        } else {
          contactList.innerHTML = records.map(createTile).join('');
        }
      }
    );
  })();

</script>
</apex:page>