Lightning Data Service - Update Field on Button Click

Question

I am new to lightning components and am trying to get a button in lightning to update a checkbox on a contact record(Send_to_IFS__c) when the button is clicked. Below is what i have but it is not updating the field or exiting the quick action. Any help or a point in the right direction would be appreciated

CMP

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" >

    <aura:attribute name="contact" type="Object"/>
    <aura:attribute name="contactRecord" type="Object" default="{'sobjectType':'Contact', 'Send_to_IFS__c' : ''}"/>
    <aura:attribute name="recordSaveError" type="String" description="An error message bound to force:recordData"/>

  <force:recordData aura:id="conRec" 
    fields="Send_to_IFS__c"
    recordId="{!v.recordId}"  
    targetError="{!v.recordSaveError}"
    targetRecord="{!v.contact}"
    targetFields="{!v.contactRecord}"
    mode="EDIT"

                    />

    <aura:handler name="init" value="{!this}" action="{!c.handleClick}"/>



 <aura:if isTrue="{!not(empty(v.recordSaveError))}">
           <br />
        <div class="error slds-box">
             {!v.recordSaveError}
        </div> 
    </aura:if>


</aura:component>

Controller

    ({
    handleClick: function(component, event, helper){
        helper.saveContact(component, event, helper);
    },

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

Helper

({
saveContact : function(component, event, helper) {
    component.set("v.contactRecord.Send_to_IFS__c", true);
    component.find("conRec").saveRecord($A.getCallback(function(saveResult) {
        if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
            alert("Save completed successfully.");
        } else if (saveResult.state === "INCOMPLETE") {
            component.set("v.recordSaveError","User is offline, device doesn't support drafts.");
        } else if (saveResult.state === "ERROR") { 
            var errMsg = "";
            // saveResult.error is an array of errors, 
            // so collect all errors into one message
            for (var i = 0; i < saveResult.error.length; i++) {
                errMsg += saveResult.error[i].message + "\n";
            }
            component.set("v.recordSaveError", errMsg);

        } else {
            component.set("v.recordSaveError",'Unknown problem, state: ' + saveResult.state + ', error: ' + 
              JSON.stringify(saveResult.error));
        }
    }));

    $A.get("e.force:closeQuickAction").fire();  
},

recordUpdated : function(component, event, helper){
    var changeType = event.getParams().changeType;
    if (changeType === "CHANGED") {
        component.find("conRec").reloadRecord();
    }
}


})

Answer 1

Why do you even need lightning component here. Looks to me like all you're doing here is just updating a field value on contact.

You can Create Object-Specific Quick Actions and use update a record action instead of lightning component to update the checkbox field.

UPDATE BASED ON COMMENTS:

1. Instead of using init to get data from Lightning Data Service I would change it to change handler as I had faced issues with data fetching at init event from LDS, something like below.

   <aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" >
   
   
   <aura:attribute name="contact" type="Object"/>
   <aura:attribute name="contactRecord" type="Object" default="{'sobjectType':'Contact', 'cokePOC__TestBox__c' : ''}"/>
   
   <aura:attribute name="recordSaveError" type="String" description="An error message bound to force:recordData"/>
   
   <aura:handler name="change" value="{!v.contactRecord}" 
                 action="{!c.handleClick}"/>
   
   <force:recordData aura:id="conRec" 
                     fields="cokePOC__TestBox__c"
                     recordId="{!v.recordId}"  
                     targetError="{!v.recordSaveError}"
                     targetRecord="{!v.contact}"
                     targetFields="{!v.contactRecord}"
                     mode="EDIT"
   
                     />
   
   <aura:handler name="init" value="{!this}" action="{!c.onload}"/>
   
   
   
   <aura:if isTrue="{!not(empty(v.recordSaveError))}">
       <br />
       <div class="error slds-box">
           {!v.recordSaveError}
       </div> 
   </aura:if>
   

ControllerJS:

({
    onload: function(component, event, helper){

    },
    handleClick: function(component, event, helper){
        helper.saveContact(component, event, helper);
    },

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