Thursday, November 15, 2018

Lightning Treegrid : Generic Component to display hierarchy in tabular format for any sobject

In this blog, I am going to share a reusable component which can be used to display hierarchy of records along with other fields information in treegrid format.

Previously we have to use jquery to implement this but now "Lightning:treegrid" tag have been introduced which can be used to display treegrid in lightning framework.

In order to use this component, you have to pass below parameters to this components:
  • ltngcurrentRecId =  RecordId (15 or 18 digit)
  • ltngSobjectName = Object API Name
  • ltngParentFieldAPIName = Parent Field API name which create self relationship
  • ltngColumnLabelList = Specify the column label
  • ltngColumnAPINameList = Specify the API field names in same order as that of column
  • ltngHyperlinkColumn = Field API Name which will work as hyperlink for record detail page
Suppose you have display treegrid for Account hierarchy by using below syntax:

<c:SK_GenericTreeGridCmp ltngcurrentRecId="0019000000ld4kS"
ltngSobjectName="Account"
ltngParentFieldAPIName="ParentId"
ltngColumnLabelList="['Name','Type','Industry','Account Owner']"
ltngColumnAPINameList="['Name','Type','Industry','Owner.Name']"
ltngHyperlinkColumn="Name"/>

Below is output:

Suppose you have to display case hierarchy, then use below code snippet:

<c:SK_GenericTreeGridCmp ltngcurrentRecId="5009000000GJkJE"
ltngSobjectName="Case"
ltngParentFieldAPIName="ParentId"
ltngColumnLabelList="['CaseNumber','Subject','Status','Case Owner']"
ltngColumnAPINameList="['CaseNumber','Subject','Status','Owner.Name']"
ltngHyperlinkColumn="CaseNumber"
ltngHeaderValue="Case Hierarchy"/>

Below is output snapshot


Below is complete code snippet for your reference:


You can download the code from GitHub by using below URL:
Lightning-Treegrid-Generic-Component-to-display-hierarchy-in-tabular-format-for-any-sobject

Note:

  • Specify Field API properly as javascript is case sensitive. For example, specify "Name" instead of "name"
  • For adding parent field API names, provide API names properly. For example for Account owner use, "Owner.Name" instead of "owner.name".
Hope this will help!!!

Saturday, November 10, 2018

Lightning Components Tutorial : Easy way to become Lightning developer

In this blog, I am going to share all lightning components concept which is required for Lightning developer starting from basics to advance topics.

You can learn lightning in 25 days by following below 25 blogs related to lightning.
  1. Lightning Component Basics: Lightning Component Framework
  2. Lightning Components Basics : Attributes, Expressions and Value Providers
  3. Lightning Components Basics : Handling Actions in Controller.js
  4. Lightning Components Basics : Considerations while calling server-side controller actions
  5. Application Events : Way to Communicate Between Different Lightning Components
  6. Component Events: Way to Communicate Between Components in Containment Hierarchy
  7. Raising and Handling Custom Events in Salesforce Lightning
  8. Salesforce Lightning Events : Hands on Training Guide
  9. Salesforce 1 Events in Lightning Experience and Salesforce 1 app
  10. Lightning Data Services : Way to perform operation on records without using server-side Apex class
  11. Lightning Data Services : Hands on Training Guide
  12. Creating Lightning Components Dynamically
  13. Dynamically Creating and Destroying Lightning Button(ui:button)
  14. Adding Lightning Components in VF Page and Passing Values from URL
  15. Inheritance in Lightning Components
  16. Firing Event from Lightning Component and Passing Parameter to VF Page
  17. How to Fire Lightning Events from VF Page in Lightning
  18. Custom Component to show Loading Spinner in Lightning during Server or Client side Operations
  19. Why to use design resource in Lightning bundle and how to add dynamic Options in datasource for Design Component
  20. Formatting and Localizing dates in javascript in Lightning
  21. Using Chartjs in Lightning Components
  22. Lightning Tree : Generic Lightning Component to Display Hierarchy for any sObject
  23. Lightning:treegrid - Displaying Account hierarchy using treegrid
  24. Aura.Action : Lightning Framework Specific Attributes Type
  25. Aura.Component[] : Lightning Framework Specific Attributes Type

Hope this will help!!

Tuesday, November 6, 2018

Aura.Action : Lightning Framework Specific Attributes Type

In this blog, I am going to explain "Aura.Action" attribute type and its usage.

There is another Lightning Framework specific attribute "Aura.Component[]". If you want to learn more about this then refer below blog:

Aura.Component[] : Lightning Framework Specific Attributes Type


Aura.Action

Use this type of attribute if you want to pass the reference of parent lightning component controller.js function to nested/child lightning component. This will help to invoke parent component JS function from child component markup.

Below is syntax to define this kind of attribute:

<aura:attribute name="parentJSFunction" type="Aura.Action"/>

