+ Start a Discussion
James WinslowJames Winslow 

Create a Mobile Friendly Visualforce Page Using Bootstrap

I am trying to pass this challenge: https://developer.salesforce.com/trailhead/force_com_dev_intermediate/visualforce_mobile_salesforce1/visualforce_mobile_salesforce1_mobile_frameworks?state=id%20api%20web
but there are conflicts with the directions/requirements (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'.
).  Here is the problem, to get a visualforce page to appear in the Salesforce1 mobile app you have to create a Custom Global Action to use the visualforce page.
When you try to select a visualforce page for the action type, any visualforce pages that have a standardController does not appear in the select list and according to the Developer Guide: https://developer.salesforce.com/docs/atlas.en-us.salesforce1.meta/salesforce1/vf_dev_best_practices_pages_custom_actions.htm under the Custom Global Actions, “More specifically, Visualforce pages used as global actions can’t use any standard controller. You must write a custom controller to handle the page. Your code might create one or many records, modify found records, and so on.”
has anyone been able to pass this challenge?

Thanks in advance for any help you can provided.
amine elmrabetamine elmrabet
Hi !

you don't have to create anything EXCEPT :
  • "MoblieContactList" VisualeForce Page (with the code Below).
  • Go to Setup/Develop/VisualeForce Pages and click Edit on MobileContactList page then Make Sure you checked "Available for Salesforce mobile apps and Lightning Pages" CheckBox.
  • Go to Setup/Create/Tabs/VisualeForce Tabs click NEW, Choose your MobileContactList Page in the dropdown list, Name it MobileContacts.
  • Go to Setup/Admin/Mobile Administration/SalesForce 1 Navigation choose MobileContacts from the left list "available" and Add it to the Right "selected" List .
There you Go !!

Code : 

<apex:page standardController="contact" recordSetVar="contacts">

    <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>

<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>

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

Hudson MaryHudson Mary
Is it possible to generate a responsive visualforce page using apex code and HTML.