Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Karunat1Karunat1 

How can I show data in section in lightning?

In below screenshot:
User-added image

1) I am not able to see value in above section
table value should be shown in above section like:
In the table, We have 2 Rejected and 1 Accepted. These values should be shown in above. 
2) When I click on either accept or Reject button then status value should be change accordigly
I have created a component for this. How can i do this?
Narender Singh(Nads)Narender Singh(Nads)
Could you please share the code of your complete component bundle and its apex controller?
Karunat1Karunat1
Hi Narender,
Please check this
Component: 
<aura:component controller="ContactAuraController" implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="dealaction" type="Deal_Action__c"/>
    
    <aura:attribute name="cont" type="Contact"/>
    <aura:attribute name="DAList" type="object"/>
    <aura:attribute name="PageNumber" type="integer" default="1"/>
    <aura:attribute name="TotalPages" type="integer" default="0"/>
    <aura:attribute name="TotalRecords" type="integer" default="0"/>
    <aura:attribute name="RecordStart" type="integer" default="0"/>
    <aura:attribute name="RecordEnd" type="integer" default="0"/>
    <!--Section 1 Start-->
    <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionOne}">
        <section class="slds-clearfix">
            <div class="slds-float--left ">
                <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
            </div>
            <div class="slds-m-left--large" style="background-color: blue; color:White; padding:5px;"><h1>Today's Deal Summary</h1></div>
        </section>
    </div>
    
    <div class="slds-hide slds-p-around--medium" aura:id="articleOne">
        section one is ready.section one is ready.section one is ready.
        
    </div>
    <!--Section 1 End-->
    <!--Section 2 Start-->
    <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionTwo}">
        <section class="slds-clearfix">
            <div class="slds-float--left">
                <lightning:icon class="slds-show" aura:id="articleTwo" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                <lightning:icon class="slds-hide" aura:id="articleTwo" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
            </div>
            <div class="slds-m-left--large" style="background-color: blue; color:White;padding:5px;"><h1 style="padding-top:6px">Total Deal Summary</h1></div>
        </section>
    </div>
    <div class="slds-hide slds-p-around--medium" aura:id="articleTwo">
        <div>{!v.DAList}
            {!v.DAList}
            {!v.DAList.dealacceptcount}
            {!v.DAList.dealrejectcount}
           
            Acceptance Rate&nbsp;&nbsp;{!v.dealaction.Contact__r.Acceptance_Rate__c}<br/>
            Deals Accepted &nbsp;&nbsp;{!v.dealaction.Contact__r.Deals_Accepted__c}<br/>
            Deals Rejected &nbsp;&nbsp;{!v.dealaction.Contact__r.Deals_Rejected__c}<br/>
        </div>
    </div>
    <!--Section 2 End-->
    <!--Section 3 Start-->
    <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionThree}">
        <section class="slds-clearfix">
            <div class="slds-float--left ">
                <lightning:icon class="slds-show" aura:id="articleThree" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                <lightning:icon class="slds-hide" aura:id="articleThree" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
            </div>
            <div class="slds-m-left--large" style="background-color: blue; color:White;padding:5px;"><h1 style="padding-top:6px">Deals</h1></div>
        </section>
    </div>
    <div class="slds-hide slds-p-around--medium" aura:id="articleThree">
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col">
                        <strong><div class="slds-truncate" title="Action">Action</div></strong>
                    </th>
                    <th scope="col">
                        <strong><div class="slds-truncate" title="Status">status</div></strong>
                    </th>
                    <th scope="col">
                        <strong><div class="slds-truncate" title="Deal Name">Deal Name</div></strong>
                    </th>
                    <th scope="col">
                        <strong><div class="slds-truncate" title="Valid Through">Valid Through</div></strong>
                    </th>
                    <th scope="col">
                        <strong><div class="slds-truncate" title="Available Deals">Available Deals</div></strong>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.DAList}" var="da"> 
                    <tr>
                        <th scope="row" data-label="Action">
                            <div class="slds-truncate" title="Action">Action</div>
                            <lightning:button variant="brand" label="Accept" onclick="{!c.DealactionAccept}" aura:id="accept" value="{!da.Id}" disabled="{!or(da.Action__c =='Accepted', da.Action__c =='Rejected')}"/>&nbsp;&nbsp;
                            <lightning:button variant="brand" label="Reject" onclick="{!c.DealactionReject}" aura:id="reject" value="{!da.Id}" disabled="{!or(da.Action__c =='Accepted', da.Action__c =='Rejected')}"/>
                            
                        </th>
                        <th scope="row" data-label="Name">
                            <div class="slds-truncate" title="Status">{!da.Action__c}</div>
                        </th>
                        <th scope="row" data-label="Name">
                            <div class="slds-truncate" title="Deal Name">{!da.Deal__r.Name}</div>
                        </th>
                        <th scope="row" data-label="Phone">
                            <div class="slds-truncate" title="Valid Through">{!da.Deal__r.Valid_Through__c}</div>
                        </th>
                        <th scope="row" data-label="Email">
                            <div class="slds-truncate" title="Available Deals">{!da.Deal__r.Available_Deals__c}</div>
                        </th>
                    </tr>
                </aura:iteration> 
            </tbody>
        </table><br/>
        <div class="slds-float_right">
            <ui:inputSelect aura:id="pageSize" label="Display Records Per Page: " change="{!c.onSelectChange}">
                <ui:inputSelectOption text="10" label="10" value="true"/>
                <ui:inputSelectOption text="15" label="15"/>
                <ui:inputSelectOption text="20" label="20"/>
            </ui:inputSelect>
            <br/>
        </div>
        <br/>
        <div class="slds-clearfix">
            <div class="slds-page-header" role="banner">
                <div class="slds-float_right">            
                    <lightning:button disabled="{!v.PageNumber == 1}" variant="brand" aura:id="prevPage" label="Prev" onclick="{!c.handlePrev}" />            
                    <lightning:button disabled="{!v.PageNumber == v.TotalPages}" aura:id="nextPage" variant="brand" label="Next" onclick="{!c.handleNext}"/>
                </div>
                <p class="slds-page-header__title">{!v.RecordStart}-{!v.RecordEnd} of {!v.TotalRecords} | Page {!v.PageNumber} of {!v.TotalPages}</p>
            </div>
        </div>
        
    </div>
