Friday 6 March 2020

Navigation from JavaScript through visualforce page in Classic and lightning experience

Hi,

When you want to navigate to other pages or record pages from Javascript via Visualforce pages in both Salesforce Classic and Lightning Experience then replace the window.location with the compatible options.

When your visualforce page is going to be accessible from both classic and lightning experience you have to write your navigation in Javascript as shown below.

Here :UITheme.getUITheme()  will be useful whether this page is accessed in lighting experience or not.

<apex:page standardController="Account" lightningStylesheets="true"> 
   <script>
     function isLightningExperience(){
        if (UITheme.getUITheme() === 'Theme4d' || UITheme.getUITheme() === 'Theme4u'){
            sforce.one.editRecord('{!Account.Id}');
        } else {
            window.location='/{!Account.Id}/e';
        }
    }
   </script>   
   <apex:form >   
     <apex:pageBlock >
       <apex:pageBlockSection title="Edit">
         <apex:commandButton value="Edit"
          onclick="javascript:isLightningExperience();return false;"/>
       </apex:pageBlockSection>
     </apex:pageBlock>
   </apex:form>   
   <apex:detail />     
</apex:page>


Reference:
https://help.salesforce.com/articleView?id=lex_prepare_vf_window.htm&type=5
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/salesforce1_dev_jsapi_sforce_one.htm
https://developer.salesforce.com/blogs/developer-relations/2016/09/why-its-time-to-break-up-with-javascript-buttons-and-embrace-lightning.html

1 comment:

  1. Quick! Book Your Spot for Wednesday[25th March, 11 AM(IST) | 4 PM(GST) | 11:00 AM(PDT)] WEBINAR on topic: Bulk Export Operations in Salesforce using BOFC App

    You'll learn
    How to Export Multiple Page-Layouts & Fields Presence Matrix, Export Multiple Objects & Rules, Process Builders & Flows, etc.

    ReplyDelete

How to include a screen flow in a Lightning Web Component

 Hi, Assume  you have a flow called "Quick Contact Creation" and API Name for the same is "Quick_Contact_Creation". To i...