LET'S LEARN TOGETHER. THE BEAUTIFUL THING ABOUT LEARNING IS NOBODY CAN TAKE IT AWAY FROM YOU.

Winter 18 - Automatically Styling of Existing Visualforce Pages in Lightning Experience

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. 


Share:

Follow Me

Enter your email address:

Delivered by FeedBurner

Popular Posts

Labels

Salesforce (105) Apex (45) admin (27) visualforce (21) ADM (20) dev 501 (19) integration (18) learn salesforce (18) 501 (16) SOAP (13) lightning (12) tutorial (11) Certification. (9) javascript (9) Certification (7) Trigger (7) test class (7) unit testing (7) Advanced Admin (6) Sharing and Visibility (6) design pattern (6) developer (6) report (6) salesforce release (6) security (6) trailhead (6) Advanced Apex (5) Kitchener Developer Group (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) formula (5) mobile (5) service cloud (5) solution management (5) use case (5) JSON (4) Lightning Experience (4) Salesforce DX (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) Architect (3) Live Chat (3) Online Event (3) Opportunity (3) Performance (3) Products (3) REST (3) Role (3) Sales Cloud (3) Scratch Org (3) Study Notes. (3) Summer15 (3) Tips (3) Web Technology (3) dynamic apex (3) event (3) license (3) map (3) mapbox (3) singleton (3) version controlling (3) Asynchronous callout (2) Bulkify (2) Data Architecture and Management Certification (2) Devops (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) Kitchener User Group (2) Lightning Design System (2) Live Agent (2) Metadata (2) PD II (2) Price Book (2) SOSL (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) ant (2) automation tool (2) basic (2) chatter (2) coding (2) communication (2) console (2) controller (2) documentation (2) flow (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) release (2) salesforce1 (2) strategy (2) xml (2) Action Plan (1) Action Plan Template (1) Advanced Currency (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) Arrow (1) Asynchronous Apex (1) Aura Framework (1) Batch (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Celebration (1) Cheat Sheet (1) Classic (1) Community (1) Confetti (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) Custom Metadata (1) Custom Object (1) Customer (1) Dated Exchange Rate (1) Decorator Design Pattern (1) Dev Hub (1) Diwali (1) Email (1) FSC (1) Function (1) Future (1) Goals (1) Guide (1) Household (1) Ideas (1) Improvement (1) KPIs (1) Large Data Volume (1) LastModifiedDate (1) Lightning Web Component (1) Manage Currencies (1) Manual Sharing (1) Metrics (1) Multi Currency (1) New (1) New Feature (1) OOPS (1) OWD (1) Omni-Channel (1) Partner (1) Person Account (1) Photo (1) Pipeline (1) Platform Developer I (1) Platform Developer II (1) Presentation (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) Queueable (1) QuickReference (1) Reports (1) Retrieve (1) Role Hierarchy (1) SFDX (1) Salesforce Optimizer (1) Schedule (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Summer14 (1) Summer16 (1) Summer19 (1) Switch (1) SystemModStamp (1) User License (1) Users (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) actionFunction (1) actionPoller (1) actionRegion (1) actionSupport (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) configuration (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) dreamforce (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Total Subscribers

Total Pageviews