</aura:component>

Js controller: 
({
    doInit: function(component, event, helper) {
        var pageNumber = component.get("v.PageNumber");  
        var pageSize = component.find("pageSize").get("v.value"); 
        helper.getDAList(component, pageNumber, pageSize);
        helper.getcountdata(component, event);
    },
    DealactionAccept: function(component, event, helper){
        var acpt=component.find("accept");
        var whichOne = event.getSource().getLocalId();
        alert(whichOne);
        var rcdid= component.get("v.recordId");
        helper.DealactionAccept(component, event,helper,whichOne,rcdid);
    },
    DealactionReject: function(component, event, helper){
        helper.DealactionReject(component, event);
    },
    handleNext: function(component, event, helper) {
        var pageNumber = component.get("v.PageNumber");  
        var pageSize = component.find("pageSize").get("v.value");
        pageNumber++;
        helper.getDAList(component, pageNumber, pageSize);
    },
     
    handlePrev: function(component, event, helper) {
        var pageNumber = component.get("v.PageNumber");  
        var pageSize = component.find("pageSize").get("v.value");
        pageNumber--;
        helper.getDAList(component, pageNumber, pageSize);
    },
     
    onSelectChange: function(component, event, helper) {
        var page = 1
        var pageSize = component.find("pageSize").get("v.value");
        helper.getDAList(component, page, pageSize);
    },
    // this function call on section One
    sectionOne : function(component, event, helper) {
        helper.helperFun(component,event,'articleOne');
    },
    // this function call on section Two
    sectionTwo : function(component, event, helper) {
        helper.helperFun(component,event,'articleTwo');
    },
    // this function call on section Three
    sectionThree : function(component, event, helper) {
        helper.helperFun(component,event,'articleThree');
    },
})

Helper:
  
