Usage Of Lightning Navigation Event

On May 29, 2018 By Rajamohan VakatiIn lightning

In this blog, I am going to show how to use the different salesforce lightning navigation events. Use one of the navigation events for consistent behavior across Lightning Experience, Salesforce app, and Lightning communities.

force:navigateToComponent

You can use this system event to Navigates from one Lightning component to another. To navigate from a Lightning component to another, specify the component name using componentDef. This example navigates to a component c:hello and sets a value on the welcome and message attributes.

hello.cmp

<aura:component >
    <aura:attribute name ="welcome" type="String" default="welcome"/>
    <aura:attribute name ="message" type="String" default="message"/>
    Result -{!v.welcome} -{!v.message}   
</aura:component>

Here is the sample button which navigates to the lightning component on click.

    <lightning:button variant="success" label="Go to Component " title="Go to Component " onclick="{! c.navigateToMyComponent }"/>

Here is the controller action.

 navigateToMyComponent : function(component, event, helper) {
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef : "c:hello",
            componentAttributes: {
                welcome : "welcome" , 
                message :"message"
            }
        });
        evt.fire();
    }

The below code get the System event force:navigateToComponent

 var evt = $A.get("e.force:navigateToComponent");

2. Set the parameters like componentDef ,componentAttributes ,isredirect as shown below

 evt.setParams({
            componentDef : "c:hello",
            componentAttributes: {
                welcome : "welcome" , 
                message :"message"
            }
        });

3. fire the event

        evt.fire();

force:navigateToList

Use this event to Navigates to the list view specified by listViewId.To navigate to a list view, set the list view ID on the listViewId attribute and fire the event. This example displays the All Opportunities list views for Opportunity on the click of the button.

        <lightning:button variant="success" label="Go to List View " title="Go to List View " onclick="{! c.gotoList }"/>

Here is the controller code

 gotoList : function (component, event, helper) {
        
        var navEvent = $A.get("e.force:navigateToList");
        navEvent.setParams({
            "listViewId": "00B6A0000059kAqUAI",
            "listViewName": null,
            "scope": "Opportunity"
        });
        navEvent.fire();
        
        
    }

force:navigateToObjectHome

Use this event to Navigates to the object home specified by the scope attribute. To navigate to an object home, set the object name on the scope attribute and fire the event. This example displays the home page for an Account object

    <lightning:button variant="success" label="Account Home" title="Account Home" onclick="{! c.navHome }"/>

controller

  navHome : function (component, event, helper) {
        var homeEvent = $A.get("e.force:navigateToObjectHome");
        homeEvent.setParams({
            "scope": "Account"
        });
        homeEvent.fire();
    }

force:navigateToRelatedList

Use this event to Navigates to the related list specified by parentRecordId.To navigate to a related list, set the parent record ID on the parentRecordId attribute and fire the event

    <lightning:button variant="success" label="Go to RelatedList" title="Go to RelatedList" onclick="{! c.gotoRelatedList }"/>

  gotoRelatedList : function (component, event, helper) {
        var relatedListEvent = $A.get("e.force:navigateToRelatedList");
        relatedListEvent.setParams({
            "relatedListId": "Cases",
            "parentRecordId": "0016A00000KpavN"
        });
        relatedListEvent.fire();
    }

force:navigateToSObject

Use this event to Navigates to an sObject record specified by recordId.To display the record view, set the record ID on the recordId attribute and fire the event.The record view contains slides that display the Chatter feed, the record details, and related information. This example displays the related information slide of a record view for the specified record ID.

    <lightning:button variant="success" label="Go to Opportunity" title="Go to Opportunity" onclick="{! c.navigateSobject }"/>

  navigateSobject : function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": "0066A0000061ziLQAQ",
            "slideDevName": "related"
        });
        navEvt.fire();
    }

force:navigateToURL

Use this system event to navigate the Relative and absolute URL . Relative and absolute URLs are supported. Relative URLs are relative to the Salesforce mobile web domain and retain navigation history. External URLs open in a separate browser window.

    <lightning:button variant="success" label="Navigate To URL" title="Navigate To Salesforce.com" onclick="{! c.navigateToURL }"/>

navigateToURL : function(component, event, helper) {
        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({
            "url": 'https://www.salesforce.com/' ,
            "isredirect":true ,
        });
        urlEvent.fire();
    }

Navigation in Lightning Experience Using PageReference

On May 29, 2018 By Rajamohan VakatiIn lightning

In this blog, I am going to explain how to Use lightning:navigation component to navigate to a given pageReference or to generate a URL from a pageReference. PageReference is a JavaScript object that represents a URL for a page. Use a PageReference instead of attempting to parse or create URLs directly. This approach helps you avoid broken navigation if Salesforce changes URL formats in the future. PageReference provides a well-defined structure that describes the page type and its corresponding attributes. A PageReference object contains key-value pairs to describe the page type you are navigating to.

The following PageReference looks like to set the route to /lightning/o/Account/list?filterName=MyAccounts

var pageReference = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: "MyAccounts"
            }
        };

Example

The following example generates a URL to an Account Object home based on its pageReference and sets the URL on an <a> element. The example assumes that you’re creating the component for a custom Lightning Component tab or a Lightning page by implementing force:appHostable and flexipage:availableForAllPageTypes

<aura:component implements="force:appHostable,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>

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. Depending on whether you’re using the new URL format available as part of the Summer ’18 critical update, you might see a URL that begins with the new format /lightning/cmp/ or the old format one/one.app#/cmp/.

({
    init : function(cmp, event, helper) {
        var navService = cmp.find("navService");
        var pageReference = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'home'
            }
        };
        cmp.set("v.pageReference", pageReference);
        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);
        }));
    },
    
})

PageReference is a reference to a page, providing a well-defined structure that describes the page type and its corresponding values. You should use the PageReference definitions instead of attempting to parse the URL directly. The following PageReference properties are supported.

PROPERTY	TYPE	DESCRIPTION
type	string	Required. The API name of the PageDefinition.
attributes	object	Required. Values for each attribute specified by the PageDefinition.
state	object	Additional parameters, such as `filterName`, which is tied to the query string of the URL in Lightning Experience. The routing framework doesn’t depend on `state` to render a page.

PageReference Types

A PageReference must be defined with a specific type. The type generates a unique URL format and provides attributes that apply to all pages of that type. The following types are supported.
1 Lightning Component (must implement lightning:isUrlAddressable)

Example

{
"type": "standard__component",
"attributes": {
"componentName": "c__MyLightningComponent"
},
"state": {
"myAttr": "attrValue"
}
}