Start tracking your progress
Trailhead Home
Trailhead Home

Get Started with Visualforce in the Salesforce App

Lightning bolt icon used to indicate that the content is for Lightning Experience

Attention, Trailblazer!

Salesforce has two different desktop user interfaces: Lightning Experience and Salesforce Classic. This module is designed for Lightning Experience.

You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe three places where Visualforce pages can be used in the Salesforce app.
  • Describe when it makes sense to build Salesforce apps with Visualforce.
  • List at least three declarative tools you can use instead of creating mobile customizations with code.
  • List at least three reasons to develop mobile apps in the Salesforce app instead of using the Mobile SDK.

Get Started with Visualforce in the Salesforce App

You can use Visualforce pages to extend Salesforce and provide mobile users with the functionality and the user experience they need.

The Salesforce app lets you stay connected and get things done wherever you are. Visualforce helps you create functional—and beautiful—mobile interfaces customized to fit your needs. If you’ve already been developing in Visualforce for desktop, you can apply the same skills to mobile development. Your users can take the functionality you provide with them, finding leads, closing deals, and more from their phones.

The Salesforce app provides a lot of functionality built right into the mobile application. Often, you can extend the Salesforce app for your organization’s needs without writing a single line of code. But when you want to build more customized applications, you can do it with Visualforce.

Lightning Experience vs. Salesforce Classic

Lightning Experience is Salesforce’s new user interface that’s as intuitive as it is beautiful. Inspired by the best parts of our mobile experience, Lightning Experience helps your sales reps work more naturally and perform better. It’s also fast and customizable, keeping productivity high for your teams. Salesforce Classic refers to the user experience immediately preceding Lightning Experience. Salesforce Classic is still around and as useable as ever.

The Salesforce app and Lightning Experience are built on the same Lightning platform. They are visually similar and follow the same style guidelines, making them good partners. In this module, we use Lightning Experience for demos and steps on your desktop. But don’t worry if your company still uses Salesforce Classic! Some sections in Setup have new names and the output sometimes looks a bit different, but you can follow along no problem.

For the most part, your Visualforce code works the same in Lightning Experience and Salesforce Classic. There are a few things in the code that you’ll want to adjust, and a few things that no longer work in Lightning Experience. We won’t get too sidetracked with the details here.
Note

Note

For a high level summary, read about using Visualforce in Lightning Experience in the Lightning Experience Development module. Then, if you need more, check out the Visualforce & Lightning Experience module for all of the glorious details.

Where Visualforce Pages Can Appear in the Salesforce App

When you create a Visualforce page, you can make it available from a number of places in the user interface.
  • Navigation menu—available when you tap Salesforce App Nav from the mobile app
    Find warehouses navigation menu
  • Action bar and action menu—available from the bottom of any page that supports actions
    Create Quick Order action in the action menu
  • Record related information page (as a mobile card)—available when you navigate to a record
    Mobile card in Salesforce app

When to Use Declarative vs. Programmatic Tools to Create Salesforce Apps

When developing functionality for your Salesforce mobile users, you can use declarative features (clicks) or programmatic tools (code). Here are some points to consider before you start coding.
Salesforce features built with declarative tools:
  • Are usually faster and cheaper to build.
  • Generally require less maintenance.
  • Receive automatic upgrades when the tools are improved.
  • Aren’t subject to governor limits.
Common declarative tools you can use in your Salesforce apps include:
  • Quick Actions
  • Page layout customization
  • Formula fields and roll-up summary fields
  • Validation rules
  • Workflows and approval processes
  • Custom fields and objects
We know it’s tempting to jump straight into coding. But just because you can doesn’t always mean you should. Before you commit to developing a new feature using programmatic tools such as Visualforce, consider whether you can implement your feature with declarative tools instead.
Of course, some apps can’t be built with declarative tools. Programmatic tools are often required for features that:
  • Support specialized or complex business processes.
  • Provide highly customized user interfaces or customized click-through paths.
  • Connect to or integrate with third-party systems.
So which tool do you choose? There’s no hard-and-fast rule for when to choose clicks over code. When choosing, consider the problems you’re trying to solve and resources available to solve them.

When to Use the Salesforce Platform vs. Creating Custom Apps

When it comes to developing functionality for your Salesforce mobile users, you have options. Here are some differences between extending the Salesforce app and creating custom apps using the Mobile SDK or other tools.

