Select your Language

Display list of records with checkbox functionality in lightning component

Component:

<aura:component  controller ="Opplistclass"  access="global" >
    <aura:attribute name="Opportunities" type="List" />
    <aura:attribute name ="searchKeyword" type ="date"/>
    <aura:attribute name="enterday" type="integer" />
    <aura:attribute name="oppLists" type="list" /> 
    <aura:attribute name="isSelectAll" type="boolean" />
    <div class="slds-theme--shade">
        <lightning:layout >
            <!-- Based on closed date find Opportunity-->
            <lightning:layoutItem size="3" padding="around-small">
                <lightning:input value="{!v.searchKeyword}"
                                 placeholder="Enter close date.."
                                 aura:id="searchField"
                                 label="Enter Date"
                                 type="Date"/>
                <lightning:button onclick="{!c.doinit}"
                                  variant="brand"
                                  label="Search"
                                  iconName="utility:search"/>
            </lightning:layoutItem>
            <!-- Update closed based on enter days-->
            <lightning:layoutItem size="3" padding="around-small">
                <lightning:input value="{! v.enterday }"
                                 placeholder="Enter No of days to update.."
                                 aura:id="enterday"
                                 label="Enter Days"
                                 type="number"
                                 />
                <lightning:button onclick="{!c.update}"
                                  variant="brand"
                                  label="Update"
                               
                                  />
            </lightning:layoutItem>
        </lightning:layout>
    </div>
 
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />
    <table  class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
        <col width="80"/>
        <col width="80"/>
        <col width="150"/>
        <thead>
            <tr>
                <!-- CheckboxHeader for selecting all records's checkbox-->
                <th><ui:inputCheckbox   value="{!v.isSelectAll}" change="{!c.selectAllOpp}" aura:id="selectAll"/></th>
                <th>S.No.</th>
                <th>ID</th>
                <th>Opportunity Name</th>
                <th><div class="slds-truncate">Account Name</div></th>
                <th>Stage</th>
                <th>Probability</th>
                <th>Created Date</th>
                <th>Closed Date</th>
            </tr>
        </thead>
        <tbody>
            <!--Display records list -->
            <aura:iteration items="{!v.Opportunities}" var ="x" indexVar="Count">
                <tr>
                    <td><div class="slds-truncate" ><ui:inputCheckbox   aura:id="checkOpp"  change="{!c.selectOneOpp}"/></div></td>
                    <td ><div class="slds-truncate" >{!Count + 1}</div></td>
                    <td><div class="slds-truncate" >{!x.Id}</div></td>
                    <td><div class="slds-truncate" >{!x.Name} </div></td>
                    <td><div class="slds-truncate">{!x.Account.Name}</div></td>
                    <td>{!x.StageName}</td>
                    <td>{!x.Probability}</td>
                    <td><lightning:formattedDateTime  value="{!x.CreatedDate}" /></td>
                    <td>{!x.CloseDate}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

Client-Side Controller:


({
    doinit : function(component, event, helper)
    {
        var action= component.get("c.getOpplist");
        var a= component.get("v.searchKeyword");
        console.log('this is value ' + a);
        action.setParams({searchKeyword: a });
        var datevalue= component.find('searchField');
        action.setCallback(this, function(actionResult)
                           {
                               component.set('v.Opportunities',actionResult.getReturnValue());
                               console.log("resulting:"+actionResult.getReturnValue());
                           });
        $A.enqueueAction(action);
    },
    // updating selected records based on days
    update : function(component, event, helper)
    {
        var getId= component.get("v.Opportunities");
        var action2 =component.get("c.updateopp");
        var getCheckAllId = component.find("checkOpp");
        var selctedRec = [];
        for (var i = 0; i < getCheckAllId.length; i++)
        {
            if(getCheckAllId[i].get("v.value") == true )
            {
                console.log("value of selected id is "+getId[i].Id);
                selctedRec.push(getId[i].Id);
            }
        }
        //   alert("selected records is:"+selctedRec);
        var d=component.get("v.enterday");
        //  alert('this is days value:' + d);
        action2.setParams({days:d,abc:selctedRec});
        action2.setCallback(this, function(actionResult)
                            {
                                component.set('v.Opportunities',actionResult.getReturnValue());
                            });
        $A.enqueueAction(action2);
        // window.location.reload()
    },
    // If checkboxHeader is true then all records's checkbox true
    selectAllOpp : function(component, event, helper)
    {
        var getId= component.get("v.Opportunities");
        var checkValue = component.find("selectAll").get("v.value");
        var checkOpp = component.find("checkOpp");
        if(checkValue==true)
        {
            //alert("true");
            for(var i=0; i<checkOpp.length; i++)
            {
                checkOpp[i].set("v.value",true);
            }
        }
        else
        {
            // If checkboxHeader is false then all records's checkbox false
            // alert("false");
            for(var i=0; i<checkOpp.length;i++)
            {
                checkOpp[i].set("v.value",false);
            }
        }
    },
    // If record's checkbox is false then checkboxHeader will false
    selectOneOpp: function(component, event , helper)
    {
        var childCheckbox = event.getSource().get("v.value");
        if(childCheckbox==false)
        {
            component.set("v.isSelectAll",false);
        }
    }
})

Server-Side Controller:


public class Opplistclass
{
    // fatching the records based on selected closed date
 @AuraEnabled
    public static list<opportunity> getOpplist(date searchKeyword)
    {
        system.debug('date is'+searchKeyword);
        list<opportunity> opps = new list<opportunity>([select Id,Account.name,name,createddate ,probability,stageName,closeDate from opportunity where CloseDate <=:searchKeyword And IsClosed=False]);
        system.debug(opps);
        return opps;
    }
 
    // Updating the selected records clsoed date based on entered days
    @AuraEnabled
    public static list<opportunity> updateopp(integer days,list<string>abc)
    {
        system.debug('Days no '+days);
        system.debug('id are'+abc);
        list<opportunity> updatelist= new list<opportunity>();
        list<opportunity> opplist= new list<opportunity>([select id,account.name, name, createdDate,closedate from opportunity where id=:abc ]);
        for(opportunity o : opplist)
        {
            o.closedate = o.closedate + days;
            updatelist.add(o);
        }
        if(!updatelist.isEmpty())
        {
        update updatelist;
        }
        return updatelist;
    }

}



No comments:

Post a Comment