Usage Of Lightning Navigation Event

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

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

Here is the controller action.

  1. The below code get the System event force:navigateToComponent

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

3. fire the event

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.

Here is the controller code

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

controller

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 

 

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.

 

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.

 

 

 

 

Navigation in Lightning Experience Using PageReference

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

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

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/.

 

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 

URL formate from the generateUrl method 

 

2 Knowledge Article

A page that interacts with a Knowledge Article record.

Exmaple 

URL formate from the generateUrl method 

3.Named Page

A standard page with a unique name. Only home, chatter, today, and dataAssessment are supported.

Example

URL formate from the generateUrl method 

4. Navigation Item Page

A page that displays the content mapped to a CustomTab. Visualforce tabs, Web tabs, Lightning Pages, and Lightning Component tabs are supported.

Example

URL formate from the generateUrl method 

5.Object Page

A page that interacts with an object in the org and supports standard actions for that object.The standard__objectPage type replaces the force:navigateToObjectHome and the force:navigateToList events.

Example

URL formate from the generateUrl method 

6.Record Page

A page that interacts with a record in the org and supports standard actions for that record.The standard__recordPage type replaces the force:navigateToSObject event

Example

URL formate from the generateUrl method 

7.Record Relationship Page

A page that interacts with a relationship on a particular record in the org. Only related lists are supported.The standard__recordRelationshipPage type replaces the force:navigateToRelatedList event.

Example 

URL formate from the generateUrl method 

 

Lightning Component Breadcrumb

lightning:breadcrumb component displays the path of a page relative to a parent page. Breadcrumbs are nested in a lightning:breadcrumbs component. Each breadcrumb is actionable and separated by a greater-than sign. The order the breadcrumbs appear depends on the order they are listed in the markup.The behavior of a breadcrumb is similar to a link. If a link is not provided via the href attribute, the value defaults to javascript:void(0);. To provide custom navigation, use an onclick handler. For example, using onclick is useful if you’re navigating using an event like force:navigateToSObject. If you provide a link in the href attribute, calling event.preventDefault() enables you to bypass the link and use your custom navigation instead. The following example code shows the different breadcrumbs

 

 

Dynamically Destroying Lightning Components

In this blog, I am going to show how to destroy a lightning component. The lightning framework automatically destroys it and frees up its memory that is no longer in use at the same time lightning framework will allow destroying the component that is no longer need by using the Component destroy method.
If you create a component dynamically in JavaScript and that component isn’t added to a facet (v.body or another attribute of type Aura.Component[]), you have to destroy it manually using Component.destroy() to avoid memory leaks. The following example shows destroy the use of the framework.

In this example, I have created a two button. The Destroying Component button will destroy the component using the destroy method.

Similarly Destroying Component wit facet method will be another way of cleaning the component by using facet with below code.

 

 

 

Dynamically Creating Lightning Components

In this post, I am going to show how to create a lightning component dynamically by using javascript controller. Create a component dynamically in your client-side JavaScript code by using the $A.createComponent() method. To create multiple components, use $A.createComponents().$A.createComponent Syntax is looking as shown below.

  1. type—The type of component to create; for example, “ui:button”.
  2. attributes—A map of attributes for the component, including the local Id (aura:id).
  3. callback(cmp, status, errorMessage)—The callback to invoke after the component is created

In this example, The client-side controller calls $A.createComponent() to create a ui:inputText with a local ID. The function(newInp, status, errorMessage) callback appends the inputText to the body of c:createComponent.

Creating Nested Components

To dynamically create a component in the body of another component, use $A.createComponents() to create the components. In the function callback, nest the components by setting the inner component in the body of the outer component.

The dynamic lightning component will be an option in case if you wanted to create lightning components dynamically by using client-side javascript.