Salesforce Winter’18 release came with lots of surprises to all of us. Before Winter’18 release, one of the biggest pain to switch to Lightning was – How to migrate existing VisualForce pages? We all tried to use the standard VisualForce component in our VisualForce pages as a best practice till date. The reason was Salesforce’s backward compatibility. We all knew that using standard VisualForce component is safe because even if Salesforce enhances those components, we don’t need to change our VisualForce pages.
But with the introduction of Lightning, things changed. People all over the world started investing in changing their existing VisualForce pages into Lightning and it is a not a very straightforward task.
Salesforce realized the problem and in Winter’18 release came as a savior to all of us. With very minimum changes now, we can keep our existing VisualForce pages and it will still work in Lightning experience. This feature is still in beta mode as there are so many things to improve. But it is really a good starting point and good to know. I am quite sure Salesforce will support more and more components in coming releases. It is definitely a game changer.
In this post, I will explain with an example what you need to do in your existing VisualForce page to make it work in both Lightning and Classic.
I have written this below VisualForce page containing PageBlock, CommandButton, InputText, PageBlockTable.
VisualForce Page: AutomaticStylingPage
Apex Controller: AutomaticStylingPageController
Now when I am rendering the same page in Salesforce Classic and Lightning, below is how it looks like –
Salesforce Classic:
Salesforce Lightning:
To make the same VisualForce page work in both Salesforce Classic and Salesforce Lightning, the only change we need to do in our existing VisualForce page is add lightningStylesheets=“true”
It is very simple and really a big win for Lightning Migration activity.
Note –
- This feature is in Beta as of Winter’18 release.
- This will only work with apex tags. So if your VisualForce page is having custom styling, this is not going to work now.