Sign Up ›
  • Todd Day
  • NEWBIE
  • 5 Points
  • Member since 2017
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 1
    Likes Given
  • 1
    Questions
  • 1
    Replies
1 replies

Create a mobile-friendly Visualforce page using SLDS

I'm currenty stuck on this trailhead challenge and no matter what resources I try and look up, I cant seem to get an answer. 

The challenge is as follows:

Create a mobile-friendly Visualforce page using SLDS
Use SLDS to create a simple, mobile-friendly list of existing contact names and phone numbers and display the page in the Salesforce mobile app.
Create a Visualforce page named MobileContactList.
It must import the Lightning Design System.
It must use the Lightning Design System Name Value List utility class.
It must use the Contact standard list controller with a recordSetVar of contacts.
It must iterate through the list of contacts using an apex:repeat component that's bound to a var named c.
It must display the name and phone number of the contacts on the page.
It must be made available for the Salesforce mobile app.
It must be included in a tab named MobileContacts. The tab must be added to the Salesforce app navigation 

 

The code I am using. 

<apex:page standardController="Contact"  recordSetVar="contacts" 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" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <apex:slds />
    </head>   
    <body>
       <!-- REQUIRED SLDS WRAPPER -->
        <div class="slds-scope">
            <!-- PRIMARY CONTENT WRAPPER -->
            <div class="myapp">
                <dl class="slds-list_horizontal slds-wrap">
 					 <apex:repeat value="{!contacts}" var="contact">
                        <dt class="slds-item_label slds-text-color_weak slds-truncate" title="name">name:</dt>
                        <dd class="slds-item_detail slds-truncate" title="Contact Name">{!contact.name}</dd>
                     </apex:repeat>
                </dl>    
            </div>
        </div>
    </body>
</html>
</apex:page>


I am using the following website as reference for the Name Value List.

https://www.lightningdesignsystem.com/utilities/name-value-list/

and the trailhead itself on how to structure my code

https://trailhead.salesforce.com/trails/force_com_dev_intermediate/modules/visualforce_mobile_salesforce1/units/visualforce_mobile_salesforce1_lightning_design

And I am referring to previous trailheads for examples on how to use the apex:repeat and recordSetVar but nothing is displaying on my page and when I look at the source code, there's simply nothing in the data list. 

Any ideas?

11 replies

I don't see challenge section

I am not able to see Challenge section under Admin Beginner > Lightning Experience Customization > Create and Customize List Views.
Please take a look.
Thank you in advance !

User-added image
11 replies

I don't see challenge section

I am not able to see Challenge section under Admin Beginner > Lightning Experience Customization > Create and Customize List Views.
Please take a look.
Thank you in advance !

User-added image