0

Need your help in structuring my wrapper class. Price agreement Header (Parent): Has 3 child.Distributor object : Distributor_Eligibility__c ,Product :Product_Pricing__c,Enduser object Direct_Customer_Eligibilities__c

I want the below scenario to be display in my table in lightning component.

case 1: Distributor login (Contact record of type distributor ) and click on search (this is my button on click i am displaying the table):

    Distributor List display with only Price agreement header details.

Case 2: Distributor login| enter Product value (text box) |click on search:

    Distributor List display with Price agreement header + product details.

Case 3: Distributor login| End user value(text) |click on search:

    Distributor List display with Price agreement header + end user details.

Issue is: with case 2 3 . One price agreement header can have multiple product attached to it. same with end user. How to display list of product and end user in the table.

public without sharing class ExternalCVTQueryBuilder {

  Public class MainWrapper {
        @AuraEnabled
        public Price_Agreement_Header__c priceAgreementHeader {get;set;}
        @AuraEnabled
        public String validFromFormatted {get;set;}
        @AuraEnabled
        public String validToFormatted {get;set;}
        @AuraEnabled
        public Product_Pricing__c product {get;set;}
        @AuraEnabled
        public Direct_and_End_Customer_Eligibility__c endUser {get;set;}
        @AuraEnabled
        public String DistributorNumber {get;set;}  
        @AuraEnabled
        public String CustomerNumber{get;set;}  
    }

    private List<MainWrapper> fetchResults(Set<Id> pricingHeaderSet) {

       Set<Id> pricingHeaderSet---- This set contain price agreement header (parent) Id's
        ---------------------------------------
        ---------------Code for iterating list of child record from above parent id set-----
        --- list of child record : distributorValidList--------------

       if(distributorValidList.size() > 0) {

           //return distributorValidList;

           // ----------------------My code starts here to return a Wrapper instead of list--------------

           List<MainWrapper> lstMainWrapper = new List<MainWrapper>();
           Map<Id, String> distmap = new Map<Id, String>();

           for(Distributor_Eligibility__c thisnewDist : distributorValidList){
             distmap.put(thisnewDist.Price_Agreement__c,  thisnewDist.Distributor_Number__c);
           } 


           Map<ID, Price_Agreement_Header__c> priceheadermap = new Map<ID, Price_Agreement_Header__c>([SELECT Id,Name,Price_Agr_Description__c,Sub_Grouping__c,Valid_From__c,Valid_To__c,
                                                                                                                 Last_Changed_Date_time__c,Price_Agreement_Status__c,
                                                                                                                 (SELECT Id,Material_Number__c,Valid_From__c, Valid_To__c From Product_Pricings__r)
                                                                                                                 FROM Price_Agreement_Header__c where Id IN: distmap.KeySet()]);

              for(Distributor_Eligibility__c thisnewDist : distributorValidList){
                //Only Product is entered
                if((selectedFilter.product != null && ! String.isEmpty(selectedFilter.product)) && 
                                (selectedFilter.endUserNumber == null || String.isEmpty(selectedFilter.endUserNumber))) {

                   Price_Agreement_Header__c thisHeader = priceheadermap.get(thisnewDist.Price_Agreement__c);
                   if(thisHeader.Product_Pricings__r.size() > 0) {

                       for (Product_Pricing__c productPricing : thisHeader.Product_Pricings__r) {

                          If(selectedFilter.product == productPricing.Material_Number__c){
                             MainWrapper displayWrapper = new MainWrapper();
                             displayWrapper.priceAgreementHeader = thisHeader;
                             displayWrapper.validFromFormatted = thisHeader.Valid_From__c.format();
                             displayWrapper.validToFormatted = thisHeader.Valid_To__c.format();
                             displayWrapper.DistributorNumber = thisnewDist.Distributor_Number__c;
                             productPricing.ValidFromFormated__c =   productPricing.Valid_From__c.format();
                             productPricing.ValidToFormated__c =   productPricing.Valid_To__c.format(); 
                             displayWrapper.product = productPricing;  
                             lstMainWrapper.add(displayWrapper); 
                          }

                      }  
                  }
                  else {
                     system.debug('######### No Product ############');
                     MainWrapper displayWrapper = new MainWrapper();
                     displayWrapper.priceAgreementHeader = thisHeader;
                     displayWrapper.validFromFormatted = thisHeader.Valid_From__c.format();
                     displayWrapper.validToFormatted = thisHeader.Valid_To__c.format();
                     displayWrapper.DistributorNumber = thisnewDist.Distributor_Number__c;

                     lstMainWrapper.add(displayWrapper);
                     }
               }

              //Only End User is entered
              else if((selectedFilter.endUserNumber != null && ! String.isEmpty(selectedFilter.endUserNumber)) &&
                                 (selectedFilter.product == null || String.isEmpty(selectedFilter.product))){

             Price_Agreement_Header__c thisHeader = priceheadermap.get(thisnewDist.Price_Agreement__c);

             MainWrapper displayWrapper = new MainWrapper();
             displayWrapper.priceAgreementHeader = thisHeader;
             displayWrapper.validFromFormatted = thisHeader.Valid_From__c.format();
             displayWrapper.validToFormatted = thisHeader.Valid_To__c.format();
             displayWrapper.DistributorNumber =  thisnewDist.Distributor_Number__c;

                     if(thisHeader.Direct_Customer_Eligibilities__r.size() > 0) {
                            displayWrapper.endUser = thisHeader.Direct_Customer_Eligibilities__r[0];
                            displayWrapper.endUser.ValidFromFormated__c =   displayWrapper.endUser.Valid_From__c.format();
                            displayWrapper.endUser.ValidToFormated__c =   displayWrapper.endUser.Valid_To__c.format();
                     }

             lstMainWrapper.add(displayWrapper);
              }

              //Product and End User are not Entered - #Default search
                else{
                MainWrapper displayWrapper = new MainWrapper();
                displayWrapper.priceAgreementHeader  = priceheadermap.get(thisnewDist.Price_Agreement__c);
                displayWrapper.validFromFormatted = priceheadermap.get(thisnewDist.Price_Agreement__c).Valid_From__c.format();
                displayWrapper.validToFormatted = priceheadermap.get(thisnewDist.Price_Agreement__c).Valid_To__c.format();
                displayWrapper.DistributorNumber = thisnewDist.Distributor_Number__c; 
                lstMainWrapper.add(displayWrapper); 
                 }


            }// for loop end

            if(lstMainWrapper.size() > 0) {
                    return lstMainWrapper;
            }
            else {
            return null;
            }

   }
 }
}
Lightning component(UI): Table
=============================

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal">
<thead>
                        <tr class="slds-text-title--caps slds-line-height_reset">

                            <th scope="col">
                                <a href="javascript:void(0);" class="slds-text-link--reset"
                                   data-field="{!v.currentList}" onclick="{!c.priceNumberSort}">
                                    <div class="slds-truncate">{!$Label.c.Price_Agreement_Number}
                                        <span>
                                            <lightning:icon iconName="{!v.priceNumberSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                            size="xx-small" />
                                        </span>
                                    </div>
                                </a>
                            </th>

                            <th scope="col">
                                <a href="javascript:void(0);" class="slds-text-link--reset"
                                   data-field="{!v.currentList}" onclick="{!c.priceNameSort}">
                                    <div class="slds-truncate">{!$Label.c.Price_Agreement_Name}
                                        <span>
                                            <lightning:icon iconName="{!v.priceNameSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                            size="xx-small" />
                                        </span>
                                    </div>
                                </a>
                            </th>

                            <th scope="col">
                                <a href="javascript:void(0);" class="slds-text-link--reset"
                                   data-field="{!v.currentList}" onclick="{!c.priceTypeSort}">
                                    <div class="slds-truncate">{!$Label.c.Type}
                                        <span>
                                            <lightning:icon iconName="{!v.priceTypeSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                            size="xx-small" />
                                        </span>
                                    </div>
                                </a>
                            </th>

                            <th scope="col">
                                <a href="javascript:void(0);" class="slds-text-link--reset"
                                   data-field="{!v.currentList}" onclick="{!c.priceValidFormSort}">
                                    <div class="slds-truncate">{!$Label.c.Valid_From}
                                        <span>
                                            <lightning:icon iconName="{!v.priceValidFormSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                            size="xx-small" />
                                        </span>
                                    </div>
                                </a>
                            </th>

                            <th scope="col">
                                <a href="javascript:void(0);" class="slds-text-link--reset"
                                   data-field="{!v.currentList}" onclick="{!c.priceValidToSort}">
                                    <div class="slds-truncate">{!$Label.c.Valid_To}
                                        <span>
                                            <lightning:icon iconName="{!v.priceValidToSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                            size="xx-small" />
                                        </span>
                                    </div>
                                </a>
                            </th>

                            <th scope="col">
                                <a href="javascript:void(0);" class="slds-text-link--reset"
                                   data-field="{!v.currentList}" onclick="{!c.priceLastChangedSort}">
                                    <div class="slds-truncate">{!$Label.c.Last_Changed}
                                        <span>
                                            <lightning:icon iconName="{!v.priceLastChangedSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                            size="xx-small" />
                                        </span>
                                    </div>
                                </a>
                            </th>

                            <th scope="col">
                                <div class="slds-truncate">{!$Label.c.PAT_Status}</div>
                            </th>

                            <!-- Product column start -->
                <aura:if isTrue="{!v.productValue}">
                                <th scope="col">
                                    <a href="javascript:void(0);" class="slds-text-link--reset"
                                       data-field="{!v.currentList}" onclick="{!c.productSort}">
                                        <div class="slds-truncate">{!$Label.c.Product}
                                            <span>
                                                <lightning:icon
                                                                iconName="{!v.productSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                                size="xx-small" />
                                            </span>
                                        </div>
                                    </a>
                                </th>

                                <th scope="col">
                                    <a href="javascript:void(0);" class="slds-text-link--reset"
                                       data-field="{!v.currentList}" onclick="{!c.productValidFromSort}">
                                        <div class="slds-truncate">{!$Label.c.Valid_From}
                                            <span>
                                                <lightning:icon
                                                                iconName="{!v.productValidFromSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                                size="xx-small" />
                                            </span>
                                        </div>
                                    </a>
                                </th>

                                <th scope="col">
                                    <a href="javascript:void(0);" class="slds-text-link--reset"
                                       data-field="{!v.currentList}" onclick="{!c.productValidToSort}">
                                        <div class="slds-truncate">{!$Label.c.Valid_To}
                                            <span>
                                                <lightning:icon
                                                                iconName="{!v.productValidToSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                                size="xx-small" />
                                            </span>
                                        </div>
                                    </a>
                                </th>

                                <th scope="col">
                                    <a href="javascript:void(0);" class="slds-text-link--reset"
                                       data-field="{!v.currentList}" onclick="{!c.productStatusSort}">
                                        <div class="slds-truncate">{!$Label.c.PAT_ProductStatus}
                                            <span>
                                                <lightning:icon
                                                                iconName="{!v.productStatusSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                                size="xx-small" />
                                            </span>
                                        </div>
                                    </a>
                                </th>

                                <th scope="col">
                                    <a href="javascript:void(0);" class="slds-text-link--reset"
                                       data-field="{!v.currentList}" onclick="{!c.productPricePerCaseSort}">
                                        <div class="slds-truncate">{!$Label.c.PAT_PricePerCase}
                                            <span>
                                                <lightning:icon
                                                                iconName="{!v.productPricePerCaseSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                                size="xx-small" />
                                            </span>
                                        </div>
                                    </a>
                                </th>
                            </aura:if>
                <!-- Product column End -->

                <!-- End user column start-->
                <aura:if isTrue="{!v.endUserValue}">
                                <th scope="col">
                                    <a href="javascript:void(0);" class="slds-text-link--reset"
                                       data-field="{!v.currentList}" onclick="{!c.endUserSort}">
                                        <div class="slds-truncate">{!$Label.c.End_User_Number}
                                            <span>
                                                <lightning:icon
                                                                iconName="{!v.endUserSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                                size="xx-small" />
                                            </span>
                                        </div>
                                    </a>
                                </th>
                                <th scope="col">
                                    <a href="javascript:void(0);" class="slds-text-link--reset"
                                       data-field="{!v.currentList}" onclick="{!c.endUserValidFormSort}">
                                        <div class="slds-truncate">{!$Label.c.Valid_From}
                                            <span>
                                                <lightning:icon
                                                                iconName="{!v.endUserValidFormSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                                size="xx-small" />
                                            </span>
                                        </div>
                                    </a>
                                </th>
                                <th scope="col">
                                    <a href="javascript:void(0);" class="slds-text-link--reset"
                                       data-field="{!v.currentList}" onclick="{!c.endUserValidToSort}">
                                        <div class="slds-truncate">{!$Label.c.Valid_To}
                                            <span>
                                                <lightning:icon
                                                                iconName="{!v.endUserValidToSort ? 'utility:chevronup' : 'utility:chevrondown'}"
                                                                size="xx-small" />
                                            </span>
                                        </div>
                                    </a>
                                </th>
                            </aura:if>
            <!-- End user column end --> 
                        </tr>
                    </thead>
                    <tbody>
                        <aura:iteration items="{!v.currentList}" var="record" indexVar="indx">
                            <tr class="slds-hint-parent">

                                <th data-label="{!$Label.c.Price_Agreement_Number}" scope="row">
                                    <div class="slds-truncate innerDiv">
                                        <a href="" onclick="{!c.redirectToDetail}" data-selectedindex="{!record.Id}">
                                            {!record.priceAgreementHeader.Name}</a>

                                    </div>
                                </th>
                                <th data-label="{!$Label.c.Price_Agreement_Name}" scope="row">
                                    <div class="slds-truncate innerDiv">
                                       {!record.priceAgreementHeader.Price_Agr_Description__c}
                                    </div>
                                </th>
                                <!--If logged in user is distributor-->
                                <aura:if isTrue="{!v.PATWrapper.isDistributor}">
                                    <th data-label="{!$Label.c.DistributorNumber}" scope="row">
                                        <div class="slds-truncate innerDiv">
                                           <!-- {!record.Distributor_Number__c}-->
                                           {!record.DistributorNumber}
                                        </div>
                                    </th>
                                </aura:if>
                                <!--If logged in user is End User-->
                                <aura:if isTrue="{!v.PATWrapper.isDistributor == false}">
                                    <th data-label="{!$Label.c.End_User_Customer_Number}" scope="row">
                                        <div class="slds-truncate innerDiv">
                                           <!-- {!record.Customer_Number__c}-->
                                            {!record.CustomerNumber}
                                        </div>
                                    </th>
                                </aura:if>
                                <th data-label="{!$Label.c.Type}" scope="row">
                                    <div class="slds-truncate innerDiv">
                                         {!record.priceAgreementHeader.Sub_Grouping__c}
                                    </div>
                                </th>

                                <th data-label="{!$Label.c.Valid_From}" scope="row">
                                    <div class="slds-truncate innerDiv">
                                      <!--{!record.ValidFromFormated__c}-->
                                       {!record.validFromFormatted}
                                    </div>
                                </th>
                                <th data-label="{!$Label.c.Valid_To}" scope="row">
                                    <div class="slds-truncate innerDiv">
                                       <!-- {!record.ValidToFormated__c}-->
                                        {!record.validToFormatted}

                                    </div>
                                </th>

                                <th data-label="{!$Label.c.Last_Changed}" scope="row">
                                    <div class="slds-truncate innerDiv">
                                         <!-- <lightning:formattedDateTime value="{!record.Price_Agreement__r.Last_Changed_Date_time__c}"  year="numeric" month="numeric" day="numeric" hour="2-digit"
                                            minute="2-digit" hour12="true"/>-->
                                         <lightning:formattedDateTime value="{!record.priceAgreementHeader.Last_Changed_Date_time__c}"  year="numeric" month="numeric" day="numeric" hour="2-digit"
                                            minute="2-digit" hour12="true"/> 

                                    </div>
                                </th>

                                <th data-label="{!$Label.c.PAT_Status}" scope="row">
                                    <div class="slds-truncate innerDiv">
                                         {!record.priceAgreementHeader.Price_Agreement_Status__c}
                                    </div>
                                </th>

                                <!-- For Product start-->
                <aura:if isTrue="{!v.productValue}">
                                    <th data-label="{!$Label.c.Product}" scope="row">
                                        <div class="slds-truncate innerDiv">
                                            {!record.product.Material_Number__c}
                                        </div>
                                    </th>
                                    <th data-label="{!$Label.c.Valid_From}" scope="row">
                                        <div class="slds-truncate innerDiv">

                                            {!record.product.ValidFromFormated__c}

                                        </div>
                                    </th>
                                    <th data-label="{!$Label.c.Valid_To}" scope="row">
                                        <div class="slds-truncate innerDiv">
                                                {!record.product.ValidToFormated__c}

                                        </div>
                                    </th>
                                    <th data-label="{!$Label.c.PAT_ProductStatus}" scope="row">
                                        <div class="slds-truncate innerDiv">
                                            {!record.product.Product__r.Status__c}
                                        </div>
                                    </th>
                                    <th data-label="{!$Label.c.PAT_PricePerCase}" scope="row">
                                        <div class="slds-truncate innerDiv">
                                            <aura:unescapedHtml value="{!record.product.Price_Per_Case__c}" />
                                        </div>
                                    </th>
                                </aura:if>
                <!-- For Product end-->

                <!-- For End user start-->
                                <aura:if isTrue="{!v.endUserValue}">
                                    <th data-label="{!$Label.c.End_User_Number}" scope="row">
                                        <div class="slds-truncate innerDiv">
                                            {!record.endUser.Customer_Number__c}
                                        </div>
                                    </th>
                                    <th data-label="{!$Label.c.Valid_From}" scope="row">
                                        <div class="slds-truncate innerDiv">
                                                {!record.endUser.ValidFromFormated__c}

                                        </div>
                                    </th>
                                    <th data-label="{!$Label.c.Valid_To}" scope="row">
                                        <div class="slds-truncate innerDiv">
                                                {!record.endUser.ValidToFormated__c}
                                        </div>
                                    </th>
                                </aura:if>
                <!-- For End user start-->
                           </tr>
                        </aura:iteration>
