You need to sign in to do that
Don't have an account?
mahesh p 54
how could i achieve this?
how to display contact details after clicking contact in lightning tree component
<!--Tree.cmp--> <aura:component controller="TreeAuraController"> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="items" type="Object"/> <!--Lightning Tree--> <div class="slds-m-around_xx-large"> <lightning:tree items="{!v.items}" onselect="{!c.handleSelect}" header="Account and Contacts"/> </div> <!--Lightning Spinner--> <div> <lightning:spinner alternativeText="Processing.." title="Processing.." aura:id="spnr" variant="brand" size="large" /> </div> </aura:component>
public class TreeAuraController { @AuraEnabled public static List<item> getAccountTree(){ List<item> items = new List<item>(); List<Account> acctList = new List<Account>(); //get list of accounts and respective contacts acctList = [SELECT Id, Name, (SELECT Id, Name From Contacts) From Account LIMIT 10]; for(Account acc: acctList){ //get contacts of current account record List<item> conitems = new List<item>(); for(Contact c: acc.Contacts){ //add contact items item conitem = new item(c.Name, String.valueOf(c.Id), false, null); conitems.add(conitem); } //add account items item accitem = new item(acc.Name, String.valueOf(acc.Id), false, conitems); items.add(accitem); } return items; } //Item Wrapper Class public class item{ @AuraEnabled public String label {get; set;} @AuraEnabled public String name {get; set;} @AuraEnabled public Boolean expanded {get; set;} @AuraEnabled public List<item> items {get; set;} public item(String label, String name, Boolean expanded, List<item> items){ this.label = label; this.name = name; this.expanded = expanded; this.items = items; } } }
({ doInit: function (component, event, helper) { var spinner = component.find("spnr"); var action = component.get('c.getAccountTree'); action.setCallback(this, function(response){ var state = response.getState(); if(state === 'SUCCESS'){ //get account and respective contact list, and initialize with items component.set('v.items', response.getReturnValue()); //hide spinner after getting data $A.util.toggleClass(spinner, "slds-hide"); }else{ $A.util.toggleClass(spinner, "slds-hide"); alert('ERROR'); } }); $A.enqueueAction(action); }, handleSelect: function (cmp, event, helper) { //return name of selected tree item var selectedName = event.getParam('name'); alert("Selected Name: " + selectedName); } })After i expand one contact its displaying list of contacts now i need to show the contact details when i click on particular contact under an account.
how could i achieve this?
Greetings to you!
You can show Contact details in modal pop up or in a lightning table. Please try the below code, I have tested in my org and it is working fine. I am showing contact details in a modal popup. Kindly modify the code as per your requirement.
Component:
Controller:
CSS:
Apex:
Also, please refer to below link which might help you further with the above requirement.
http://www.cloudyabhi.com/2017/09/lightningtree-to-display-account.html
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.
Thanks and Regards,
Khan Anas
All Answers
Greetings to you!
You can show Contact details in modal pop up or in a lightning table. Please try the below code, I have tested in my org and it is working fine. I am showing contact details in a modal popup. Kindly modify the code as per your requirement.
Component:
Controller:
CSS:
Apex:
Also, please refer to below link which might help you further with the above requirement.
http://www.cloudyabhi.com/2017/09/lightningtree-to-display-account.html
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.
Thanks and Regards,
Khan Anas
Regards,
Khan Anas
I used the code supplied by Khan Anas and am getting the following result. Could someone please point me in the right direction as to how I can remedy this?
I appreciate anyone willing to provide some guidance.
Sincerely,
Mills Batman
You need to extend force:slds in the application. The Salesforce Lightning Design System provides a look and feel that’s consistent with Lightning Experience. Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds.
To extend force:slds:
Regards,
Khan Anas