Month: May 2018

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.


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.


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


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


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



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 



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.



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


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/


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.

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) 


URL formate from the generateUrl method 


2 Knowledge Article

A page that interacts with a Knowledge Article record.


URL formate from the generateUrl method 

3.Named Page

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


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.


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.


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


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.


URL formate from the generateUrl method 


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.



lightning:fileUpload Example

lightning:fileUpload component provides an easy and integrated way for users to upload multiple files. The file uploader includes drag-and-drop functionality and filtering by file types. File uploads are always associated to a record, hence the recordId attribute is required. Uploaded files are available in Files Home under the Owned by Me filter and on the record’s Attachments related list on the record detail page. Although all file formats that are supported by Salesforce are allowed, you can restrict the file formats using the accept attribute. Here is the example code .

Lightnin Component 



Code walkthrough 

  1. event.getParam(“files”) returns a list of uploaded files with the properties name and The file name in the format filename.extension.documentId: The ContentDocument Id in the format 069XXXXXXXXXXXX.

2. Below code will show the Toast on Successfully file upload

3.below code will open the file preview after file upload.

File Upload Limits

By default, you can upload up to 10 files simultaneously unless your Salesforce admin has changed that limit. The org limit for the number of files simultaneously uploaded is a maximum of 25 files and a minimum of 3 files. The maximum file size you can upload is 2 GB. In Communities, the file size limits and types allowed follow the settings determined by community file moderation. Guest user can’t add files.

Usage Considerations

This component is not supported in Lightning Out or standalone apps, and displays as a disabled input. Additionally, if the Don't allow HTML uploads as attachments or document records security setting is enabled for your organization, the file uploader cannot be used to upload files with the following file extensions: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg.