Making Your Visualforce Compatible with Lightning Experience

At Dreamforce 2017, we told you a lot about what you can do with Einstein, IoT, and Lightning. And many of you have gone through the awesome Lightning Consultations to learn how to transition your org to Lightning Experience. In case you were not able to get hands-on with those experts, this blog walks you through steps to update your existing Visualforce pages to run in Lightning Experience.

What needs to change so your Visualforce code runs in Lightning Experience?

The goal of the Visualforce Report is to highlight key things in your Visualforce pages that either aren’t supported in Lightning Experience or can break things for the user. There are common things Visualforce developers have done in the past that may not work once Visualforce is being displayed within a page rendered by Lightning components. These include things like iframes, directly linking to pages using record IDs, and usage of the sforce.one library.

Running the Lightning Experience Visualforce Report

The Visualforce Report is a hidden gem in the Lightning Experience Readiness Report. You access the report by running the Lightning Readiness Report. To run the Lightning Experience Readiness Report first go to the Setup menu and go through the Lightning Experience Migration Assistant. Click the Check Readiness tab, and then click Check Readiness. Then, Click Allow, Sales Cloud, Check Readiness, and close the window. You will receive 2 emails, the second one will contain the VisualForce Readiness report. If you accidentally deleted that email, don’t worry. All of your previously run reports can be found in the Files tab of your org.

Updating Your Visualforce Code

The report provides you with lots of information on the first few pages. The report is constantly evolving, so it’s always good to read the whole thing, even if it’s your 10,000th run of the report. Keep in mind that the report evaluates only pages that have been accessed in the past 90 days. It only provides information about what is commonly used. If you have a page that’s only run during a specific time of year, it can have issues and not display it in the report. Here are the two of the most common problems you will find when transitioning your Visualforce pages to Lightning Experience.

Error 1 – showHeader

You can see here that the report is pretty self-explanatory, this particular Visualforce page needs just a bit of editing. We have a few options. We can leave the page as is, and when you’re in Lightning Experience you can still see the header, but in Classic the page behaves as expected. Your other option is to look at a wider use case and determine if showHeader needs to be false, and just remove it from your Visualforce page. With just that bit of quick thought, you can now move on; your page is ready for Lightning Experience.

Error 2 – window.

This issue is a bit trickier. Instead of using window., you can potentially replace the functionality with something from the Lightning Components Developer Guide. Often, we use window. to let us navigate, so a potential option is to use force:navigateToURL instead. Your solution is dependent on your problem, so be sure to test and don’t be afraid to do a greater refactor.

What comes next?

Run the Readiness Report again! We are constantly updating and improving the readiness check to make your migration as seamless and successful as possible. It’s recommended that you run the report at least once every release to make sure you’re up to date. Also, check out our Trailhead Module “Visualforce & Lightning Experience” for even more tips and tricks!

Heather Dykstra
Developer Evangelist, Salesforce
@SlytherinChika

Josh Birk
Developer Evangelist, Salesforce
@joshbirk