Lightning Component: Show check boxes for a records list and display selected record

Lets take an example to show check boxes for a records list and display selected record in an alert box.

To show check boxes for a list view, we will first display dummy data of 5 contacts in our component.

Let’s create an apex class to query 5 random contacts for our component:

public class contactcontroller {
       @AuraEnabled
       public static List<Contact>  getcontacts() {
         return [SELECT Id, name FROM Contact limit 5];
       }
}

Next we will display the above contacts in our component:

<aura:component controller="contactcontroller" implements="force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes" access="global">
<!-- List to store contacts data -->
<aura:attribute name="Contacts" type="List" />
<!-- Initialization method calls controller to get data -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
 <div class="slds-col"></div>
<!--tabular data -->
<table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
<thead>
<tr class="slds-text-heading_label">
<th scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
</tr>
</thead>
<tbody>
 <!-- Use the Apex model and controller to fetch server side data -->
<aura:iteration items="{!v.Contacts}" var="Contact">
<tr>  
<th scope="row">
<div class="slds-truncate" title="{!Contact.Name}">
<!-- Contact name is linked to the Salesforce record page -->
<a href="{!'/lightning/r/Contact/'+ Contact.Id + '/view'}" target="_blank">{!Contact.Name}</a></div>
</th>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>

And the JS controller:

({
    doInit: function(component, event, helper){
helper.getcontacts(component, event, helper);
 }
})

This is how my component looks like:

Lightning Component: Show check boxes for a records list and display selected record

To display check boxes, we will add the below line after line 11 in our component.

<th> <ui:inputCheckbox aura:id="selectAll" change="{!c.SelectAllCheck}"/>   </th>

This line should be added just below “<tr class=”slds-text-heading_label”>”. Also add the SelectAllCheck function to the controller. When we change the header check box, the above function changes the check boxes of all the rows.

Add the next line after line 23 in the component:

<th>
<ui:inputCheckbox aura:id="checkContacts" value="" text="{!Contact.Name}"/>
</th>

Once the component is saved, it will look like below screen shot:

Lightning Component: Show check boxes for a records list and display selected record

Add code for “SelectAllCheck” in the JS controller:

SelectAllCheck:function(component,event,helper){
            var getID = component.get("v.Contacts");
        var checkvalue = component.find("selectAll").get("v.value");   
           
        var checkContacts=component.find("checkContacts"); 
           var len=checkContacts.length;
           
        if(checkvalue == true){
               if(len == 1){
       checkContacts.set("v.value",true);
     }else{
        for (var i = 0; i<len; i++){
            checkContacts[i].set("v.value",true);
        }
      }
    }
           else{
                if(len == 1){
       checkContacts.set("v.value",false);
     }else{
        for (var i = 0; i<len; i++){
            checkContacts[i].set("v.value",false);
        }
     } 
    }
 }

After saving the controller, reload the component. You should now be able to select/un-select all rows by clicking on the header checkbox.

Next add a button to the component:

<lightning:button variant="neutral" 
                                          label="Show Alert"
                                          title="Show Alert"
                                          onclick="{!c.ShowAlert}"/>

Add this just after the table tag ends. Also add the function for ShowAlert in the controller:

  ShowAlert:function(component,event,helper){
        
        var checkContacts=component.find("checkContacts");
       var ln=checkContacts.length

        for(var i=0;i<ln;i++)
       {
             var v= checkContacts[i].get("v.value");
           if(v==true)  
           {
           var context=context.concat(checkContacts[i].get("v.text"),' ');
           }  
       }
       alert(context);
              
    }

Now when you select any row(s), and click on the Show Alert button, the selected contact names will be shown in the alert window.

We can further use the above to take actions on selected rows such as send email or start an approval process.

Also read: https://initaura.com/lightning-component-step-by-step-guide-to-display-records/

Checkbox group can also be used: https://developer.salesforce.com/docs/component-library/bundle/lightning:checkboxGroup/example

Leave a Reply

Your email address will not be published. Required fields are marked *