Salesforce.com: Create Custom Account Hierarchy in Lightning

Account Hierarchy is a very common feature required by many business and till now we dont have a component which works properly on lightning experience. Below is a small code which can be used for such a use case and can be extended where needed.
Lightning App:
<aura:application >
<c:AccountTree ></c:AccountTree>
</aura:application>
Controller:
public class AccConListController {
@AuraEnabled
public static List<Account> getAccounts(String accountId) {
List<Account> accounts=[SELECT Id, Name FROM Account where id=:accountId];
return accounts;
}

@AuraEnabled
public static List<Account> getChildAccounts(String ParentAccountid) {
List<Account> accounts=[SELECT Id, Name FROM Account where parentid=:ParentAccountid limit 20];
return accounts;
}
}
Inner Component for Tree
<aura:component controller=”AccConListController” implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes” access=”global” >
<aura:attribute name=”acc” type=”Account” />
<aura:attribute name=”lstChildAccounts” type=”Account[]” />
<aura:attribute name=”ext” type=”String” default=”plus”/>

<li  id=”tree0-node0″ class=”slds-tree__branch slds-is-open” role=”treeitem” aria-level=”1″ aria-expanded=”true”>
<div class=”slds-tree__item”>
<aura:if isTrue=”{!v.lstChildAccounts[0]!=null}”>
<aura:if isTrue=”{!v.ext==’plus’}”>
<div id=”plus” >
+
</div>
<aura:set attribute=”else”>
<div id=”minus”>
—
</div>

</aura:set>
</aura:if>
&nbsp;
<aura:set attribute=”else”>
+
</aura:set>
</aura:if>
<a id=”tree0-node0-0-link”  tabindex=”-1″ onclick=”{!c.showHidePanel}” role=”presentation”>{!v.acc.Name}</a>
</div>

<ul aura:id=”{!v.acc.Id}” id=”{!v.acc.Id}” style=”display:none;” class=”slds-tree__group slds-nested” role=”group” aria-labelledby=”tree0-node0-link”>
<aura:iteration items=”{!v.lstChildAccounts}” var=”con”>
<li id=”tree0-node0-1″ class=”slds-tree__item” role=”treeitem” aria-level=”2″ style=”margin-left: 20px;”>
<a href=”#” role=”presentation” class=”slds-truncate” style=”color: darkgoldenrod;”>{!con.Name}</a>
</li>

</aura:iteration>
</ul>
</li>
</aura:component>
Controller for Inner Component
({
showHidePanel : function(component, event, helper) {
var id=component.get(“v.acc.Id”);
var e=document.getElementById(id);
if (e.style.display == ‘block’ || e.style.display==”){
e.style.display = ‘none’;
component.set(“v.ext”,”plus”);
}else{
e.style.display = ‘block’;
component.set(“v.ext”,”minus”);
}

helper.getChildAccountsData(component);
},
showrecord : function(component, event, helper)
{
var selectedItem = event.currentTarget;
var accountId= selectedItem.dataset.accId;
alert(accountId);
}
})

Helper for Inner Component

({
getChildAccountsData: function(component) {
var action = component.get(“c.getChildAccounts”);
//Set up the callback
var self = this;
action.setParams({
“ParentAccountid”: component.get(“v.acc.Id”)
});
action.setCallback(this, function(actionResult) {
component.set(“v.lstChildAccounts”, actionResult.getReturnValue());
});
$A.enqueueAction(action);
}
})

Treeview Main Component

<aura:component controller=”AccConListController” implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes” access=”global” >
<ltng:require styles=”/resource/SLDS090/assets/styles/salesforce-lightning-design-system.min.css”/>
<aura:attribute name=”recordId” type=”Id” />
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />
<aura:attribute name=”Accounts” type=”Account[]” />

<h3>
Account Hierarchy
</h3>
<div class=”slds”>


<div class=”slds-tree-container” role=”application”>
<ul class=”slds-tree” role=”tree” aria-labelledby=”treeheading” aria-activedescendant=”tree0-node0″>

<aura:iteration items=”{!v.Accounts}” var=”acc”>
<c:AccountRow acc=”{!acc}” />

</aura:iteration>
</ul>
</div>
</div>
</aura:component>

Controller for Main Component

({
doInit : function(component, event, helper) {
helper.getAccounts(component);
},

showPanel : function(component, event, helper){
helper.onLoadPage(component);
}

})

Helper for Main Component
({
//Fetch the Accounts from the Apex controller
getAccounts: function(component) {
var action = component.get(“c.getAccounts”);
//Set up the callback
var self = this;
action.setParams({
“accountId”: component.get(“v.recordId”)
});

action.setCallback(this, function(actionResult) {
component.set(“v.Accounts”, actionResult.getReturnValue());
});
$A.enqueueAction(action);
},
})




Source : http://www.saasanalogy.com/create-custom-account-hierarchy-in-lightning/