({
    helperFun : function(component,event,secId) {
        var findid = component.find(secId);
        for(var cmp in findid) {
            $A.util.toggleClass(findid[cmp], 'slds-show');  
            $A.util.toggleClass(findid[cmp], 'slds-hide');  
        }
    },
    DealactionAccept:function(component,event,helper,buttonName,contactId){
        //alert('Hello');
        var action = component.get("c.updateDeals");
        //contactid ,status var
        var dealActionId = event.getSource().get("v.value");
        alert(dealActionId);
        //console.log();
        action.setParams({
            "dealActionId":dealActionId,
            
        });
        
        action.setCallback(this, function(result) {
            var state = result.getState();
            
            if (component.isValid() && state === "SUCCESS"){
                var resultData = result.getReturnValue();
                component.set("v.dealaction",resultData);
            }
        });
        $A.enqueueAction(action);
    },
    DealactionReject:function(component,event){
        debugger;
        alert('Hello dealAction1Id ');
        var action = component.get("c.updateDealsreject");
        var dealAction1Id = event.getSource().get("v.value");
        //var dealActionRejId = event.getSource().get("v.value");
        alert(dealAction1Id);
        action.setParams({
            "dealAction1Id":dealAction1Id
        });
        
        action.setCallback(this, function(result) {
            var state = result.getState();
            
            if (component.isValid() && state === "SUCCESS"){
                var resultData = result.getReturnValue();
                console.log('result Data is= ',resultData);
                component.set("v.dealaction",resultData);
            }
        });
        $A.enqueueAction(action);
    },
    
    getcountdata:function(component,event){
        var action = component.get("c.getcountdata");
        var contactId = component.get("v.recordId");
        
        alert(contactId);
        action.setParams({
            "contactId":contactId
        });
        
        action.setCallback(this, function(result) {
            var state = result.getState();
            
            if (component.isValid() && state === "SUCCESS"){
                var resultData = result.getReturnValue();
                console.log('count Data is=');
                console.log(resultData);
                component.set("v.DAList",resultData);
            }
        });
        $A.enqueueAction(action);
    }
    ,
    getDAList: function(component, pageNumber, pageSize) {
        var action = component.get("c.getDAData");
        var recordId= component.get("v.recordId");
        action.setParams({
            "pageNumber": pageNumber,
            "pageSize": pageSize,
            "recordId":recordId
        });
        
        action.setCallback(this, function(result) {
            var state = result.getState();
            if (component.isValid() && state === "SUCCESS"){
                var resultData = result.getReturnValue();
                component.set("v.DAList", resultData.DAList);
                component.set("v.dealaction", resultData.DAList);
                console.log('----value', resultData.DAList);
                component.set("v.PageNumber", resultData.pageNumber);
                component.set("v.TotalRecords", resultData.totalRecords);
                component.set("v.RecordStart", resultData.recordStart);
                component.set("v.RecordEnd", resultData.recordEnd);
                component.set("v.TotalPages", Math.ceil(resultData.totalRecords / pageSize));
            }
        });
        $A.enqueueAction(action);
    }
})

Apex controller: 
public class ContactAuraController {
    @AuraEnabled
    public static ContactDataTableWrapper getDAData(Decimal pageNumber, Decimal pageSize, String recordId) {
        
        Integer pSize = (Integer)pageSize;
        Integer pNumber = (Integer)pageNumber;
        
        //Offset for SOQL
        Integer offset = (pNumber - 1) * pSize;
        
        //Total Records
        Integer totalRecords = [SELECT COUNT() FROM Deal_Action__c];
        Integer recordEnd = pSize * pNumber;
        
        //Instance of dealAction DataTable Wrapper Class
        ContactDataTableWrapper objDT =  new ContactDataTableWrapper();  
        objDT.pageSize = pSize;
        objDT.pageNumber = pNumber;
        objDT.recordStart = offset + 1;
        objDT.recordEnd = totalRecords >= recordEnd ? recordEnd : totalRecords;
        objDT.totalRecords = totalRecords;
        objDT.DAList = [SELECT Id,Action__c, Deal__r.Name, Deal__r.Valid_Through__c,Deal__r.Available_Deals__c,contact__r.Deals_Accepted__c,contact__r.Deals_Rejected__c from Deal_Action__c WHERE contact__c= :recordId LIMIT :pSize OFFSET :offset];
        
        //objDT.DAList=[];
        return objDT;
    }
    @AuraEnabled
    public static list<countwrapper> getcountdata(string contactId){
        List<contact> conlistObj= [Select id,Deals_Accepted__c,Deals_Rejected__c from contact where Id=:contactId];
        system.debug('conId'+contactId);
        List<countwrapper> cwrp=  new List<countwrapper>();
         if(conlistObj!= null && conlistObj.size()>0){
            
            Decimal dlAccept= conlistObj[0].Deals_Accepted__c;
            Decimal dlreject= conlistObj[0].Deals_Rejected__c;
            //contactObj.Deals_Accepted__c= dealActionObj[0].contact__r.Deals_Accepted__c;
            countwrapper returnval= new countwrapper();
            returnval.dealacceptcount=dlAccept;
            returnval.dealrejectcount=dlreject;
               cwrp.add(returnval);
        }
        return cwrp;
    }
    public class countwrapper{
        @AuraEnabled
        public Decimal dealacceptcount{get;set;}
        @AuraEnabled
        public Decimal dealrejectcount{get;set;}
    }
    // this method will calculate deal accept in 2nd section
    @AuraEnabled
    public static Deal_Action__c updateDeals(string dealActionId){
        List<Deal_Action__c> dealActionObj= [SELECT Id,Contact__c,contact__r.Acceptance_Rate__c, contact__r.Deals_Accepted__c,contact__r.Deals_Rejected__c,Action__c from Deal_Action__c WHERE ID =:dealActionId];
        if(dealActionObj!= null && dealActionObj.size()>0){
            Contact contactObj = new Contact(Id=dealActionObj[0].Contact__c);
            contactObj.Deals_Accepted__c= dealActionObj[0].contact__r.Deals_Accepted__c+1;
            dealActionObj[0].contact__r.Deals_Accepted__c+=1;
            dealActionObj[0].Action__c='Accepted';
            UPDATE contactObj;
            RETURN dealActionObj[0];
        }
        RETURN Null;
    }
    @AuraEnabled
    public static Deal_Action__c updateDealsreject(string dealAction1Id){
        List<Deal_Action__c> dealActionRejObj= [SELECT Id,Action__c,Contact__c,contact__r.Acceptance_Rate__c, contact__r.Deals_Accepted__c,contact__r.Deals_Rejected__c from Deal_Action__c WHERE ID =:dealAction1Id];
        System.debug('dealActionRejObj is:'+dealActionRejObj);
        if(dealActionRejObj!= null && dealActionRejObj.size()>0){
            Contact contactObj1 = new Contact(Id=dealActionRejObj[0].Contact__c);
            System.debug('contactObj1 is:'+contactObj1);
            contactObj1.Deals_Rejected__c= dealActionRejObj[0].contact__r.Deals_Rejected__c+1;
            System.debug('contactObj1 is:'+contactObj1);
            dealActionRejObj[0].contact__r.Deals_Rejected__c+=1;
            
            UPDATE contactObj1;
            System.debug('contactObj1 is:'+contactObj1);
            
            if(dealActionRejObj[0].Action__c=='Available' && dealActionRejObj.size()>0){
                Deal_Action__c dd= new Deal_Action__c();
                dealActionRejObj[0].Action__c='Rejected';
                UPDATE dealActionRejObj;
            }
            RETURN dealActionRejObj[0];
        }
        
        RETURN Null;
    }
    //Wrapper Class For Contact DataTable  
    public class ContactDataTableWrapper {
        @AuraEnabled
        public Integer pageSize {get;set;}
        @AuraEnabled
        public Integer pageNumber {get;set;}
        @AuraEnabled
        public Integer totalRecords {get;set;}
        @AuraEnabled
        public Integer recordStart {get;set;}
        @AuraEnabled
        public Integer recordEnd {get;set;}
        @AuraEnabled
        public Contact accept{get;set;}
        @AuraEnabled
        public Contact reject{get;set;}
        @AuraEnabled
        // deal action object
        public List<Deal_Action__c> DAList{get;set;}
        //deal object
        Public List<Deal__c> DList{get;set;}
        //contact object
        Public List<contact> conList{get;set;}
    }
}