Dynamic Tree Structure with LWC

Salesforce May 22, 2019

Hello Guys,

In this post, I am going to share a component which I built while learning LWC(Lightning Web Components). This is a simple LWC component with most logic handled by Apex. I am very pleased the way Salesforce is promoting LWC as it is very light to use and covers all best practices by running on top of typescript. This means it is market standard and people don't need to learn any other language specifically if they are familiar with typescript.

While playing, I choose to build a sample tree component which I think is useful when we need a 360 view for a record or we need to see the whole hierarchy. In this example, I am displaying 360 views for all Accounts as well as a hierarchy for accounts within a single tree itself.

With the magic of LWC, I am able to make this tree structure with 5 - 6 lines of code in my HTML. It displays all the related opportunities, contacts and cases for an Account. If an Account has a sub account, it is also displayed in the same hierarchy along with all related records.

Screenshot

You can find the full code for this sample component here.

Note: Tree structure built in apex is built using recursion technique. It is tested with 4 level hierarchy with Accounts. While using recursion, please consider governor limits and tweak solution accordingly.

Related Tags:

Salesforce   LightningWebComponent   Lightning   LWC   Apex