Sign Up ›
  • Chris Seed
  • NEWBIE
  • 10 Points
  • Member since 2016
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 2
    Questions
  • 3
    Replies
0 replies

SLDS tiles not rendering correctly in Salesforce Mobile app

Hi There

I am trying to get some data to appear in the Salesforce mobile app and am using Visualforce & SLDS tiles to achive that.  However when it renders in the mobile app is seems to be cutting the tiles off on the right hand side (See screenshot).  I can't see any options relating to rendering when you use SLDS tiles and so I am wondering if its something else causing the issue.     I am able to scroll right to see the rest of the data in the tile so I can see its coming back and that the tiles are getting created.  Looking in the mobile app it looks like the Frame which is there for the Visualforce page is too small for the tiles.  

I only need this page to work in the mobile app.  I have a Lightning app builder 'app page' which is called from the mobile app.  Then in this page I have added a visualforce page.  

I have attached the code and a screenshot.  

Thanks
Chris 
<apex:page standardController="XXCC_COA_Coaching_Contacts__c" extensions="XXCC_COA_Coaching_Contacts_VF" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <title>Coaching Contacts</title>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <!-- Import the Design System style sheet -->
            <apex:slds />
        </head>
        <body>
            <!-- REQUIRED SLDS WRAPPER -->
            <div class="slds-scope">            
                <div class="slds-button-group" role="group">
                    <button class="slds-button slds-button_brand">Filter</button>
                    <div class="slds-dropdown-trigger slds-button--last">
                        <button class="slds-button slds-button--icon-border-filled">
                            <svg class="slds-button__icon" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down" />
                            </svg>
                            <span class="slds-assistive-text">More Actions</span>
                        </button>
                        <div class="slds-dropdown slds-dropdown--left slds-text-heading--label slds-dropdown--menu">
                            <ul class="slds-dropdown__list" role="menu">
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Today</a></li>  
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Tomorrow</a></li>
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">This Week</a></li>
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Specify Dates</a></li>
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Town</a></li>
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">County</a></li> 
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Dealerships</a></li>
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">All Dealerships</a></li>            
                            </ul>
                        </div>
                    </div>
                    <button class="slds-button slds-button_brand">Sort</button>
                    <div class="slds-dropdown-trigger slds-button--last">
                        <button class="slds-button slds-button--icon-border-filled">
                            <svg class="slds-button__icon" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down" />
                            </svg>
                            <span class="slds-assistive-text">More Actions</span>
                        </button>
                        <div class="slds-dropdown slds-dropdown--left slds-text-heading--label slds-dropdown--menu">
                            <ul class="slds-dropdown__list" role="menu">
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Contact Name</a></li>
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Dealership Name</a></li>
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Region</a></li>
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Assignee Name</a></li>
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Contact Status</a></li>
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Event Start</a></li>  
                                <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem" onclick="getFilteredContacts()">Event End</a></li>
                            </ul>
                        </div>
                    </div>
                    <button class="slds-button slds-button_brand" onclick="getFilteredContacts()">All</button>
                </div>
                <div class="slds-page-header">                    
                    <div id="coachIds"></div>   
                    <div id="responseErrors"></div> 
                </div>
                <!-- / MASTHEAD -->
                <!-- PRIMARY CONTENT WRAPPER -->
                <div class="myapp slds-p-horizontal_medium">
                    <ul id="contact-list" class="slds-has-dividers_bottom-space"></ul>
                </div>
                <!-- / PRIMARY CONTENT WRAPPER -->
            </div>
            <!-- / REQUIRED SLDS WRAPPER -->
            <!-- JAVASCRIPT -->
            <script type="text/javascript">
            //You use this if you want the page to open with Data in it
            //Otherwise if the button presses with populate the page you don't need this
            //(function () {
            //var contact = getFilteredContacts();
            //***********End remoteAction call******************
            //var contactList = document.getElementById('contact-list');
            //})();

            Visualforce.remoting.timeout = 120000; // Set timeout at page level
            function getFilteredContacts() {
                //var searchFrom = document.getElementById('ccFrom').value;
                //var searchTo = document.getElementById('ccTo').value;
                //***********remoteAction code******************
                Visualforce.remoting.Manager.invokeAction(
                    '{!$RemoteAction.XXCC_COA_Coaching_Contacts_VF.getContactsbyName}',
                    //searchFrom,
                    null,
                    function (result, event){
                        if(event.status && result && (result.constructor === Array)) {
                            //console.log('getContactsbyName event.status:' + event.status);
                            //console.log('getContactsbyName result:' + JSON.stringify(result));
                            var coachContacts = '<h3 class="slds-tile__title slds-truncate" title="Contacts & Events"><a href="javascript:void(0);"></a></h3>';                                           
                            result.forEach(function(item,index) {  
                              coachContacts += '<div class="slds-box"><article class="slds-tile">'
                                                +'<div class="slds-tile__detail"><dl class="slds-list_horizontal slds-wrap">'
                                                +'<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Contact Name">Contact Name:</dt>'
                                                +'<dd class="slds-item_detail slds-truncate" title="Contact Name">'+ item.contactName+'</dd>'
                                                +'<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Dealer Name">Dealer Name:</dt>'
                                                +'<dd class="slds-item_detail slds-truncate" title="Dealer Name">'+ item.dealershipName +'</dd>'
                                                +'<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Region">Region:</dt>'
                                                +'<dd class="slds-item_detail slds-truncate" title="Region">'+ item.dealershipregion +'</dd>'
                                                +'<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Assignee">Assignee:</dt>'
                                                +'<dd class="slds-item_detail slds-truncate" title="Assignee">'+ item.assigneeName +'</dd>'
                                                +'<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Status">Status:</dt>'
                                                +'<dd class="slds-item_detail slds-truncate" title="Status">'+ item.contactStatus +'</dd>'
                                                +'<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Event Start">Event Start:</dt>'
                                                +'<dd class="slds-item_detail slds-truncate" title="Event Start">'+ item.eventStartDatetime +'</dd>'
                                                +'<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Event End">Event End:</dt>'
                                                +'<dd class="slds-item_detail slds-truncate" title="Event End">'+ item.eventEndDatetime +'</dd>'
                                                +'<div class="slds-border_bottom"></div>'
                                                +'</dl></div></article></div>';
                            });     
                            coachContacts += '</ul>';
                            document.getElementById("coachIds").innerHTML = coachContacts; 
                        } else if (event.type === 'exception') {
                            console.log('Exception ContactsbyName result:' + JSON.stringify(result));
                            console.log('Exception getContactsbyName event.status:' + event.status);
                            document.getElementById("responseErrors").innerHTML = event.message + "<br/>\n" + event.where + "";
                        } else {
                            console.log('Other error getContactsbyName result:' + JSON.stringify(result));
                            console.log('Other error getContactsbyName event.status:' + event.status);
                            document.getElementById("responseErrors").innerHTML = event.message;
                        }
                    }
                )
            };
            
            </script>
            <!-- JAVASCRIPT -->       
          </body>
    </html>
