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

visualforce for salesforce1

<apex:page standardController="Relation__c" extensions="AddRelationFromAccountController" recordSetVar="var">    
    <link href="{!URLFOR($Resource.bootStrap, 'bootstrap/css/bootstrap.min.css')}" rel="stylesheet" media="screen" />
    <apex:includeScript value="{!URLFOR($Resource.bootStrap, 'js/bootstrap.min.js')}"/>
    
<apex:sectionHeader title="Add New Relation"/>
<apex:pageMessages />
    <apex:form >
<apex:pageBlock title="Relaiton Edit">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save" styleClass="btn btn-success"/>
                <apex:commandButton action="{!cancel}" value="Cancel" styleClass="btn btn-success"/>
            </apex:pageBlockButtons>
         <apex:pageBlockSection title="Contact Information" columns="2">
             <apex:pageBlockSectionItem >
                  <apex:outputLabel value="Client" for="name" />
                  <apex:outputField id="name" value="{!myRelation.Client__c}"/>
             </apex:pageBlockSectionItem>
             <apex:pageBlockSectionItem >
                  <apex:outputLabel value="Relation type" for="relationType" />
                  <apex:inputField id="relationType"  value="{!myRelation.Relation_Type__c}"/>
             </apex:pageBlockSectionItem>
             <apex:pageBlockSectionItem >
                  <apex:outputLabel value="Related Client" for="relatedClient" />
                  <apex:inputField id="relatedClient"  value="{!myRelation.Related_Client__c}"/>
             </apex:pageBlockSectionItem>
             <apex:pageBlockSectionItem >
                  <apex:outputLabel value="Owner" for="owner" />
                  <apex:outputField id="owner" value="{!myRelation.OwnerId}" />
             </apex:pageBlockSectionItem>      
 </apex:pageBlockSection> 
 </apex:pageBlock>

</apex:form>
</apex:page>
I have this visualforce page, and it doesn't look good in salesforce1.
User-added image
Can anyone show me how can I make this page to look good in salesforce1? 
Himanshu ParasharHimanshu Parashar
Hi Sima,

There are some constrains when we work with Salesforce1, such as we avoid pageblock, pageblock section etc. Salesforce1 automatically disables these elements when the page runs inside it.

So please go through the basic of Salesforce1

https://developer.salesforce.com/trailhead/visualforce_mobile_salesforce1/visualforce_mobile_salesforce1_nav_menu


You need to use simple html and css instead of <apex:pageblock>

Thanks,
Himanshu
kgilkgil

Hello,

Although Himanshu is correct in saying these components should be avoided in general, you can still include the standard stylesheets for them to be formatted like they would in the full site. Note that enabling these stylesheets will not give the Salesforce1 look and feel, but will mimic the standard Salesforce component look and feel.

Simply add the attribute standardStylesheets="true" in your opening page tag. Here is a reference for when this change was made to automatically disable the stylesheets for Salesforce1 unless explicitly declared that you would like to use them:
http://releasenotes.docs.salesforce.com/en-us/spring15/release-notes/rn_vf_suppress_unneeded_assets_in_salesforce1.htm

And the component reference for the page component mentions the standardStylesheets attribute for reference as well:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_page.htm

Be careful though, even with the standardStylesheets attribute enabled there are limitations with Salesforce1 such as formatting and issues with navigation for the standard Save and Cancel buttons. Review the Salesforce1 Developer's Guide to review how navigation should be handled within the app as you work through this implementation.