+ Start a Discussion
brahmanaidubrahmanaidu 

How to update the field values using checkbox in salesforce Lightning

<aura:component controller="ListAccounts">
  <aura:attribute name="accounts" type="List" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="accList" type="list"/>
  <!--
    Use a data table from the Lightning Design System:
    https://www.lightningdesignsystem.com/components/data-tables/
  -->
  <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="Select">Select</div></th>

        <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
        <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
        <th scope="col"><div class="slds-truncate" title="Site">Site</div></th>
       
      </tr>
    </thead>
    <tbody>
      <!-- Use the Apex model and controller to fetch server side data -->
      <aura:iteration items="{!v.accounts}" var="account">
        <tr>
          <th scope="row">
              <ui:inputCheckbox />
            </th>

          <th scope="row"><div class="slds-truncate" title="{!account.Id}">{!account.Id}</div></th>
          <td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
          <td><div class="slds-truncate" title="{!account.Site}">{!account.Site}</div></td>
          
          <td>
            
          </td>
        </tr>
      </aura:iteration>
        <ui:button label="Aprove" press="{!c.approve}"/>
    </tbody>
  </table>
</aura:component>



({
  // Fetch the accounts from the Apex controller
  doInit: function(component,event,helper) {
    var action = component.get('c.getAccounts');
    // Set up the callback
    var self = this;
    action.setCallback(this, function(actionResult) {
     component.set('v.accounts', actionResult.getReturnValue());
    });
    $A.enqueueAction(action);
  },
    approve: function(component,event,helper) {
    var a = component.get('c.getApproved');
        console.log('checking the status');
        a.setCallback(this, function(response) {
     component.set('v.accList', response.getReturnValue());
    });
    $A.enqueueAction(a);
    
    },
    
})









public class ListAccounts {
  @AuraEnabled
  public static List<Account> getAccounts() {
    return [SELECT Id, name,site from Account Limit 6];
  }
    @AuraEnabled
    public static  void getApproved(){
        List<Account> accs=[select Id,Name,Site from Account];
        for(Account a:accs){
            a.Site='Approved';
        }
        
        
        
    }
    
}












 
Best Answer chosen by brahmanaidu
sfdcMonkey.comsfdcMonkey.com
HI try below sample code :
apex class
public class updateSiteAC {
    @AuraEnabled
    public static list < Account > fetchAccount() {
       return [SELECT Id, name,site from Account Limit 6];
    }
    
     @AuraEnabled
    public static void updateRecord(List < String > lstRecordId) {
        List<account> lstAccToUpdate = new List<account>();
        for(account acc : [select id,Name,site from account where id IN : lstRecordId]){
            acc.site = 'Approved';
            lstAccToUpdate.add(acc);
        }
        
        if(lstAccToUpdate.size() > 0){
            update lstAccToUpdate;
        }
        
    }
}
lightning component :
<aura:component controller="updateSiteAC">
   
    <aura:attribute name="ListOfAccount" type="list" />
   
    <aura:handler name="init" value="{!this}" action="{!c.loadAccountList}"/>
    
    <div class="slds-grid slds-grid--align-end"> 
        <button class="slds-button slds-button--brand" onclick="{!c.upadateSite}">Update site</button>
    </div>
    
    
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
            <tr class="slds-text-title--caps">
                <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 class="slds-checkbox--faux"></span>
                                <span class="slds-form-element__label text"></span>
                            </label>
                        </div>
                    </div>
                </th>
                <th>
                    <span class="slds-truncate">ID</span>      
                </th>
                <th>
                    <span class="slds-truncate">Name</span>
                </th>
                <th>       
                    <span class="slds-truncate">Site</span>
                </th>
            </tr>
        </thead>
        
        <tbody>
            <aura:iteration items="{!v.ListOfAccount}" var="acc">
                <tr>
                    <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="{!acc.Id}" aura:id="boxPack" value=""/>
                                    <span class="slds-checkbox--faux"></span>
                                    <span class="slds-form-element__label text"></span>
                                </label>
                            </div>
                        </div>
                    </td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!acc.Id}"><a>{!acc.Id}</a></div>
                    </td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!acc.Name}">{!acc.Name}</div>
                    </td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!acc.Site}">{!acc.Site}</div>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

javaScript controller :
({
    loadAccountList: function(component, event, helper) {
        helper.onLoad(component, event);
    },
    
    
    
    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);
                }
            } 
        }  
        
    },
    
    
    upadateSite: 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"));
                }
            }
        } 
        
        helper.SelectedHelper(component, event, updateId);
        
    },
    
})
helper js
({
    onLoad: function(component, event) {
        var action = component.get('c.fetchAccount');
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.ListOfAccount', response.getReturnValue());
                component.find("box3").set("v.value", false);
            }
        });
        $A.enqueueAction(action);
    },
    
    SelectedHelper: function(component, event, RecordsIds) {
        
        var action = component.get('c.updateRecord');
        action.setParams({
            "lstRecordId": RecordsIds
        });
        action.setCallback(this, function(response) {
            
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(state);
                this.onLoad(component, event);
            }
        });
        $A.enqueueAction(action);
    },
})