</apex:page>
  
public with sharing class XXCC_COA_Coaching_Contacts_VF {
	//public List<contactEvent> Records {get; set;}
	
    public XXCC_COA_Coaching_Contacts_VF(ApexPages.StandardController stdController){
	}
    
    //Used for the new class to store contacts and the matching events
    public class contactEvent {
        public String Id { get;set; }
        public String contactName { get;set; }
        public String dealershipName { get;set; }
        public String dealershipregion { get;set; }
        public String assigneeName { get;set; }
        public String contactStatus { get;set; }
        public String eventStartDatetime { get;set; }
        public String eventEndDatetime { get;set; }
    }
    
    /**
    * ───────────────────────────────────────────────────────────────────────────────────────────────┐
    * Function to get the contact and events for a certain contact
    *
    * ────────────────────────────────────────────────────────────────────────────────────────────────
    *           NAME             DESCRIPTION (MENTION LIKELY VALUES IN DESCRIPTION)
    * @param    contactName      The contact name
    * @return   contactEventList A list of all the matching contacts with events
    * ───────────────────────────────────────────────────────────────────────────────────────────────┘
    */
    @RemoteAction
    public static List<contactEvent> getContactsbyName(String contactName){
        system.debug('Entering getContactsbyName'); 
        
        //Create lists to store contact record updates and new task inserts ready for DML operations at the end
        List<XXCC_COA_Coaching_Contacts__c> contactsToUpdate = new List<XXCC_COA_Coaching_Contacts__c>();

        //Get the Coaching Contacts and store in a Map for easy retrieval later
        List<XXCC_COA_Coaching_Contacts__c> contactsList = [
            select Id
            ,	   Name 
            ,      XXCC_COA_Dealership__r.Name
            ,      XXCC_COA_Dealership__r.XXCC_COA_Region__c
            ,      XXCC_COA_Assignee__r.Name
            ,      XXCC_COA_Status__c
            from   XXCC_COA_Coaching_Contacts__c
            //where  Name = :contactName
            //and    Name != null
        ];
        system.debug('Contacts List size: '+contactsList.size()); 
        
        //Put coaching contact IDs for the returned Contacts into a Set
        //
        Map<Id, XXCC_COA_Coaching_Contacts__c> contactMap = new Map<Id, XXCC_COA_Coaching_Contacts__c>(contactsList);

        system.debug('Contact Map size: '+contactMap.size()); 
        
        Set<Id> contactSet = new Set<Id>();
        for (XXCC_COA_Coaching_Contacts__c c : contactsList) {
            contactSet.add(c.Id);
        }
        system.debug('Contact Set size: '+contactSet.size()); 
        //Now we need to get all the events for the selected contacts
        List<Event> newEvents = [
                SELECT Id, XXCC_COA_Coaching_Contact__c, StartDateTime, EndDateTime
                FROM   Event
                WHERE  XXCC_COA_Coaching_Contact__c IN :contactSet
                AND    XXCC_COA_Coaching_Contact__c != null
        ];
        system.debug('Events List size: '+newEvents.size()); 
		
       //Need to create a new list which is a combination of the contacts and the events
       //This uses the new class structure created earlier  
       List<contactEvent> contactEventList = new List<contactEvent>();
		
       //lets start by looping through all the events we selected
       for (event e : newEvents) {
           			system.debug('Entering the for event loop'); 
                    //Create a new object so we can merge the coaching contact and this event
                    //into one record and send back to the UI
           			contactEvent ce = new contactEvent();
           			//Need a temp location for the contact record & Get the correct contact from the contact Map
           			XXCC_COA_Coaching_Contacts__c tempContact = contactMap.get(e.XXCC_COA_Coaching_Contact__c);
           			//Now we add all the retrieved data into the contact event object
           			ce.Id = tempContact.Id;
                    ce.contactName = tempContact.Name;
           			ce.contactName = tempContact.Name;
                    ce.dealershipName = tempContact.XXCC_COA_Dealership__r.Name;
                    ce.assigneeName = tempContact.XXCC_COA_Assignee__r.Name;
                    ce.contactStatus = tempContact.XXCC_COA_Status__c;
                    ce.eventStartDatetime = e.StartDateTime.format('dd/MMMMM/yyyy hh:mm');
                    ce.eventEndDatetime = e.EndDateTime.format('dd/MMMMM/yyyy hh:mm');
                    //Now we add the single coaching object to the list of coaching objects
                    if (ce.Id != null) contactEventList.add(ce);
           			system.debug('Added one record to the Contact Event List'); 
        }
        //finally we return the list of all coaching contact objects
        system.debug('Leaving getContactsbyName'); 
        if (contactEventList != null)
        	return(contactEventList);
        else 
            return null;
    }
    
    /**
	* ───────────────────────────────────────────────────────────────────────────────────────────────┐
	* Function to get the contact and events for a certain contact
	*
	* ────────────────────────────────────────────────────────────────────────────────────────────────
	*           NAME             DESCRIPTION (MENTION LIKELY VALUES IN DESCRIPTION)
	* @param    contactName      The contact name
	* @return   contactEventList A list of all the matching contacts with events
	* ───────────────────────────────────────────────────────────────────────────────────────────────┘
	*/
    
    @RemoteAction
    public static List<XXCC_COA_Coaching_Contacts__c> getContactsToday(){
        List<XXCC_COA_Coaching_Contacts__c> coachingContactsStatus = [select Id, Name 
                                                                      from  XXCC_COA_Coaching_Contacts__c];
        system.debug('Total contacts in the data return: '+coachingContactsStatus.size()); 
        return(coachingContactsStatus);
    }
}

