SalesforceSummaries: a series delivering key insights from Salesforce YouTube videos, to save you time as you keep up to date with the latest technological changes within the Salesforce ecosystem.
Introduction:
With the release of Salesforce Lightning back in Winter ’16, it has become increasingly important to be aware of the latest pros and cons of adopting either Lightning (Salesforce Lightning) or continuing to use Visualforce (Salesforce Classic).
This article summarises the excellent ‘ Migrating Visualforce Pages to Lightning‘ video by Salesforce Principal Developer Evangelist, Greg Rewis; which goes into detail on how one can migrate from Salesforce Classic to Lightning, how one can leverage Visualforce within Lightning and also how one can leverage Lightning within Salesforce Classic.
Details:
Video: ‘ Migrating Visualforce Pages to Lightning‘
Presenter: Greg Rewis
Date: June 1st 2017
Time: 54 minutes
Key terms: Visualforce, Lightning Experience, Salesforce Lightning Design System
Key points:
- Although Visualforce is still supported, Salesforce are focusing and will continue to focus primarily on Salesforce Lightning because this is new technology, it is more secure (less risk of JavaScript injection attacks) and it has a more contemporary and engaging UI and UX.
- A Salesforce Developer has a lot of freedom to migrate most Visualforce pages and components to Lightning Experience by adopting conditional logic and the Salesforce Lightning Design System.
Summary:
-
- @1.40 — Visualforce will still be supported for the long term.
- @1.50 — However, Lightning is the technology of today and the future at Salesforce.
- @2.00 — All the new features and functionality and great ideas that Salesforce are coming up with are going in Lightning.
- @4.10 — Some functionality simply doesn’t work when migrating Visualforce Pages to Lightning.
- @4.20 — For example, JavaScript buttons won’t work in Lightning due to the security challenges with combing untrusted JavaScript from multiple sources with the application source code.
- @4.35 — Refer to the ‘ Lightning Alternatives to JavaScript buttons‘ trailhead badge to assist you with understanding what functionality you will have to replace before migrating to Lightning.
- @6.25 — Despite JavaScript buttons and custom URLs not being permitted the same in Lightning as in Visualforce, for the most part, using Visualforce in Lightning Experience mostly ‘just works’.
- @6.50 — For example, you can use Visualforce pages in Lightning Experience to override a standard button or link.
- @7.25 — You can also use Visualforce tabs in Lightning Experience, Visualforce pages embedded in a page layout, use Visualforce in global actions and even Visualforce components in the Lightning App builder.
- @7.55 — You can use Lightning Components inside of Visualforce too, using Lightning Out.
- @8.15– Lightning Out allows you to use a Lightning Component inside any external web application outside a Salesforce org.
- @8.50 — The Dreamhouse app has been built by the Salesforce team to show all the things one can do with Salesforce Lightning.
- @12.20 — It’s a process to migrate all Visualforce pages to Lightning Experience. It’s OK to migrate page by page.
- @14.00 — The HTML influences the structure of a page (model). CSS influences the styling of a page (view).
- @16.00 — Lightning has its own look and feel. A Lightning table and a Visualforce table with the same HTML, as per the demo, look completely different because of the styles that are applied to the page.
- @16.45 — You can use the Salesforce Lightning Design System (SLDS)to apply the Lightning style to pages.
- @18.00 — Prior to Spring ’17, to migrate a Visualforce page to a Lightning page, you would have had to have generated a custom version of the Salesforce Lightning Design System (SLDS), download it and then re-upload it as a static resource in Salesforce.
- @20.20 — However, since Spring ’17 release, you can simply use the <apex:slds> tag in your Visualforce page followed by a <div class=”slds-scope”> , which is best practice because this is dynamic (if the SLDS design changes, the changes will automatically be made in your Visualforce page).
- @25.00 — To change the style of a button in a Visualforce page to match the Lightning Experience, you can use the SLDS site, navigate to ‘ Buttons’ and refer to the ‘Developer Guidelines’ section for a particular type of button. You can copy and paste that attribute into the <apex:commandButton> tag such that the Visualforce markup is now: <apex:commandButton value=”New” styleClass=”slds-button slds-button — neutral”/>.
- @28.30 — CSS stands for cascading style sheets but for Lightning Experience, you could say that the ‘C’ stands for ‘collision’. This is because some styles can come from Lightning but some other styles can from Classic, and can merge on the page. We don’t want this to happen.
- @29.55 –To control this, you can add code to an Apex controller which returns a Boolean determining if the current logged in user viewing a page is using Classic or Lightning.
- @31.40 — You can reference the Apex method from the controller in an outputPanel tag like this: <apex:outputPanel rendered=”{!isClassic}”> to display either a Classic or Lightning experience to different users.
- @40.40 — For a Visualforce page to be available in Lightning Experience, select the ‘Available for Salesforce mobile apps and Lightning Pages’ checkbox.
- @46.00 — Not only can we use Visualforce in Lightning Experience, we can also use Lightning in Salesforce Classic. This can be done using the <apex:includeLightning /> tag in a Visualforce page.
- @51.00 — You can use conditional logic in a Visualforce page to handle events correctly depending on whether the logged in user is using Classic (theme3) or Lightning (theme4).
- @52.00 — You can earn the ‘ Quick Start: Lightning Components‘ badge to learn much about how migrating from Classic to Lightning.
- @53.30 — This TrailheadDX link has some great content on Lightning Experience too.