Friday, May 24, 2019

Lightning:navigation

Lightning:navigation is used to navigate to a given pageReference or to generate
a URL from a pageReference.To navigate we need to define a PageReference object.
The pageReference type generates a unique URL format and defines attributes that
apply to all pages of that type. Using v.pageReference we can capture the URL parameters.

Following are the supported type where we can navigate,


  • Lightning Component 
  • Knowledge Article
  • Named Page
  • Navigation Item Page
  • Object Page
  • Record Page
  • Record Relationship Page
  • Web Page

PageReference Object:


Pagereference is a javascript object that represent reference to a page, providing a well-defined
structure that describes the page type and its corresponding values.

The following PageReference properties are supported:

TYPE is a string which is required and is the API name of the PageDefinition.

Attributes is an object and is required. Values for each attribute specified by the PageDefinition.

State is an object  and is an additional parameter which we can called as a filter which is tied to the
query string of the URL in Lightning Experience and is used to display data from component where we are
navigating based on some filters: Ex: Navigating to account page we can use state as,

state: {

        filterName: "RecentlyViewedAccounts"

    }

or 

state: {

        filterName: "MyAccounts"

    }




Note: 


If we are navigating to component than the component where we are navigating must implement lightning:isUrlAddressable interface.





To Navigate to component sample syntax used is as below:



    "type": "standard__component",

    "attributes": {

        "componentName": "c__MyLightningComponent" 

    }, 

    "state": {

        "myAttr": "attrValue" 

    }

}




To Navigate to object page we need to use type as:

standard__objectPage


To Navigate to record page we need to use type as:

standard__recordPage

To navigate to a web Page:

standard__webPage


Now let see a simple example to navigate from account record page to account list view:

NavComp.cmp

  <aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
 
    <lightning:navigation aura:id="navService"/>
    <lightning:button name="Test" label="Navigate to Account list view" onclick="{!c.navigate}"/>
 

</aura:component>

NavCompcontroller.js

({
    navigate : function(component, event, helper) {
         var navService = component.find("navService");
     
        var pageReference = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: "MyAccounts"
            }
        };
        navService.navigate(pageReference);
    }
})




Now, Let us see another example:



The following example generates a URL to an Account Object home based on its pageReference and sets the URL on an <a> element. In your client-side controller, set the pageReference attribute for the Account home page. Set the URL on your link using the generateUrl() method, which is useful for opening links in a new tab.

LightningNavi.cmp

<aura:component implements="flexipage:availableForRecordHome,flexipage:availableForAllPageTypes">
    <aura:attribute name="url" type="String"/>
    <aura:attribute name="pageReference" type="Object"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:navigation aura:id="navService"/>
    <a href="{!v.url}">Link</a>
</aura:component>

LightningNaviController.cmp


({
    init : function(cmp, event, helper) {
        var navService = cmp.find("navService");
        // Sets the route to /lightning/o/Account/home
        var pageReference = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'home'
            }
        };
        cmp.set("v.pageReference", pageReference);
        // Set the URL on the link or use the default if there's an error
        var defaultUrl = "#";
        navService.generateUrl(pageReference)
            .then($A.getCallback(function(url) {
                cmp.set("v.url", url ? url : defaultUrl);
            }), $A.getCallback(function(error) {
                cmp.set("v.url", defaultUrl);
            }));
    }

})


No comments:

Post a Comment