Navigation Service in Lightning Aura
Salesforce provides a powerful navigation service in Lightning Aura components that enables developers to navigate between different web pages, record pages and applications. Use lightning:navigation component to navigate given pageReference generated by lightning:pageReferenceUtils.
pageReference Object
The pageReference object in navigation service defines a navigation target.
pageReference Object Structure
var pageRef = {
type: "standard__objectPage",
attributes: {
objectApiName: "Account",
actionName: "new"
},
state: {
}
}
pageReference Object Properties
- type: It is a mandatory property which specify the navigation type, possible values are
standard__objectPage,standard__webPage,standard__navItemPageetc. - attributes: It is a mandatory property of type object which contains key-value pair for example,
objectApiName: "Account" - state: It is an optional property of type object. It is used to pass query parameters.
Navigation Service: Navigate to Record Create Page
This example uses lightning modal to display input fields which will capture user input and on click of save it will redirect to Account record create page.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
<aura:attribute name="openModal" type="Boolean" default="false"/>
<aura:attribute name="accountName" type="String" default=""/>
<aura:attribute name="accountPhone" type="String" default=""/>
<aura:attribute name="accountDescription" type="String" default=""/>
<lightning:pageReferenceUtils aura:id="pageRefUtils"/>
<lightning:navigation aura:id="navService"/>
<lightning:card title="Create New Account">
<aura:set attribute="actions">
<lightning:button label="New" variant="Brand" iconName="utility:add" onclick="{!c.openModal}"/>
</aura:set>
</lightning:card>
<aura:if isTrue="{!v.openModal}">
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<div class="slds-modal__header">
<lightning:buttonIcon iconName="utility:close"
onclick="{!c.closeModal}"
alternativeText="close"
variant="bare-inverse"
class="slds-modal__close"/>
<h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate" tabindex="-1">New Account</h1>
</div>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_4-of-12">
<lightning:input aura:id="account" label="Account Name" type="text" value="{!v.accountName}" required="true"/>
</div>
<div class="slds-col slds-size_4-of-12">
<lightning:input aura:id="account" label="Phone" type="tel" required="true" value="{!v.accountPhone}" maxlength="10"/>
</div>
<div class="slds-col slds-size_4-of-12">
<lightning:input aura:id="account" label="Description" type="text" required="true" value="{!v.accountDescription}"/>
</div>
</div>
</div>
<div class="slds-modal__footer">
<lightning:button label="Save" variant="Brand" iconName="utility:save" onclick="{!c.save}"/>
<lightning:button label="Cancel" variant="Neutral" iconName="utility:close" onclick="{!c.closeModal}"/>
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
</aura:if>
</aura:component>
In aura component controller, create pageReference object and assign values to its properties. Then, create a fieldValues object and assign values entered in input fields in following format fieldApiName : value . Encode the fieldValues using encodeDefaultFieldValues(fieldValues) function from lightning:pageReferenceUtils
({
openModal : function(component, event, helper) {
component.set("v.openModal",true);
},
closeModal : function(component, event, helper){
component.set("v.openModal",false);
},
save : function(component, event, helper){
debugger;
var allValid = component.find('account').reduce(function (validSoFar, inputCmp) {
inputCmp.reportValidity();
return validSoFar && inputCmp.checkValidity();
}, true);
if(allValid){
var navService = component.find("navService");
var page = {
type: "standard__objectPage",
attributes: {
objectApiName: "Account",
actionName: "new"
},
state: {
}
}
var fieldValues = {
Name: component.get("v.accountName"),
Phone: component.get("v.accountPhone"),
Description: component.get("v.accountDescription")
};
page.state.defaultFieldValues = component.find("pageRefUtils").encodeDefaultFieldValues(fieldValues);
event.preventDefault();
navService.navigate(page);
}
}
})
Navigation Service: Navigate to Record Detail Page
To navigate to record detail page set type property of pagereference object to standard__recordPage.
pageReference object to navigate to record detail page
var pageRef = {
type: "standard__recordPage",
attributes: {
recordId: "001XXXXXXXXXXXXXXX",
actionName: "view"
}
}
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
<aura:attribute name="url" type="String" default=""/>
<lightning:navigation aura:id="navService"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="slds-p-around_medium">
<a href="{!v.url}">Account Record</a>
</div>
</aura:component>
In client-side controller, use generateUrl(page) method from lightning:navigation which create record detail page URL dynamically from given pageReference object.
({
doInit : function(component, event, helper){
var navService = component.find("navService");
var page = {
type: "standard__recordPage",
attributes: {
recordId: "001dM00000DMHsWQAX",
actionName: "view"
}
}
navService.generateUrl(page).then($A.getCallback(function(result) {
component.set("v.url",result);
}));
},
})
Please note for demonstration purpose recordId is hardcoded, it is not advisable to hardcode recordId
Using navigation service in lightning aura components helps to improve user experience by seamlessly transitioning between web pages, record pages etc.
