Making Visualforce work in Lightning

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 migrate your org to Lightning. In case you were not able to get hands-on with those experts, this guide walks you through steps to migrate your existing org to Lightning. There are a lot of steps to migrate, so we focus on just one major area: Migrating Visualforce and Apex using the Lightning Experience Visualforce Report.

What is wrong with your Visualforce?

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 in general 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 report

The Visualforce Report is a hidden gem in the Lightning Experience Readiness Report. You access the report by running the Lightning Readiness Report like normal, and then receiving the report in your email. If you accidentally deleted that email, not to worry, all of your previously run reports can be found in the Files tab of your org.

Update your 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. I recently ran the report on an old org that’s still in classic to get some examples of errors that you can run into.

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?

This report is always changing and updating with each release. It’s recommended that you run the report at least once every release to make sure you’re up to date.

Rolling your own: A Node.js-based Visualforce Analyzer

The Visualforce portion of the Readiness Report was prototyped in Node.js before being converted to Java and rolled into the official product. While the Readiness Report should be the first step for any Lightning migration, some developers can find it useful to have a tool they can hack to their own true heart’s content. If that is your cup of tea, then head over to the repo for cloning. Running the current project sets up a simple website where you can log into your org and see something similar to the Readiness Report. However, any JSON file in the rules directory is picked up by the app and run against your Visualforce and related JavaScript. The rules files are basically setting up inclusions and exclusions for string matching, making it easy to find pages that do or don’t reference specific things.

Related Links:

Release notes describing the Visualforce Readiness Report:
https://releasenotes.docs.salesforce.com/en-us/winter18/release-notes/rn_vf_readiness_report.htm

Documentation: Kick Off the Lightning Experience Readiness Check:
https://help.salesforce.com/articleView?id=lex_readiness_check_kick_off.htm&type=0

Documentation: Review and Act on the Lightning Experience Readiness Report
https://help.salesforce.com/articleView?id=lex_readiness_check_report_rollout_strategy.htm&type=5

Lightning Components Developer Guide
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm

There is a Trailhead module for that:
https://trailhead.salesforce.com/en/modules/lex_dev_visualforce/units/lex_dev_visualforce_intro

And a Superbadge:
https://trailhead.salesforce.com/en/super_badges/superbadge_lex_rollout

Reference Link:

https://developer.salesforce.com/blogs/2018/01/making-visualforce-work-lightning.html