Screenshot from the Salesforce Mobile app
SOLVED
9 replies

Visualforce page using Javascript remoteAction to pass results into slds tiles

Hi everyone.

Would really appreciate some help with this problem.     

Summary I want to develop a VisualForce page to display a list of records from a few custom objects and then allow the users to filter and sort the list of records.  This is a new implementation so nothing will be used in classic.  The results are only required in the Salesforce mobile app at present but likely they will be required on the desktop version in the future.  Reading around the subject the recomended solution seems to be a Visualforce page using the slds to display the data.  Given its for mobile then tiles rather than tables should be used.   Again as its mobile its recommended to use a remoteAction call from VF to a APEX controller.   

Issue I am not able to get the data to return back from the remoteCall back to the slds tiles.  If I use apex:remoteObjects call in VF, rather than a javacsript remoteAction call I am able to get the data to appear on the page in the tiles.   

Code Notes:  1. I have simplified the code below to try and make it easier to understand.   2. You will see there is code in there in two places (marked with ***remoteObects***) to highlight the code which I was able to use to get it to work with that technology for reference purposes.   

I have also highlighted the code in two places which is for the remoteAction bits. 

Thanks 
--Visualforce page
------------

<apex:page standardController="XXCC_COA_Coaching_Contacts__c" extensions="XXCC_COA_Coaching_Contacts_VF" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <title>Coaching Contacts</title>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <!-- Import the Design System style sheet -->
            <apex:slds />
        </head>
        	<!--     ***********remoteObject code******************
            <apex:remoteObjects >
    		<apex:remoteObjectModel name="XXCC_COA_Coaching_Contacts__c" fields="Id,Name,XXCC_COA_Status__c,LastModifiedDate"/>
    		</apex:remoteObjects> -->
        <body>
            <!-- REQUIRED SLDS WRAPPER -->
            <div class="slds-scope">
                <!-- MASTHEAD -->
                <p class="slds-text-heading_label slds-m-bottom_small"> Coaching Contacts </p>
                <!-- / MASTHEAD -->
                <div class="slds-page-header">
                    <div class="slds-grid">
                        <div class="slds-col slds-has-flexi-truncate">
                        </div>
                    </div>
                </div>
                <!-- PRIMARY CONTENT WRAPPER -->
                <div class="myapp slds-p-horizontal_medium">
                    <ul id="contact-list" class="slds-has-dividers_bottom-space"></ul>
                </div>
                <!-- / PRIMARY CONTENT WRAPPER -->
            </div>
            <!-- / REQUIRED SLDS WRAPPER -->
            <!-- JAVASCRIPT -->
            <script type="text/javascript">
            (function () {
                //***********remoteObject code******************
                //var contact = new SObjectModel.XXCC_COA_Coaching_Contacts__c();
                //***********remoteAction code******************
                var contact = getRemoteContact();
                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('');
                    }
                });
            })();
            
            //***********remoteAction code******************
            Visualforce.remoting.timeout = 120000; // Set timeout at page level
            function getRemoteContact() {
                //var contactName = document.getElementById('ccSearch').value;
                var contactName = 'CSTEST';
                Visualforce.remoting.Manager.invokeAction(
                    '{!$RemoteAction.XXCC_COA_Coaching_Contacts_VF.getContactsStatus}',
                    contactName,
                    function (result, event){
                        if (event.status) {
                            // Get DOM IDs for HTML and Visualforce elements like this
                            document.getElementById("remoteCCId").innerHTML = result.Id;
                            document.getElementById('remoteCCName').innerHTML = result.Name;
                            
                        } else if (event.type === 'exception') {
                            document.getElementById("responseErrors").innerHTML =
                                event.message + "<br/>\n<pre>" + event.where + "</pre>";
                        } else {
                            document.getElementById("responseErrors").innerHTML = event.message;
                        }
                    }
                )
            };
            </script>
            <!-- JAVASCRIPT -->       
        </body>
    </html>
</apex:page>

------
--APEX Controller 
------

public with sharing class XXCC_COA_Coaching_Contacts_VF {
	public List<XXCC_COA_Coaching_Contacts__c> Records {get; set;}
	public XXCC_COA_Coaching_Contacts_VF(ApexPages.StandardController stdController){
	}
    @RemoteAction
    public static List<XXCC_COA_Coaching_Contacts__c> getContactsStatus(String contactName){
    List<XXCC_COA_Coaching_Contacts__c> coachingContactsStatus = [select Id, Name 
                                                             	  from  XXCC_COA_Coaching_Contacts__c 
                                                             	  limit 1];
    system.debug('Total contacts in the data return: '+coachingContactsStatus.size()); 
    return(coachingContactsStatus);
	}
}


Chris
SOLVED
9 replies

Visualforce page using Javascript remoteAction to pass results into slds tiles

Hi everyone.

Would really appreciate some help with this problem.     

Summary I want to develop a VisualForce page to display a list of records from a few custom objects and then allow the users to filter and sort the list of records.  This is a new implementation so nothing will be used in classic.  The results are only required in the Salesforce mobile app at present but likely they will be required on the desktop version in the future.  Reading around the subject the recomended solution seems to be a Visualforce page using the slds to display the data.  Given its for mobile then tiles rather than tables should be used.   Again as its mobile its recommended to use a remoteAction call from VF to a APEX controller.   

Issue I am not able to get the data to return back from the remoteCall back to the slds tiles.  If I use apex:remoteObjects call in VF, rather than a javacsript remoteAction call I am able to get the data to appear on the page in the tiles.   

Code Notes:  1. I have simplified the code below to try and make it easier to understand.   2. You will see there is code in there in two places (marked with ***remoteObects***) to highlight the code which I was able to use to get it to work with that technology for reference purposes.   

I have also highlighted the code in two places which is for the remoteAction bits. 

Thanks 
--Visualforce page
------------

<apex:page standardController="XXCC_COA_Coaching_Contacts__c" extensions="XXCC_COA_Coaching_Contacts_VF" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <title>Coaching Contacts</title>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <!-- Import the Design System style sheet -->
            <apex:slds />
        </head>
        	<!--     ***********remoteObject code******************
            <apex:remoteObjects >
    		<apex:remoteObjectModel name="XXCC_COA_Coaching_Contacts__c" fields="Id,Name,XXCC_COA_Status__c,LastModifiedDate"/>
    		</apex:remoteObjects> -->
        <body>
            <!-- REQUIRED SLDS WRAPPER -->
            <div class="slds-scope">
                <!-- MASTHEAD -->
                <p class="slds-text-heading_label slds-m-bottom_small"> Coaching Contacts </p>
                <!-- / MASTHEAD -->
                <div class="slds-page-header">
                    <div class="slds-grid">
                        <div class="slds-col slds-has-flexi-truncate">
                        </div>
                    </div>
                </div>
                <!-- PRIMARY CONTENT WRAPPER -->
                <div class="myapp slds-p-horizontal_medium">
                    <ul id="contact-list" class="slds-has-dividers_bottom-space"></ul>
                </div>
                <!-- / PRIMARY CONTENT WRAPPER -->
            </div>
            <!-- / REQUIRED SLDS WRAPPER -->
            <!-- JAVASCRIPT -->
            <script type="text/javascript">
            (function () {
                //***********remoteObject code******************
                //var contact = new SObjectModel.XXCC_COA_Coaching_Contacts__c();
                //***********remoteAction code******************
                var contact = getRemoteContact();
                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('');
                    }
                });
            })();
            
            //***********remoteAction code******************
            Visualforce.remoting.timeout = 120000; // Set timeout at page level
            function getRemoteContact() {
                //var contactName = document.getElementById('ccSearch').value;
                var contactName = 'CSTEST';
                Visualforce.remoting.Manager.invokeAction(
                    '{!$RemoteAction.XXCC_COA_Coaching_Contacts_VF.getContactsStatus}',
                    contactName,
                    function (result, event){
                        if (event.status) {
                            // Get DOM IDs for HTML and Visualforce elements like this
                            document.getElementById("remoteCCId").innerHTML = result.Id;
                            document.getElementById('remoteCCName').innerHTML = result.Name;
                            
                        } else if (event.type === 'exception') {
                            document.getElementById("responseErrors").innerHTML =
                                event.message + "<br/>\n<pre>" + event.where + "</pre>";
                        } else {
                            document.getElementById("responseErrors").innerHTML = event.message;
                        }
                    }
                )
            };
            </script>
            <!-- JAVASCRIPT -->       
        </body>
    </html>
</apex:page>

------
--APEX Controller 
------

public with sharing class XXCC_COA_Coaching_Contacts_VF {
	public List<XXCC_COA_Coaching_Contacts__c> Records {get; set;}
	public XXCC_COA_Coaching_Contacts_VF(ApexPages.StandardController stdController){
	}
    @RemoteAction
    public static List<XXCC_COA_Coaching_Contacts__c> getContactsStatus(String contactName){
    List<XXCC_COA_Coaching_Contacts__c> coachingContactsStatus = [select Id, Name 
                                                             	  from  XXCC_COA_Coaching_Contacts__c 
                                                             	  limit 1];
    system.debug('Total contacts in the data return: '+coachingContactsStatus.size()); 
    return(coachingContactsStatus);
	}
}


Chris