Making Visualforce work in Lightning

image

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


image

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.


image

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.

The project is completely unofficial and provided without support.

Heather Dykstra
Developer Evangelist, Salesforce
@SlytherinChika

Josh Birk
Developer Evangelist, Salesforce
@joshbirk

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 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

Also found at : Making Visualforce work in Lightning

Post author

Dustin Gurley is an Designer, Developer, Artist, Instructor, Critical Theorist and Systems Engineer. He has an extensive background working professionally with 2D/2.5D/3D Motion Graphics, Compositing, Film, Video, Photography and client-side performance techniques as it pertains to web development. Dustin recently completed work on his Master of Fine Art degree in Motion Media Design (Motion Graphics) from the Savannah College of Art and Design. Prior to beginning his graduate work, Dustin obtained a Bachelor of Art degree in Communication Studies with a concentration in Broadcast and Emerging Media from the University of North Carolina at Wilmington. In addition to design and modeling, Dustin enjoys toying with his view camera, working with scratch film, authoring media related material and contributing to various industry conferences. When not in front of a computer, Dustin can be found with his wife, Regina Everett Gurley. The couple enjoys dividing their time between their home just outside of Raleigh, North Carolina and the beautiful North Carolina coast. Currently, Dustin serves as the Lead Instructor of Internet Technologies for Wake Technical Community College in Raleigh, North Carolina.