[SalesForce] In not able to set it’s recordId Attribute from client-side controller

Whenever I click on the <lightning:button> inside <aura:iteration>, I need to delete that particular record using <force:recordData> but When I click on <lightning:button>, the envId is coming to the component but not going into <force:recordData recordId="{!v.envId}>,

so I am getting error as "Uncaught Action failed:

force:recordData$controller$deleteRecord [Must load record in
force:recordData before delete.]"

<aura:component controller="SampleClass">
      <aura:attribute name="sfEnv" type="List" />
      <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
      <aura:attribute name="envId" type="String"/>
      <force:recordData aura:id="deleteHandler" 
                        recordId="{!v.envId}" <!--Id not coming here -->
                        fields="Id"
       />
      <aura:iteration items="{!v.sfEnv}" var="env" >                                        
           <lightning:button iconName="utility:delete" value="{!env.Id}" 
                      onclick="{!c.handleDeleteRecord}" variant="base"/>
      </aura:iteration><br/><br/>
      {!v.envId}  <!--Id coming here-->
</aura:component>

JS Controller 

({
 doInit : function(component, event, helper) {
        var action = component.get("c.getAllEnvironments");
         $A.enqueueAction(action);
        action.setCallback(this,function(response){
            if(response.getState() == "SUCCESS"){
                component.set("v.sfEnv",response.getReturnValue());
            }
        });
},
handleDeleteRecord: function(component, event, helper) {
        component.set("v.envId",event.getSource().get("v.value"));
        var result = confirm("Want to delete?");
        if (result) {
                 component.find("deleteHandler").deleteRecord($A.getCallback(function(deleteResult) {
                if (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") {
                    alert("Record is deleted.");
                }               
            }));
        }  
    }
})

Best Answer

There are couple of changes you need to make in order to work it:

  1. use reloadRecord() Method so that force:recordData can understand your assignment.

  2. Use recordUpdated attribute in force:recordData to get notify of change

So your code will look like this

component

<aura:component controller="SampleClass">
    <aura:attribute name="sfEnv" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
    <aura:attribute name="envId" type="String"/>

    <force:recordData aura:id="deleteHandler" 
                      recordId="{!v.envId}" fields="Id" recordUpdated="{!c.recordUpdated}"/>

    <aura:iteration items="{!v.sfEnv}" var="env" > 
        <lightning:button iconName="utility:delete" value="{!env.Id}" 
                          onclick="{!c.handleDeleteRecord}" variant="base"/>
    </aura:iteration>
    {!v.envId}  <!--Id coming here-->
</aura:component>

Js controller

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

        component.find("deleteHandler").deleteRecord($A.getCallback(function(deleteResult) {
            if (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") {
                helper.helperMethod(component);
                alert("Record is deleted.");
            }               
        }));
    },
    handleDeleteRecord: function(component, event, helper) {
        var result = confirm("Want to delete?");
        if (result) {
            component.set("v.envId",event.getSource().get("v.value"));
            component.find("deleteHandler").reloadRecord();
        }
    }
})

helper method (to reload remaining records)

({
    helperMethod : function(component) {
        var action = component.get("c.getAllEnvironments");
        $A.enqueueAction(action);
        action.setCallback(this,function(response){
            if(response.getState() == "SUCCESS"){
                component.set("v.sfEnv",response.getReturnValue());
            }
        });
    }
})
Related Topic