Visualforce Developer Guide

Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Live Controller (Pilot)
Advanced Examples
Overriding Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrating Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Salesforce Platform Development Process
Tell Me More: Where Visualforce Pages Can Appear in the Salesforce Mobile App
Guidelines and Best Practices
Sharing Visualforce Pages Between Mobile and Desktop
Excluding Visualforce Pages from Mobile or Desktop
Creating Visualforce Pages That Work in Mobile and Desktop
Choosing an Architecture for Visualforce Pages in the Salesforce App
Standard Visualforce Pages
Mixed Visualforce and HTML
JavaScript Remoting and Static HTML
Optimizing the Performance of Visualforce Pages in the Salesforce App
Visualforce Components and Features to Avoid in the Salesforce App
Known Visualforce Mobile Issues
Considerations and Limitations for Using Visualforce in the Salesforce App
Prepare a Support Request for Problems with Visualforce Pages in the Salesforce App
Choosing an Effective Page Layout
User Input and Interaction
Managing Navigation
Introduction to the Salesforce Lightning Design System
Using Visualforce Pages as Custom Actions
Performance Tuning for Visualforce Pages
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service (Developer Preview)
Best Practices
Standard Component Reference
Appendices
Glossary
PDF

Newer Version Available

This content describes an older version of this product. View Latest

JavaScript Remoting and Static HTML

Combine JavaScript remoting and static HTML to offer the best user experience, with the best performance and user interface match to the Salesforce app. This architecture avoids most Visualforce tags in favor of rendering page elements in JavaScript. This option requires the most developer expertise, and can take a little longer to set up than standard Visualforce or mixed Visualforce and HTML. Use the Salesforce Mobile Packs for a fast start and to work with the very latest in mobile Web application technology.

Visualforce pages designed this way eschew many of the automatic, simplified features of standard Visualforce, in favor of taking more control over the request-response cycle, and performing page updates using JavaScript instead of page reloads. This can substantially improve the performance of the page, especially over the lower bandwidth, higher latency wireless network connections that make mobile devices so, well, mobile. The downside is that there is more code to write, and you need expertise in JavaScript, JavaScript remoting, HTML5, your mobile toolkit, and CSS, in addition to Apex and Visualforce. The upside of the downside is that you’re working with the latest, most advanced tools for mobile development, and the pages you can build are the best, most complete way to “snap in” custom functionality that fully integrates with the app.

You can build desktop Visualforce pages using this approach as well as pages for the Salesforce app. It’s even possible to share such pages between the two environments by customizing the styling, though it’s a challenge to closely match the full Salesforce site look and feel. Most importantly, the pages you design can be fully responsive, adapting and working across a range of devices and form factors.

Applying this Approach to Your Visualforce Pages

To use this approach for creating pages for the Salesforce app, follow this general process:

  1. Install your preferred Salesforce Mobile Pack (available on Salesforce) into your organization as a static resource.
  2. Set your page’s docType to html-5.0. Strongly consider disabling the standard stylesheets and header. For example:
  3. Add scripts and styles from your chosen mobile toolkit to the page using Visualforce resource tags. For example:
  4. Use HTML5 and your mobile toolkit’s tags and attributes to create a page skeleton.
  5. Add JavaScript functions to the page as handlers to respond to user interaction. Use JavaScript remoting to call Apex @RemoteAction methods that retrieve records, perform DML, and so on.
  6. Add additional JavaScript functions to handle user actions and page updates. Perform page updates by constructing HTML elements in JavaScript, and then adding or appending them to the page skeleton.

Example of a JavaScript Remoting and Static HTML Page

The following code sample shows a remoting + HTML Visualforce page that allows a user to edit a warehouse record. The edit feature is provided by a controller extension with @RemoteAction methods that respond to JavaScript remoting requests.
The static HTML provides the shell of the page, including empty form fields. JavaScript functions load the record, fill in the form fields, and send updated form data back to Salesforce.

Although this page can be used in the full Salesforce site, it’s designed as a Salesforce app page and looks very different than a normal Visualforce page.

Example of a JavaScript Remoting and Static HTML Controller

Unlike the other two approaches to creating mobile pages, the remoting + HTML approach doesn’t use standard controller functionality to retrieve data from and save data to Salesforce. Instead, you create a controller extension, or custom controller, to add any @RemoteAction methods your page requires. Here’s a simplified controller extension that supports the above page.