Salesforce Platform

  • Defined user interface.
  • Full access to Salesforce data.
  • Possible integrated experience in the Salesforce app.
  • Inclusion of your own apps and functionality with quick actions.
  • Customized with point-and-click or programmatic tools.
  • Programmatic functionality through Visualforce pages, Canvas apps, and the Lightning Component framework.
  • Defined navigation points, since customizations or apps adhere to the navigation menu. For example, a Visualforce page can be called from the navigation menu or from a custom action in the action bar.
  • Enables you to leverage existing Salesforce development experience, both point-and-click and programmatic.
  • Included in all Salesforce editions and supported by Salesforce.

Custom Apps

Custom apps can be either free-standing apps you create with Salesforce Mobile SDK or browser apps using plain HTML5, CSS, and your choice of mobile-friendly JavaScript frameworks. With custom apps, you can have:
  • A custom user experience.
  • Access to Salesforce data using REST APIs in native and hybrid local apps, or with Visualforce in hybrid apps using JavaScript Remoting. In HTML5 apps, do the same using standard JavaScript APIs.
  • A branded user interface, including a custom app icon, for increased exposure in customer-facing apps.
  • Standalone mobile app, either with native APIs using Java for Android or Objective-C for iOS, or through a hybrid container using JavaScript and HTML5 (Mobile SDK only).
  • App distribution through mobile industry channels, such as the Apple App Store or Google Play (Mobile SDK only).
  • Control of complex offline behavior (Mobile SDK only).
  • Push notifications (available for Mobile SDK native apps only).
  • A custom security container using your own OAuth module (Mobile SDK only).
Other important Mobile SDK considerations:
  • Access to open-source SDK, downloadable for free through npm installers and GitHub. No licensing required.
  • Requires you to develop and compile your apps in an external development environment (Xcode for iOS, Eclipse or similar for Android).

There’s no right or wrong answer when choosing between the Salesforce platform and the Mobile SDK. Base your choice on which features are most important for your app.

Salesforce Platform Development Process

The processes used for developing in Lightning Experience and the Salesforce app are the same. If you’re used to developing for Salesforce Classic, the development process for Lightning Experience has a few differences, but much of it will be familiar to you.

The Developer Console, the Force.com IDE, and the Setup editor all work in the Salesforce app, Lightning Experience, and Salesforce Classic. The Visualforce Development Mode footer is only available in Salesforce Classic.

The main difference between developing in Lightning Experience and the Salesforce app is how you view and test your pages during development.

In Salesforce Classic, you can view your page using the https://yourInstance.salesforce.com/apex/PageName URL pattern. This doesn’t work in Lightning Experience, because pages you view using direct URL access always display in Salesforce Classic. To view your page in Lightning Experience, access the Lightning Experience container app with /lightning.

The simplest way to get to a specific Visualforce page is to create a tab for it, and then navigate to that tab via the All Items section in the App Launcher. For a more long-term approach, create an “In Development” app, and add and remove your Visualforce tabs to it as you work.
Note

Note

See the Develop Visualforce Pages for Lightning Experience unit in the Visualforce & Lightning Experience module for more information on creating an “In Development” app.

It’s important to test your Visualforce pages before deploying them in production. Test your pages across different environments, devices, and users. For instance, we don’t recommend developing for the Salesforce app exclusively on your desktop or laptop and testing your pages by navigating to the /lightning URL. The Salesforce app and Lightning Experience share the /lightning container depending on the device that connects to it. While you can fool /lightning by changing your browser’s user agent, this can lead to bugs down the line—desktop and mobile browsers can behave very differently.

Running the Salesforce app in an emulator isn’t supported for normal use. We understand that device emulators are convenient. But they aren’t a substitute for full testing of your custom apps and pages on your organization’s supported mobile devices. During development, regularly test your app on every device and platform on which you intend to deploy.

To test code we write in this module on your mobile device, use your Trailhead playground’s username and password to log in to the Salesforce app. To find your Trailhead login info, see this article. You can download and install Salesforce from Google Play or the App Store.

Note

Note

We can’t go into all the details about the Visualforce development process for Lightning Experience and the Salesforce app here. For more info on the development process and best practices, we encourage you to look at this unit’s resources.

retargeting