test app :
<aura:application extends="force:slds">
  < c:updateSite/>
</aura:application>
Thanks
let us know if it helps you
sfdcMonkey.com

for refrence : http://sfdcmonkey.com/2017/02/23/delete-multiple-records-using-checkbox-lightning-component/




 

All Answers

brahmanaidubrahmanaidu
I want to update the field value of an account record when the user clicks on a button
sfdcMonkey.comsfdcMonkey.com
HI try below sample code :
apex class
public class updateSiteAC {
    @AuraEnabled
    public static list < Account > fetchAccount() {
       return [SELECT Id, name,site from Account Limit 6];
    }
    
     @AuraEnabled
    public static void updateRecord(List < String > lstRecordId) {
        List<account> lstAccToUpdate = new List<account>();
        for(account acc : [select id,Name,site from account where id IN : lstRecordId]){
            acc.site = 'Approved';
            lstAccToUpdate.add(acc);
        }
        
        if(lstAccToUpdate.size() > 0){
            update lstAccToUpdate;
        }
        
    }
}
lightning component :
<aura:component controller="updateSiteAC">
   
    <aura:attribute name="ListOfAccount" type="list" />
   
    <aura:handler name="init" value="{!this}" action="{!c.loadAccountList}"/>
    
    <div class="slds-grid slds-grid--align-end"> 
        <button class="slds-button slds-button--brand" onclick="{!c.upadateSite}">Update site</button>
    </div>
    
    
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
            <tr class="slds-text-title--caps">
                <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 class="slds-checkbox--faux"></span>
                                <span class="slds-form-element__label text"></span>
                            </label>
                        </div>
                    </div>
                </th>
                <th>
                    <span class="slds-truncate">ID</span>      
                </th>
                <th>
                    <span class="slds-truncate">Name</span>
                </th>
                <th>       
                    <span class="slds-truncate">Site</span>
                </th>
            </tr>
        </thead>
        
        <tbody>
            <aura:iteration items="{!v.ListOfAccount}" var="acc">
                <tr>
                    <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="{!acc.Id}" aura:id="boxPack" value=""/>
                                    <span class="slds-checkbox--faux"></span>
                                    <span class="slds-form-element__label text"></span>
                                </label>
                            </div>
                        </div>
                    </td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!acc.Id}"><a>{!acc.Id}</a></div>
                    </td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!acc.Name}">{!acc.Name}</div>
                    </td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!acc.Site}">{!acc.Site}</div>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

javaScript controller :
({
    loadAccountList: function(component, event, helper) {
        helper.onLoad(component, event);
    },
    
    
    
    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);
                }
            } 
        }  
        
    },
    
    
    upadateSite: 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"));
                }
            }
        } 
        
        helper.SelectedHelper(component, event, updateId);
        
    },
    
})
helper js
({
    onLoad: function(component, event) {
        var action = component.get('c.fetchAccount');
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.ListOfAccount', response.getReturnValue());
                component.find("box3").set("v.value", false);
            }
        });
        $A.enqueueAction(action);
    },
    
    SelectedHelper: function(component, event, RecordsIds) {
        
        var action = component.get('c.updateRecord');
        action.setParams({
            "lstRecordId": RecordsIds
        });
        action.setCallback(this, function(response) {
            
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(state);
                this.onLoad(component, event);
            }
        });
        $A.enqueueAction(action);
    },
})

test app :
<aura:application extends="force:slds">
  < c:updateSite/>
</aura:application>
Thanks
let us know if it helps you
sfdcMonkey.com

for refrence : http://sfdcmonkey.com/2017/02/23/delete-multiple-records-using-checkbox-lightning-component/




 
This was selected as the best answer
Renuka SharmaRenuka Sharma
Hello Guys

i am refering to this thread, i am stuck

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,  That is, (Snapshot 1)  when I click on Update Attendance button, a check box is checked in a student object (Snapshot 2) and it Is also checked in child object called Attendance__c and Related Record Gets created (Snapshot 3)
Now I want to put another button called as Update Absentee button, when I click this button, Checkbox should get updated in the Student object named (Check for Absentee__c) and related record should get created and it should not get updated in attendance custom object,

Can anyone please help regarding this issue
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;
        }
    }
}

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>
ManjuDisplayContactsController.js

({
    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);
    },
})

User-added image

User-added image

snapshot3