If we are navigating within Salesforce, we want to make sure that it will work correctly - regardless of whether we are on mobile or desktop or in console or even console layouts.
LightningSafeNavigation.navigate is meant to be a function to send more than just I want to go someplace - but to behave safely and correctly in any context.
It can be leveraged in Lightning Components (LWC or Aura) or VisualForce pages or even in lightning out - safely.
window.location.href = '/apex/ltng_PostMessageResources?info=none';
This will not work, because lightning experience requires the lightning events.
So using this library we can do this instead:
LightningSafeNavigation.navigate('/apex/ltng_PostMessageResources?info=none');
<apex:includeScript value="{!URLFOR($Resource.ltng_PostMessageResources, 'js/navigation/LightningSafeNavigation.js')}" />
within javascript:
LightningSafeNavigation.navigate('{!$Page.MyPage}?Opportunity__c={!Opportunity.Opportunity_ID_Text__c}&retURL=/{!Opportunity.id}');
within visualforce:
<apex:commandButton value="Open Popup" onclick="LightningSafeNavigation.navigate('{!$Page.MyPage}?Opportunity__c={!Opportunity.Opportunity_ID_Text__c}&retURL=/{!Opportunity.id}');" rendered="{!showMoveNewButton}" reRender="formid" />
or with more info, like the tab name
<apex:commandButton value="Open Popup" onclick="LightningSafeNavigation.navigate({url:'{!$Page.MyPage}?Opportunity__c={!Opportunity.Opportunity_ID_Text__c}&retURL=/{!Opportunity.id}', label:'Quote'});" rendered="{!showMoveNewButton}" reRender="formid" />
This library has a number of fallbacks to use the best available context to navigate. Such as the lightning:workspaceAPI - for console navigation if available, sforce.one navigation if available, Lightning Navigation through $A if available, and others.
Can be referenced from within Visualforce by:
<apex:includeScript
value="{!URLFOR($Resource.ltng_PostMessageResources, 'js/navigation/LightningSafeNavigation.js')}"
/>
...
<apex:commandButton value="Test Navigation"
onclick="LightningSafeNavigation.navigate({url:'{!$Page.TestPage}?Opportunity__c={!Opportunity.Id}', label:'Quote'});"
/>
Or within a Lightning Component through:
<ltng:require scripts="{! join(',',
$Resource.ltng_PostMessageResources+'/js/navigation/LightningSafeNavigation.js'
)}"
afterScriptsLoaded='{!c.handleScriptsLoaded}'
/>
...
({
navigateSomewhere : function(component, helper) {
LightningSafeNavigation.navigate({ url:'...', label:'External System' });
}
})
Parameter | Type | Description | Example |
---|---|---|---|
navigationInfo | String address or Object is accepted | Either the address to navigate to or an object with the structure below | 'https://www.google.com' - assumes this is the object.url to go to, or {url:'https://www.google.com'} |
If the parameter is an object, these are the parameters expected
Property | Required | Type | Description | Example |
---|---|---|---|---|
url | true | String | The url to navigate to | '/apex/somePage' |
tab | false | string='redirect' | How to navigate, either to navigate as redirect|blank - new window|primary - new primary tab|secondary - new secondary tab | 'blank' |
name | false | string | the optional name of the tab - so it can be later found by name | 'opportunityQuote' |
label | false | string | the optional label of the tab | 'My Quotes' |
callback | false | function | the optional callback on completion. See various sforce.one / lightning event callbacks for examples | function(response){console.log('tab id:' + response.id + ' finally opened')} |
active | false | boolean=true | Whether the new tab should be active and the user navigates there, or false and the tab is created but not open. | |
id | false | string | The id to assign to the window/tab when opening (if available) | |
workspace | false | lightning:workspaceAPI instance | If using console navigation, pass the lightning:workspace along so it can be used during navigation. See here for more info: https://developer.salesforce.com/docs/component-library/bundle/lightning:workspaceAPI/documentation | component.find('workspace'); |
Hello this is amazing for navigation purpose. I have one query is it possible to navigate one LWC to another LWC using this js. currently I am doing this using Aura component but it opening in new browser tab but we need that in console tab.