</tbody>
</table>

enter image description here

After i clicked on search (without enterinf product and end user) enter image description here

6
  • Can you please attach a mock-up of the UI if you have it?
    – manjit5190
    Commented Mar 26, 2020 at 8:17
  • May be it sound silly. But what is a mock-up? Commented Mar 26, 2020 at 8:41
  • I have added the code for UI. which contain the table structure. Commented Mar 26, 2020 at 9:09
  • It not a stupid question. It means can you post a screenshot of the functionality of how you are building it or have envisioned it will look to users on the screen.
    – manjit5190
    Commented Mar 26, 2020 at 10:43
  • Got your point. Commented Mar 26, 2020 at 11:01

1 Answer 1

1

Since each record can have multiple child records, I would suggest going with the lightning:treeGrid component for showing the details. The top-level record will be of Price agreement and on expanding that you can show product details.

Something like the image below. I am suggesting this because that way it will handle all the UI for you and you can use Async loading variation of aura:treegrid to load child records.

You need to make 3 configurations for header and based on the Case 1/2/3, set the appropriate JSON in data and columns.

Advantages: -

  • You will have small components with distributed logic.
  • Minimal need of wrappers and complex processing in apex.

Tree Grid component

OR:

You can use the normal table like you are using, but on the click, open a modal to show the child records.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .