+ Start a Discussion
Ranjeet Kumar 16Ranjeet Kumar 16 

Bootstrap to create a simple mobile friendly list of existing contact names

Hi , I am not able to complete the trail had challenge in Visual force Mobile module . Getting the error as The page isn't displaying the name of the contact..

Can someone help me to find out the code. 

Please refer the below Requirement
Use Bootstrap to create a simple mobile friendly list of existing contact names and display the page within Salesforce1 mobile. The Visualforce page:Must be named 'MobileContactList'.
Must reference the minified Bootstrap JavaScript and CSS files from MaxCDN (see more here). Do NOT use Static Resources to reference these files.
Must use the Bootstrap List Group component (defined here).
Must use the Contact standard list controller with a recordSetVar of 'contacts'. The list of contacts must be iterated through using an apex:repeat component that's bound to a var named 'c'.
Must display the name of the contacts.
Must be made available for the Salesforce1 mobile app and added to a tab named 'MobileContacts'. The tab should be added to the Salesforce1 navigation menu.
 
KaranrajKaranraj
Ranjeet - Hope you have followed all the steps and tested in your developer org, before submiting the challenge. Make sure to keep the var name as 'c' and follow the other naming standards. Can you share your code here? it will be easily for us to assist you.
L3nL3n
Hi, I am getting the same error.
The page isn't displaying the name of the contact.

Here's my code.
<apex:page showHeader="false" sidebar="false" standardStylesheets="false"
    docType="html-5.0" applyHtmlTag="false" applyBodyTag="false" standardController="Contact" recordSetVar="contacts">
    
<html>
<head>
    <apex:includeScript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <apex:includeScript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"/>      
    <script>
    	angular.module("starter",[]);
    </script>
</head>    
<body ng-app="starter">
    <apex:repeat value="{!contact.name}" var="c" id="theRepeat">
        <!--apex:outputText value="{!contact.name}" id="theValue"/><br/-->
        <ul class="list-group">
  			<li class="list-group-item">{{ contact.name }}</li>

		</ul>
    </apex:repeat>
</body>    
    
    </html>        
</apex:page>

 
L3nL3n
Hi, I got it. Here's the code that works.
<apex:page showHeader="false" sidebar="false" standardStylesheets="false"
    docType="html-5.0" applyHtmlTag="false" applyBodyTag="false"
           standardController="Contact" recordSetVar="contacts">
    
<html>
<head>
    <apex:includeScript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <apex:includeScript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"/>      
    <script>
    	angular.module("starter",[]);
    </script>
</head>    
<body ng-app="starter">
    <apex:repeat value="{!contacts}" var="c" id="theRepeat">
        <!--apex:outputText value="{!contact.name}" id="theValue"/><br/-->
        <ul class="list-group">
  			<li class="list-group-item">{!c.name }</li>

		</ul>
    </apex:repeat>
</body>    
    
    </html>        
</apex:page>
L3nL3n
Hi, Do you know why you need both a repeat and a Bootstrap List Group component together? Are they not the same thing?
Mark Tyler CrawfordMark Tyler Crawford
Despite using the code above I still had to resolve the following two errors

"Challenge Not yet complete... here's what's wrong: 
The 'MobileContactList' Visualforce page does not appear to be using the Lightning Design System Name Value List utility class on the unordered list."

You have to use the list that the Salesforce design system requires to solve this challenge.
<dl class="slds-list_horizontal slds-wrap">
  <dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">Name:</dt>
  <dd class="slds-item_detail slds-truncate" title="Description for first label">{!c.name }</dd>
</dl>

You will also need to add the phone number to the list to complete the challenge. You final code should look like this:
 
<apex:page showHeader="false" sidebar="false" standardStylesheets="false"
    docType="html-5.0" applyHtmlTag="false" applyBodyTag="false"
           standardController="Contact" recordSetVar="contacts">
<apex:slds />   
<html>
<head>
    <apex:includeScript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <apex:includeScript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"/>      
    <script>
    	angular.module("starter",[]);
    </script>
</head>    
<body ng-app="starter">
    <apex:repeat value="{!contacts}" var="c" id="theRepeat">
        <dl class="slds-list_horizontal slds-wrap">
            <dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">Name:</dt>
  			<dd class="slds-item_detail slds-truncate" title="Description for first label">{!c.name }{!c.phone }</dd>
            
        </dl>
    </apex:repeat>
</body>    
    
    </html>        
</apex:page>

Below is a url to the resource definition that is required to complete this challenge. 
https://www.lightningdesignsystem.com/utilities/name-value-list/