Visualforce Developer Guide
jMixed Visualforce and HTML
Visualforce pages designed this way are still “standard” Visualforce, in that they use the standard request-response cycle, standard controller functionality, <apex:inputField> for form fields, POSTBACK and view state, and so on. The main difference from authoring pages for the full Salesforce site is the reduced or eliminated use of Visualforce tags to add structure to the page, in favor of static HTML. That is, replacing <apex:pageBlock>, <apex:pageBlockSection>, and so on, with <div>, <p>, <span>, and so on.
This approach also requires creating CSS stylesheets to manage the look-and-feel of the page elements, instead of using the built-in, automatically applied styles provided when you use the Visualforce components. While this can take some time, it allows you to much more closely match the visual design of the Salesforce mobile app. This also means that pages designed this way won’t match the full Salesforce site visually.
Applying this Approach to Your Visualforce Pages
To use this approach for creating pages to use in the Salesforce mobile app, follow a few general rules.
- Don’t use the following Visualforce tags:
- <apex:pageBlock>
- <apex:pageBlockButtons>
- <apex:pageBlockSection>
- <apex:pageBlockSectionItem>
- <apex:pageBlockTable>
- Use <apex:form>, <apex:inputField> or <apex:input>, and <apex:outputLabel> for forms.
- Use <apex:outputText> or Visualforce for non-editable text.
- Use your preferred HTML to construct the structure for the page: <div>, <span>, <h1>, <p>, and so on.
- Use CSS styling to apply your preferred visual design.
Advantages and Limitations
- Reasonably fast development time, and you use the normal Visualforce development tools and processes.
- It’s reasonably easy to repurpose existing pages.
- You can more closely match the Salesforce mobile app’s look and feel.
- This approach makes the usual Visualforce request round trips, with larger data payloads, compared to a fully mobile-optimized approach using JavaScript remoting.
- It’s extra work to add CSS styles that replace the styles automatically added by <apex:pageBlock> and related components.
Example of a Mixed Visualforce and HTML Page
1<apex:page standardController="Warehouse__c">
2
3<style>
4 html, body, p { font-family: sans-serif; }
5</style>
6
7<apex:form >
8
9 <h1>{!Warehouse__c.Name}</h1>
10
11 <h2>Warehouse Details</h2>
12
13 <div id="theForm">
14 <div>
15 <apex:outputLabel for="address" value="Street Address"/>
16 <apex:inputField id="address"
17 value="{! warehouse__c.Street_Address__c}"/>
18 </div>
19 <div>
20 <apex:outputLabel for="city" value="City"/>
21 <apex:inputField id="city"
22 value="{! warehouse__c.City__c}"/>
23 </div>
24 <div>
25 <apex:outputLabel for="phone" value="Phone"/>
26 <apex:inputField id="phone"
27 value="{! warehouse__c.Phone__c}"/>
28 </div>
29 </div>
30
31 <div id="formControls">
32 <apex:commandButton action="{!quickSave}" value="Save"/>
33 </div>
34
35</apex:form>
36
37</apex:page>