0

Am planning to display the Account and its related Contacts structure in lightning component. Since I am new to lightning component, I need some help finding the best lightning tags.

What are the lightning tags that I can use to display the Account and its contacts in cool way. Am very much interested in a new lightning components.

I found lightning:treeGrid tag but it is not released yet. Similarly, I want to know what are the other cool tags that we can use to display the Account and its Contacts structure(may be like tree or creative way) without using external libraries.

Thanks in advance!.

3

You could use lightning:tree that will display data as you wish right now.

A simple example from the article above, which I tried in my dev org:

Lightning component

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="items" type="Object"/>
    <lightning:tree items="{! v.items }" header="Roles"/>
</aura:component>

Client-side controller

({
    doInit: function (cmp, event, helper) {
    var items = [{
            "label": "Western Sales Director",
            "name": "1",
            "expanded": true,
            "items": [{
                "label": "Western Sales Manager",
                "name": "2",
                "expanded": true,
                "items" :[{
                    "label": "CA Sales Rep",
                    "name": "3",
                    "expanded": true,
                    "items" : []
                },{
                    "label": "OR Sales Rep",
                    "name": "4",
                    "expanded": true,
                    "items" : []
                }]
            }]
        }];
        cmp.set('v.items', items);
    }     
})

Result

enter image description here

Edit - Dynamic Tree component

I have created a dynamic tree component, which takes ParentObj and ChildObj as attributes. You could review and use the code from github repo Lightning-Tree-Dynamic-Component

For Account - Contacts - Component implementation would be

<aura:application extends="force:slds">

  <c:TreeCmp parentObj="Account" childObj="Contacts" parentObjNameField="Name" childObjNameField="LastName" /> 

</aura:application>
  • Great start to the lightning new feature!. Also, I found Trees SLDS which can be collapsible and expandable with +/-. Thanks for the help. Now am looking to fetch the Accounts and contacts dynamically. – mohammed azarudeen Jan 3 '18 at 13:08
  • 1
    Please open a new post with enough details/research/code attempt for further assistance, and consider accepting the answer above if it helped you. Thanks! – glls Jan 3 '18 at 17:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.