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.
Resources
The Lightning Design System site has more documentation and examples for the components used above.