[SalesForce] How to build custom UI that works both for users that have opted in to Lightning Experience and users that have not

This isn't a question about the pros/cons of Lightning/Visualforce, but is a question about how to build custom UI for the period of time (a year or many years?) where some users/orgs have Lightning Experience turned on and other users/orgs don't.

Is the answer that you have to implement the custom UI twice, once in Lightning and once in Visualforce? Or is there a better approach?

(I am thinking particularly about managed packages that in principle should work in all sorts of orgs, but the problem also applies to once-off code in an org if only some users have Lightning Experience turned on.)

PS

The comment thread on the question below includes a link to Trailhead's Visualforce & Lightning Experience (Learn how to use Visualforce to customize your Lightning Experience) which looks like a good resource on how to get existing Visualforce to work in both classic and lightning environments. I'm getting the impression that building app UI that uses Lightning technology at all (client side MVC etc) will not be commercially rational (and there are certainly technical limitations too) for some time to come…

Best Answer

I just went through this exercise for a basic configuration page. Here is what I found out for a basic example:

  1. Liberal use of Javascript Remoting in place of submit elements (commandButton, commandLink, etc) along with calling actionfunctions in the handler to perform partial page refreshes

  2. Two VF Pages were required in order to show the page within Classic and inside LEX if you want the header or sidebar in classic:

     <apex:page showHeader="true" showSidebar="true">
     <apex:include page="LEXPAGENAME"/>
 </apex:page>

  3. You sill have to create your own JS to control the when and how to display elements like alerts / modals / etc. Some you can do with class names, other you have to use css. jQuery is helpful.

  4. I used a mix of mostly html tags with the occasional outputPanel with render attributes.

Doing it this way created a page that displayed and worked both inside of Classic and LEX as expected.

NOTE None of this used the Lightning Component framework and DID use the SLDS but it did "look" like lightning. If you are going to use Lightning Components you will have to do the lightning check and do double work to have it work in both UI's. Seems the interim is to make VF "Look" like lightning for now

Example of the same Wrapper page with embedded SLDS Page shown in both Classic then LEX

Classic enter image description here enter image description here enter image description here

LEX

enter image description here enter image description here enter image description here

For both UI's simply use the main wrapper page. In LEX it will strip off the header and sidebar automatically. So while you need a Wrapper page and a child page you only use the wrapper page in the tab..

Related Topic