Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Brock NortonBrock Norton 

Visualforce Mobile 7/7

Trying to complete this Challenge, but keep getting the following error despite many variations on trying to load the file.  I think I've also completed the rest of the challenge, but am unable to even check since I can't seem to get past this first "easy" part.  Thoughts?
 
  • {!c.Name}

Here are the directions:

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.
Raviteja Gandhari 7Raviteja Gandhari 7

Hi Please find the below code:

 <apex:page standardController="contact" recordSetVar="contacts" sidebar="false" standardStylesheets="false" showHeader="false">

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

<apex:pageBlock title="Contacts List">
       
        <!-- Contacts List -->
        <apex:repeat value="{! contacts }" var="c">
            <apex:outputText value="{!c.Name }"/>
        </apex:repeat>
</apex:pageBlock>

</apex:page>

Regards,
Ravi Teja
 
CNishantCNishant
Hi Ravi,
Challenge is passed but it is not  showing list of contacts
David ZhuDavid Zhu
The complete code is like this:

<apex:page applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" showHeader="false" sidebar="false" standardController="Contact" recordSetVar="contacts">
<html>
    <head>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
        <!-- Latest compiled and minified JavaScript -->
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"/>
        
    </head>
    
    <body>
        <apex:repeat value="{!contacts}" var="c">
        <ul class="list-group">
            <li class="list-group-item">{!c.name}</li>
        </ul>
        </apex:repeat>
    </body>

</html>

</apex:page>
 
Frederic Lapierre 5Frederic Lapierre 5
Hi David,

Same things, challenge pass but the contact list is not showing! Don't know why?
NiteshNitesh
Figured it out. It has somethingt to do with the standard list_views. Click on 'All Contacts' list view on Contact tab to get a list of records. Once done, go back to the visualforce page and refresh it. Your page will display the result.
Mikhail RzhevskyMikhail Rzhevsky
Correct latest version.
  
<apex:page standardController="contact" recordSetVar="contacts" sidebar="false" standardStylesheets="false" showHeader="false">
<apex:slds />
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
    var ul = document.getElementById("contactList");
    ul.addEventListener("click", function(e) {
    sforce.one.navigateToSObject(e.target.getAttribute("data-id"));
    }; 
    </script>
    <apex:slds />
</head>

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
<dl class="slds-list_horizontal slds-wrap">
  <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Name">First Label:</dt>
  <dd class="slds-item_detail slds-truncate" title="Description for Name">Description for Name</dd>
  <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Phone">Phone:</dt>
  <dd class="slds-item_detail slds-truncate" title="Description for Phone">Description for Phone</dd>
</dl>

<apex:pageBlock title="Contacts List">
       
        <!-- Contacts List -->
        <apex:repeat value="{! contacts }" var="c">
            <apex:outputText value="{!c.Name }"/>
            <apex:outputText value="{!c.Phone }"/>
        </apex:repeat>
</apex:pageBlock>

</apex:page>

 
Pablo Enrico Carvalho OliveiraPablo Enrico Carvalho Oliveira

I preffer use simple codes.

<apex:page standardController="Contact" recordSetVar="contacts" >
    
    <html>
        <apex:slds /> 
        <head>
            
        </head>        
        <body>            
            <dl class="slds-list_horizontal slds-wrap">
                <apex:repeat value="{!contacts}" var="c">
                	 <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Name"> {!c.Name}	</dt>
               		 <dd class="slds-item_detail slds-truncate" title="Phone"> {!c.Phone} </dd>                
                </apex:repeat>
            </dl>       
        </body>
    </html>   
    
</apex:page>