Sharing Salesforce Visualforce Pages Between Classic & Lightning Experience

How to Share Salesforce Visualforce Pages Between Classic and Lightning Experience?

Visualforce pages should be created correctly such that they behave properly whether they run in Salesforce Classic or Lightning Experience.

Detecting and Responding to the User Experience Context in Visualforce Markup

The current user-experience context can be determined by using the global variables $User.UITheme and $User.UIThemeDisplayed.These global merge fields identify the Salesforce look and feel a user sees on a given Web page.These global variables return a string that uniquely identifies the current user interface context

The variables can be used to make your pages adaptable to Lightning Experience, Salesforce Classic, and the Salesforce app.

There is a little difference between these two variables.

The $User.UITheme returns the look and feel supposed to be displayed to the user, while $User.UIThemeDisplayed returns the actual look and feel as displayed to the user.
For example, $User.UITheme returns the Lightning Experience look and feel, but the user is using a browser that doesn’t support that look and feel, for example, older versions of Internet Explorer, $User.UIThemeDisplayed returns a different value.

These Variables help you identify the CSS that helps to render Salesforce web pages to a user.

Both variables return one of the following values.

  • Theme1 —Obsolete Salesforce theme
  • Theme2 — Salesforce Classic 2005 user interface theme
  • Theme3 — Salesforce Classic 2010 user interface theme
  • Theme4d — Modern “Lightning Experience” Salesforce theme
  • Theme4t — Salesforce mobile app theme
  • Theme4u — Lightning Console theme
  • PortalDefault — Salesforce Customer Portal theme
  • Webstore — Salesforce AppExchange theme

Share Salesforce Visualforce Pages

Share Salesforce Visualforce Pages Between Classic and Lightning Experience

Above are the screenshots o the same page in Lightning and Classic Enviornment.Here we have used the $User.UITheme to identify the user experience context and we are identifying the css accordingly to render salesforce page to the user

We can also used javascript to find the current user context.Here is the snippet of code that helps you finding the user Experience context

<script>

var j$ = $.noConflict();

j$( document ).ready(function() {

console.log( “ready!11” );

var parentPageUrl      = document.referrer;

//alert(parentPageUrl);

if(parentPageUrl.indexOf(“.lightning.force.com”) > 0){

j$(“body”).addClass(‘main-sec-lightning’);

}

else{

j$(“body”).addClass(‘main-sec-classic’);

}

})

</script>

0 Comments

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2020 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?