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.

	<aura:application extends="force:slds">
	<c:SK_AccountTreeGridCmp ltngcurrentRecId="0010K00001qo2mrQAA"/>
	</aura:application>

view raw SK_AccountTreeGridApp.app hosted with ❤ by GitHub

	<aura:component controller="SK_AccountTreeGridCmpController">
	<aura:attribute name="ltngcurrentRecId" type="String" />
	<aura:attribute name="gridColumns" type="list" />
	<aura:attribute name="gridData" type="Object" />
	<aura:attribute name="gridExpandedRows" type="List" access="PRIVATE" />
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	<lightning:treeGrid columns="{! v.gridColumns }"
	data="{! v.gridData }"
	keyField="name"
	expandedRows="{! v.gridExpandedRows}"
	aura:id="mytree" />
	</aura:component>

view raw SK_AccountTreeGridCmp.cmp hosted with ❤ by GitHub

	public class SK_AccountTreeGridCmpController {
	@AuraEnabled
	public static List<Account> findHierarchyData(string recId){
	List<Account> accList = new List<Account>();
	string queryString = 'select id,name,type,industry,parentId from Account ';
	//Section to get all child account details from ultimate parent starts-------------------------
	List<String> currentParent = new List<String>{};
	Integer level = 0;
	Boolean endOfStructure = false;
	//method to find ultimate parent of account
	string topMostparent = GetUltimateParentId(recId );
	system.debug('*******topMostparent:'+topMostparent);
	currentParent.add(topMostparent);
	system.debug('**********topMostparent:'+ currentParent);
	//Loop though all children
	string finalQueryString = '';
	List<Account> queryOutput = new List<Account> ();
	while ( !endOfStructure ){
	if( level == 0 ){
	finalQueryString = queryString + ' where id IN : CurrentParent ORDER BY ParentId Limit 1000';
	}
	else {
	finalQueryString = queryString + ' where ParentID IN : CurrentParent ORDER BY ParentId Limit 1000';
	}
	system.debug('********finalQueryString:'+finalQueryString);
	if(finalQueryString != null && finalQueryString !=''){
	try{
	if(Limits.getLimitQueries()-Limits.getQueries()>0){
	queryOutput = database.query(finalQueryString);
	system.debug('***hierarchy level:'+level);
	}else{
	system.debug('****endOfStructure is true as SOQL limit reaches:');
	endOfStructure = true;
	}
	}catch(exception ex){
	endOfStructure = true;
	}
	}
	system.debug('**queryOutput size:'+queryOutput);
	if( queryOutput.size() == 0 ){
	endOfStructure = true;
	}
	else{
	currentParent.clear();
	//iterating through query output
	for ( Integer i = 0 ; i < queryOutput.size(); i++ ){
	currentParent.add(queryOutput[i].Id);
	accList.add(queryOutput[i]);
	}
	}
	level++;
	}
	system.debug('**********accList:'+accList);
	return accList;
	}
	// Find the tom most element in Heirarchy
	// @return objId
	public static String GetUltimateParentId( string recId ){
	Boolean top = false;
	while ( !top ) {
	string queryString = 'select id ,name, ParentId from Account where Id =:recId LIMIT 1';
	Account acc = database.query(queryString);
	if ( acc.parentId != null ) {
	recId = acc.parentId;
	}else {
	top = true;
	}
	}
	return recId ;
	}
	}

view raw SK_AccountTreeGridCmpController.cls hosted with ❤ by GitHub

	({
	doInit: function (component, event, helper) {
	console.log('doInit of component called');
	var columns = [
	{
	type: 'url',
	fieldName: 'AccountURL',
	label: 'Account Name',
	typeAttributes: {
	label: { fieldName: 'accountName' }
	}
	},
	{
	type: 'text',
	fieldName: 'Industry',
	label: 'Industry'
	},
	{
	type: 'type',
	fieldName: 'Type',
	label: 'Type'
	}
	];
	component.set('v.gridColumns', columns);
	var trecid = component.get('v.ltngcurrentRecId');
	//var tsObjectName= component.get('v.ltngSobjectname');
	//var tparentFieldAPIname= component.get('v.ltngParentFieldAPIName');
	//var tlabelFieldAPIName= component.get('v.ltngLabelFieldAPIName');
	if(trecid){
	helper.callToServer(
	component,
	"c.findHierarchyData",
	function(response) {
	var expandedRows = [];
	var apexResponse = response;
	var roles = {};
	console.log('*******apexResponse:'+JSON.stringify(apexResponse));
	var results = apexResponse;
	roles[undefined] = { Name: "Root", _children: [] };
	apexResponse.forEach(function(v) {
	expandedRows.push(v.Id);
	roles[v.Id] = {
	accountName: v.Name ,
	name: v.Id,
	Type:v.Type,
	Industry:v.Industry,
	AccountURL:'/'+v.Id,
	_children: [] };
	});
	apexResponse.forEach(function(v) {
	roles[v.ParentId]._children.push(roles[v.Id]);
	});
	component.set("v.gridData", roles[undefined]._children);
	console.log('*******treegrid data:'+JSON.stringify(roles[undefined]._children));
	component.set('v.gridExpandedRows', expandedRows);
	},
	{
	recId: component.get('v.ltngcurrentRecId')
	}
	);
	}
	}
	})

view raw SK_AccountTreeGridCmpController.js hosted with ❤ by GitHub

	({
	callToServer : function(component, method, callback, params) {
	console.log('Calling helper callToServer function');
	var action = component.get(method);
	if(params){
	action.setParams(params);
	}
	console.log(JSON.stringify(params));
	action.setCallback(this, function(response) {
	var state = response.getState();
	if (state === "SUCCESS") {
	//alert('Processed successfully at server');
	callback.call(this,response.getReturnValue());
	}else if(state === "ERROR"){
	alert('Problem with connection. Please try again.');
	}
	});
	$A.enqueueAction(action);
	}
	})

view raw SK_AccountTreeGridCmpHelper.js hosted with ❤ by GitHub

Hope this help!!!