Replace the window.location Method
The window.location variable is a JavaScript method used to redirect the browser to a new page. JavaScript code in a Visualforce page that sets window.location directly isn't compatible with Lightning Experience. That's the bad news. The good news is that sforce.one navigation methods do the same thing, and are compatible with Lightning Experience.
Required Editions
| Available in: Group, Professional, Enterprise, Performance, Unlimited, and Developer Editions |
| User Permissions Needed | |
|---|---|
| To create, edit, or delete Visualforce pages: | Customize Application |
Because window.location can be used in many ways, it’s not possible to address all of the possibilities. Let’s look at a case where window.location is used as a link to the edit page for an account. Then you can use this example, including the code samples, as a guide for addressing other occurrences of window.location in your pages. If you can determine what your window.location method is trying to do, chances are a sforce.one workaround exists.
-
Locate window.location in the Visualforce code.
- From Setup, enter Visualforce in the Quick Find box, then select Visualforce Pages.
- Click Edit next to the Visualforce page.
-
Search the Visualforce markup for the following:
window.location.
<apex:page standardController="Account" lightningStylesheets="true"> <apex:form > <apex:pageBlock > <apex:pageBlockSection title="Edit"> <apex:commandButton value="Edit" onclick="window.location='/{!Account.Id}/e'; return false;"/> </apex:pageBlockSection> </apex:pageBlock> </apex:form> <apex:detail /> </apex:page>
- Determine where window.location is redirecting to. You can figure this out by testing the Visualforce page in Salesforce Classic.
- Find the appropriate sforce.one method to replace window.location.
-
Replace all instances of window.location with sforce.one navigation.
<apex:page standardController="Account" lightningStylesheets="true"> <apex:form > <apex:pageBlock > <apex:pageBlockSection title="Edit"> <apex:commandButton value="Edit" onclick="sforce.one.editRecord('{!Account.Id}');"/> </apex:pageBlockSection> </apex:pageBlock> </apex:form> <apex:detail /> </apex:page> - Save your changes.
-
If your Visualforce page is going to be accessed in both Salesforce Classic and
Lightning Experience, make both options available. Use an if statement to branch the
code.
<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>
