function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Raghu.2020Raghu.2020 

Trailhead Problem - Using CSS and JavaScript Mobile Frameworks

Hi,

I am trying to learn module "Using CSS and JavaScript Mobile Frameworks" in Visualforce Trailhead. However, even after following the instructions in the module, I am unable to get any output. My preview window is blank. Does anyone else face this problem. Please help.
Best Answer chosen by Raghu.2020
Sakthivel ThandavarayanSakthivel Thandavarayan
Satya,

Disable development mode in user settings and try again. 

All Answers

Sakthivel ThandavarayanSakthivel Thandavarayan

Use recordsetvar and apex repeat to get the contact list.
Get contact names using output field.
Create test contacts. 
Raghu.2020Raghu.2020
Hi Sakthivel,

Thanks for your response. However, I was not talking about the trailhead challenge. Instead, the example provided in the module does not seem to work. 

Thank you,
Satya
Sakthivel ThandavarayanSakthivel Thandavarayan
Satya,

Disable development mode in user settings and try again. 
This was selected as the best answer
jose leal 9jose leal 9
add a filter and make use you use 'all contacts'
Prathibha SPrathibha S
Hi Sakthivel,

I am getting the blank screen though I have implemented the intructions :
  
<apex:page standardController="Contact" recordSetVar="contacts" showHeader="false" sidebar="false" standardStylesheets="false"
    docType="html-5.0" applyHtmlTag="false" applyBodyTag="false">

<html>

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

<body>

    <apex:repeat value="{!contacts}" var="c">

        <apex:outputField value="{!c.Name}" id="theValue"/><br/>

    </apex:repeat>

</body>

</html>

</apex:page>
Can you please help me where I am wrong?


 
Sakthivel ThandavarayanSakthivel Thandavarayan
You are missing this step --> Must use the Bootstrap List Group component

Add div tag with appropriate style class to the components in body. 
Monika WMonika W
Hi,
My challenge is completed, but one thing still bothers me. Page did not display any contact. 
Contacts are in the database. I tried a variety of ways, but it did not work.
  
<apex:page standardController="Contact" recordSetVar="contacts"
    showHeader="false" sidebar="false" standardStylesheets="false"
    applyHtmlTag="false" applyBodyTag="false">
    
<html>
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" 
              href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
              integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
              crossorigin="anonymous"/>
    
        <!-- Optional theme -->
        <link rel="stylesheet" 
              href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" 
              integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" 
              crossorigin="anonymous"/>
    
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
        crossorigin="anonymous"/> 
    </head>
    
    <body>
          <ul class="list-group">
             <apex:repeat value="{! contacts }" var="c">                   
             <li class="list-group-item">
                {!c.FirstName} {!c.LastName} --- {!c.Name}                        
              </li>                      
             </apex:repeat>              
          </ul>     
             
         <!-- this test also shows nothing --> 
         <!-- 
            {!contacts} 
            <apex:repeat value="{! contacts }" var="c"> 
               {!c.FirstName} {!c.LastName}
            </apex:repeat> 
         -->
                  
    </body>
</html>    
</apex:page>

Any idea what is wrong?
Jhon Cortes 7Jhon Cortes 7
@Monika W Maybe you have not add query id contact on URI , like this https://c.na22.visual.force.com/apex/MobileContactList?id=0031500001ZtBnpAAF
Monika WMonika W
@Jhon, thank you. That is right :)