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.");
                }               
            }));
        }  
    }
})
  • can you format your code. Just select all code and press CTRL + K – Kiran Machhewar Nov 14 '17 at 7:17
  • Thank you for your reply and suggestions to format the code. I formatted the code now. Can you please let me know what is the issue – Kiruthika Nov 14 '17 at 7:25
up vote 1 down vote accepted

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());
            }
        });
    }
})
  • 1
    Thank you so so much... for your answer which is working perfectly. you are awesome. – Kiruthika Nov 14 '17 at 10:06
  • @Kiruthika please mark this answer as accepted – Itai Shmida Nov 15 '17 at 6:57

I think I've read that you should avoid using LDS with lists as it is very inefficient (link below). Also I see you calling the servers' getAllEnvironments, so it would seem you've combined two different ways getting data from SF, you're really not using LDS it the way it was originally designed.

How efficient is Lightning Data Service when working with multiple records?.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.