Use Visualforce in Lightning Experience
- List at least five Visualforce features that work unchanged in Lightning Experience.
- Describe at least two Visualforce features you need to review in your Visualforce code.
- List at least two Visualforce features that don’t work in Lightning Experience.
- Describe how the Lightning Experience affects the visual design of existing Visualforce pages.
Visualforce and Lightning Experience
The technical details of how Lightning Experience is built and how it runs Visualforce apps are really cool, and important for actual development work. When you’re ready for those details, the Visualforce & Lightning Experience module will show you the way. But here we’re going to stay at a high level, and divide things up into what works and what doesn’t, what you’ll want to update, and other issues that will help you plan your Lightning Experience migration development effort.
Second, Visualforce markup remains the same. There are a few tags and attributes that behave differently in Lightning Experience, and a very few that we recommend against using or that just don’t work. But otherwise the way you write code for Visualforce pages and components is unchanged.
Third, most of the ways you can use Visualforce to customize your organization work just fine in Lightning Experience—though as you can no doubt imagine, with an all new user interface, these customizations have moved to different places.
- Creating custom tabs and apps with Visualforce pages.
- Creating custom buttons and links that lead to Visualforce pages.
- Creating custom actions that open with a Visualforce page.
- Overriding standard actions with Visualforce pages (with one exception that we’ll get to later).
- Creating flows that use Visualforce pages.
- Packaging Visualforce pages and components.
There are other features, such as Visualforce email templates, that use Visualforce code behind the scenes. These aren’t surfaced in the user interface directly, and so they remain unchanged.
What Works, but Needs Updating and Testing
Similarly, code that assumes that it has access to the entire environment is in for a rude surprise. It still has access to the Visualforce part of the document, but not the full Lightning Experience app. That will be fine for many apps, but for those that want to be totally in charge, there’s going to be some work for you to do.
If your pages use iframes themselves, either with
<apex:iframe> or static HTML, being embedded into another iframe could cause some issues. In many cases “turtles all the way down” is fine. Just make sure you do extra testing here.
If your pages embed a Canvas app, and especially if you’ve used the Canvas APIs to integrate the app into Salesforce, allocate time for thorough testing as well. Canvas apps use an iframe, and while correctly behaving code should just work, we all know how common perfect code is in the real world.
All of the above sounds both vague and hard to do but, in truth, the amount of code you’re likely to need to change is small. And again, the details for developers are available in the Visualforce & Lightning Experience module.
What Doesn’t Work
Perhaps the most significant change, in terms of things that might be hard to work around, Visualforce overrides of standard actions are slightly different in Lightning Experience compared to Salesforce Classic. Any override for the object list action won’t be accessible in Lightning Experience.
- Object tab
- Object list
- Record view
- Record edit
- Record create
- Record delete
Regardless of the user interface settings in your organization, both object tab and object list are available to be overridden in Setup. Overriding the object tab action overrides the object home page in Lightning Experience, as expected.
However, when in Lightning Experience, the object list action isn’t accessible in the user interface, so there’s no way to fire it. If your organization has overridden the object list action for any object, that functionality won’t be available when users are using Lightning Experience. If there are essential features in that override, you’ll need to find another way to make them available.
On a bit smaller scale, the
sidebar attributes of
<apex:page> have no effect on Visualforce pages when displayed in Lightning Experience. The standard Salesforce Classic header and sidebar are always suppressed, and there isn’t a way to suppress the Lightning Experience header
A number of related lists available in Salesforce Classic aren’t supported in Lightning Experience. The
<apex:relatedList> component isn’t a way around this limitation. Good try, though!
And, coming down to the really minor issues, rendering Visualforce pages as PDFs works exactly as in Salesforce Classic, without any of the Lightning Experience visual design. This is probably what you want anyway, but if you wanted to render pages into PDFs that include the Lightning Experience design, that’s not possible today.
That Look-and-Feel Thing
The short answer is, with the exception of suppressing the Salesforce Classic header and sidebar, and of being framed by the Lightning Experience user interface, Visualforce pages display unchanged in Lightning Experience.
Specifically, the HTML that’s rendered by the built-in Visualforce components doesn’t change when the page displays in Lightning Experience, and the Salesforce Classic stylesheets those components use is, by default, loaded by the page. The
effect is that pages that use
<apex:pageBlock> components, and other coarse- and fine-grained components that match the Salesforce Classic visual design, still match that visual design. You get a little slice of Salesforce Classic in the middle of your Lightning
If, however, you’ve used Visualforce components that are relatively unstyled, or your own components and markup, and developed your own stylesheets instead of using the default Salesforce styles, your pages also appear unchanged, retaining the styling you worked so hard to develop.
In other words, in Visualforce for Lightning Experience we’ve favored stability in the visual design of existing pages, instead of trying to adapt them dynamically to Lightning Experience.
That said, if you’re as excited about the new visual design as we are, there are ways for you to adopt that styling to a lesser or greater degree, depending on how much work you want to put in. We won’t cover it here, but there’s a whole unit, Understanding Important Visual Design Considerations, that shows the range of possibilities and the techniques to use to achieve them.