This is useful if you want to make reusable component to appear based on values passed from parent and close/hide the component by invoking parent lightning component JS function.

I have created a sample component to explain how to invoke parent component function and child component function by passing "Aura.Action" attribute to child component.

Below is snapshot of Lightning component ("SK_AuraActionDemoCmp")  UI which contains child component ("SK_AuraActionChildCmp")  inside it.


Child component contains 2 buttons which will invoke JS function of parent and same component. Child component contains an attribute of type "Aura.Action" through which we will parent parent component JS function reference.

<aura:attribute name="closeChildDivFunction" type="Aura.Action" default="{!c.defaultCloseAction}"/>

If you don't pass JS function from parent component then child component will invoke its own JS function "defaultCloseAction".

If user click on these 2 buttons, then below things will happen:

  • If user clicks on "Close via Parent JS function" button,then complete content will also get removed and ltnguserActionMessage will display message saying "Close via Parent JS function button clicked. Please refresh your browser if you again want to load this demo component"

  • If user clicks on "Close via ChildCmp JS function" button,then only child component body will be removed and ltnguserActionMessage  will display message saying "Close via ChildCmp JS function button clicked.Please refresh your browser if you again want to load this demo component"



Please find below complete code reference:

Hope this will help!!


Thursday, November 1, 2018

Lightning:treegrid - Displaying Account hierarchy using treegrid

Salesforce has introduced new tag called lightning:treegrid which can be used to display tree structure in tabular form. Lightning:tree can be used to display the hierarchy but if you want to display additional information then lightning:treegrid becomes useful.

If you want to lean how to use lightning:tree tag to display hierarchy for any record then refer below URL:

Lightning Tree : Generic Lightning Component to Display Hierarchy for any sObject

If you have to display account hierarchy along with another fields information as displayed in below image, then use treegrid.


Below is complete code to display account hierarchy. Just pass account record Id and lightning component will display complete hierarchy.


Hope this help!!!

Tuesday, October 30, 2018

Aura.Component[] : Lightning Framework Specific Attributes Type

We know that there are different attribute types supported for attribute in lightning like Boolean, date, datetime, decimal, double, integer, long, string, collections (list,set,map), sobjects, user defined data types(wrapper class) etc.

Below are 2 different types which are supported as attribute type and specific to lightning framework:
  • Aura.Component[]
  • Aura.Action
In this blog, we are going cover all aspect of Aura.Component[] attribute type. If you are interested in learning more about Aura.Action, then refer below blog:

Aura.Action : Lightning Framework Specific Attributes Type

Aura.Component[]

An attribute of this type is considered as facet. You can use this in order to set markup to use it in multiple places.
You can consider it some what similar to defining templates with <apex:composition> in VF pages.

To set a default value for "Aura.Component[]", specify the default markup in the body of aura:attribute. For example:

<!--aurafacet.cmp-->
<aura:component>
<aura:attribute name="MarkupDetail" type="Aura.Component[]">
<p>Aura.Component[] default value</p>
</aura:attribute>
</aura:component>

So when this facet attribute(MarkupDetail) value is not set in component, then this default mark up will apear.

<aura:component>
    <c:aurafacet >        
        <!--we are not setting MarkupDetail attribute value so this will display 
default body specified in MarkupDetail attribute--> 
    </c:aurafacet>
</aura:component>

Output will be:

Aura.Component[] default value

Below is sample code which include different components and usage of Aura.Component[] in it. Also it will explain how to reuse the component body.

Below is output snapshot:

Points to be noted:

  • When we didn't set the attribute value of type Aura.Component[], then it display default body specified within Aura.Component[].
  • When we set attribute value of type Aura.Component[], component will render based on given values.
  • Different div are being getting created with different content in that.

Hope this helps!!!

Monday, October 29, 2018

Way to get complete RecordType Information (like DeveloperName) using describe

In summer'18 release, new methods have been introduced through which we can retrieve all recordtype info using describe information. Below are 2 methods introduced in summer'18:

  • Schema.DescribeSObjectResult.getRecordTypeInfosByDeveloperName()
  • Schema.RecordTypeInfo.getDeveloperName()

Suppose you want to retrieve all recordtype information for account object then use below code:

Below is console output

Hope this help!!

Thursday, October 4, 2018

Lightning Component Basics: Lightning Component Framework

In this blog, I am going to provide basic overview of lightning component framework.

Lightning component framework is being referred as MVCC modal.

  • Modal
  • View
  • Client-Side Controller
  • Server-Side Controller
In lightning components, Lightning bundle which contains component markup, controller.js (client-side), helper.js (for utility or reusable code) etc acts as primary interface and from client side controller, we can perform server side calls(apex class method invocations).

All calls from Lightning components to server are asynchronous call and we capture the response using callback function.

Below diagram will help you to understand Lightning component framework:


Hope this will help!!!

More Blogs: