+ Start a Discussion
Renuka SharmaRenuka Sharma 

Lightning component with checkboxes to update 2 seperate button Component

Hello Guys

I need a small Help

I am working on a Education project, I have four custom objects, Student__c, Class__c, course__c,Attandence__c
The first part is working fine,  in a class related list(Snapshot 1)  when I click on Update Attendance, a check box is checked in a student object (Snapshot 2) and it Is checked in child object Attendance object and Related Record Gets created (Snapshot 3)
Now I want to put another button called as Update Absentee, when I click this button, Checkbox should get updated in the Student object named (Check for Absentee) and related record should get created and it should not get updated in attendance custom object,
User-added image

User-added image
User-added image
 
Renuka SharmaRenuka Sharma
i have used 2 links for my requirement and developed my own code

Updateusingcheckbox.apex

public class UpdateUsingCheckboxC {
   
    @AuraEnabled
    public static List <Contact> fetchContact(string key) {
        system.debug('classname'+key);
        Class__c cls = [select id,Courses__r.name from Class__c where id=:key];
        string classname = cls.Courses__r.name;
        system.debug('classname'+classname);
        return [SELECT Id, Name,Account.Name,FirstName,LastName,Check_for_Attendance__c FROM Contact where Check_for_Attendance__c=false AND Account.Name =:classname];
    }
   
    @AuraEnabled
    public static void updateRecord(List <String> lstRecordId,string key) {
        List<Contact> lstUpdate = new List<Contact>();
        List<Attendancess__c> listAttendnce = new List<Attendancess__c>();
        Class__c cls = [select id,Courses__r.name from Class__c where id=:key];
        for(Contact con : [SELECT Id,AccountId, Name,Phone,FirstName,LastName,Check_for_Attendance__c  FROM Contact WHERE Id IN : lstRecordId]){
            con.Check_for_Attendance__c = true;
            lstUpdate.add(con);  
            Attendancess__c attandenc = new Attendancess__c();
            attandenc.Class__c = cls.Id;
            attandenc.Student_Attended__c = true;
            attandenc.Name = con.Name;
            attandenc.Created_Date_Time__c = system.now();
            listAttendnce.add(attandenc);
            system.debug('listAttendnce'+listAttendnce);
        }
        if(lstUpdate.size() > 0){
            update lstUpdate;
        }
        if(listAttendnce.size() > 0){
            insert listAttendnce;
        }
    }
}
 
Renuka SharmaRenuka Sharma
This is my Component

ManjuDisplayContacts.cmp
<aura:component controller="UpdateUsingCheckboxC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="ContactList" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.loadContacts}"/>
    <aura:handler event="force:refreshView" action="{!c.loadContacts}" />
    <div class="slds-grid slds-grid--align-end">
        <button class="slds-button slds-button--brand" onclick="{!c.updateFields}">Update Attendance</button>
    </div>
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
            <tr class="slds-text-title--caps">
                <th></th>
                <th></th>
                <th>
                    <span class="slds-truncate">Attendee</span>     
                </th>
                <th style="width:3.25rem;" class="slds-text-align--right">
                    <div class="slds-form-element">
                        <div class="slds-form-element__control">
                            <label class="slds-checkbox">
                                <!--header checkbox for select all-->
                                <ui:inputCheckbox aura:id="box3" change="{!c.selectAll}"/>
                                <span >Attended</span>
                                <span class="slds-form-element__label text"></span>
                            </label>
                        </div>
                    </div>
                </th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.ContactList}" var="con">
                <tr>
                    <td></td>
                    <td></td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!con.Name}"><a>{!con.Name}</a></div>
                    </td>
                    
                   
                    <td scope="row" class="slds-text-align--right" style="width:3.25rem;">
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <label class="slds-checkbox">
                                    <ui:inputCheckbox text="{!con.Id}" aura:id="boxPack" value=""/>
                                    <span class="slds-checkbox--faux"></span>
                                    <span class="slds-form-element__label text"></span>
                                </label>
                            </div>
                        </div>
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>
 
Renuka SharmaRenuka Sharma
this is my JS controller

({
    loadContacts: function(component, event, helper) {
        var rid = component.get("v.recordId");
        var action = component.get('c.fetchContact');
        action.setParams({key : rid});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.ContactList', response.getReturnValue());
                component.find("box3").set("v.value", false);
            }
        });
        $A.enqueueAction(action);
    },
    
    selectAll: function(component, event, helper) {
        var selectedHeaderCheck = event.getSource().get("v.value");
        var getAllId = component.find("boxPack"); 
        if(! Array.isArray(getAllId)){
            if(selectedHeaderCheck == true){ 
                component.find("boxPack").set("v.value", true);    
            }else{
                component.find("boxPack").set("v.value", false);
            }
        }else{
            // check if select all (header checkbox) is true then true all checkboxes on table in a for loop  
            // and set the all selected checkbox length in selectedCount attribute.
            // if value is false then make all checkboxes false in else part with play for loop 
            // and select count as 0
            if (selectedHeaderCheck == true) {
                for (var i = 0; i < getAllId.length; i++) {
                    component.find("boxPack")[i].set("v.value", true);
                }
            } else {
                for (var i = 0; i < getAllId.length; i++) {
                    component.find("boxPack")[i].set("v.value", false);
                }
            } 
        }  
    },
    
    updateFields: function(component, event, helper) {
        var updateId = [];
        var getAllId = component.find("boxPack");
        
        if(! Array.isArray(getAllId)){
            if (getAllId.get("v.value") == true) {
                updateId.push(getAllId.get("v.text"));
            }
        }else{
            
            for (var i = 0; i < getAllId.length; i++) {
                if (getAllId[i].get("v.value") == true) {
                    updateId.push(getAllId[i].get("v.text"));
                }
            }
        } 
        var rid = component.get("v.recordId");
        var action = component.get('c.updateRecord');
        action.setParams({
            "lstRecordId": updateId,
            "key" : rid
        });
        action.setCallback(this, function(response) {
            
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(state);
                $A.get('e.force:refreshView').fire();
            }
        });
        $A.enqueueAction(action);
    },
    
})