I have two custom objects now I am displaying parent object records with a name in the component. When a user clicks on the name of the parent object record I want to show child object records for that parent please suggest me something.
Apex Controller
public class DocumentGroupSequencingCtrl{
@AuraEnabled
public static List<Department__c> getSupplierNetRecords() {
return new List<Department__c>([Select id,Name from SupplierNet_Department__c ORDER BY Sequence__c desc LIMIT 100]);
}
@AuraEnabled
public static List<Group__c> getDocumentGroupRecords() {
return new List<Group__c>([Select id,Name,Sequence__c
from Group__c ORDER BY Sequence__c desc LIMIT 100]);
}
}
Component
<aura:component controller="DocumentGroupSequencingCtrl"
implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes"
access="global">
<aura:attribute name="displayNewAccount" type="Boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <!-- calling doInit method in Component Controller -->
<!--<aura:handler event="c:NewClosedModalEvent" action="{!c.newClosedModal}"/> --> <!-- create event for closed modal.-->
<aura:attribute name="accLst" type="Department__c[]"/> <!-- create Array type Account variable-->
<aura:attribute name="documentGroupLst" type="Group__c[]"/>
<article class="slds-card">
<div class="slds-grid slds-grid_frame">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<!-- <div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">
<lightning:icon iconName="standard:account" size="large" alternativeText="List account"/>
</span>
</div>-->
<!-- <div class="slds-media__body">
<h2>
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Account">
<span class="slds-text-heading_small">Account</span>
</a>
</h2>
</div> -->
</header>
<!-- <div class="slds-no-flex">
<lightning:button label="New" onclick="{!c.showAccountModal}"/>
</div>-->
</div>
<div class="slds-card__body">
<table class="slds-table slds-table_bordered slds-no-row-hover slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="Departments">Departments</div>
</th>
<!-- <th scope="col">
<div class="slds-truncate" title="Type">Type</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>-->
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accLst}" var="acc"> <!-- iteration account record.-->
<tr class="slds-hint-parent">
<th scope="row">
<div class="slds-truncate" title="Adam Choi"><a href="javascript:void(0);">{!acc.Name}</a></div>
</th>
<!-- <td>
<div class="slds-truncate" title="Company One">{!acc.Type}</div>
</td>
<td>
<div class="slds-truncate" title="{!acc.Phone}">{!acc.Phone}</div>
</td>-->
</tr>
</aura:iteration>
</tbody>
</table>
</div>
<div>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Close Date">Close Date</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Stage">Stage</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Confidence">Confidence</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Amount">Amount</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Contact">Contact</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">Cloudhub</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>
<td data-label="Prospecting">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td data-label="Confidence">
<div class="slds-truncate" title="20%">20%</div>
</td>
<td data-label="Amount">
<div class="slds-truncate" title="$25k">$25k</div>
</td>
<td data-label="Contact">
<div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
</td>
</tr>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">Cloudhub</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>
<td data-label="Prospecting">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td data-label="Confidence">
<div class="slds-truncate" title="20%">20%</div>
</td>
<td data-label="Amount">
<div class="slds-truncate" title="$25k">$25k</div>
</td>
<td data-label="Contact">
<div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<footer class="slds-card__footer"><a href="javascript:void(0);"></a></footer>
</article>
<aura:if isTrue="{!v.displayNewAccount}">
<!--<c:Salesforceadda_NewAccount /> --> <!-- this is another component and contains popup and there fields to save account info -->
</aura:if>
</aura:component>
controller.js
({
doInit : function(component, event, helper) {
helper.getSupplierNetRecordsRecord(component); // Calling Helper method on load
},
showAccountModal : function(component,event,helper){
component.set("v.displayNewAccount",true); // calls to show popup
},
newClosedModal:function(component,event,helper){
component.set("v.displayNewAccount",false);
helper.getAccontRecord(component); // Calling Helper method to display record after record save from popup
}
})
Helper.js
({
getSupplierNetRecordsRecord : function( component ) {
var action = component.get("c.getSupplierNetRecordsRecord"); //Calling Apex class controller 'getAccountRecord' method
action.setCallback(this, function(response) {
var state = response.getState(); //Checking response status
var result = JSON.stringify(response.getReturnValue());
if (component.isValid() && state === "SUCCESS")
component.set("v.accLst", response.getReturnValue()); // Adding values in Aura attribute variable.
});
$A.enqueueAction(action);
},
})