When does force:recordData execute?
I am using force:recordData to pull data for a Campaign on load of the component. The component is triggered by a quick action. I understand that force:record Data is an asynchronous process. However does it execute as soon as the component that contains it loads?
I am getting inconsistent results.
Here's the code that I have in my component:
recordId="{!v.recordId}"
targetRecord ="{!v.record}"
targetFields="{!v.simpleRecord}"
fields="Id, Name"/>onclick="{!c.testMethod}"/>
My JS controller:
({
testMethod: function(component, event, helper) {
console.log('Record Id:');
console.log(component.get("v.recordId"));
console.log('Record:');
console.log(component.get("v.record"));
}
})
I got the recordId but I can't see the record. What am I doing wrong?
Sometimes in the console I would get Proxy{} with a [[Handler]] and [[Target]] where the [[Target]] would hold the information about the campaign.Other times the [[Target]] would come in as blank only holding a proto no matter how long I wait before I press the button.Why is this happening?
In order to correctly output a log of anything force:recordData does, you need to wait for it to resolve fully. Luckily, we have an attribute we can listen to, the recordUpdated attribute.
This should work:
Component
Controller
handleRecordChanged: function(component, event, helper) {
switch(event.getParams().changeType) {
case "ERROR":
// handle error
break;
case "LOADED":
console.log(JSON.parse(JSON.stringify(component.get("v.record"))));
console.log(JSON.parse(JSON.stringify(component.get("v.simpleRecord"))));
console.log(component.get("v.simpleRecord")["Name"]);
break;
case "REMOVED":
// stuff
break;
case "CHANGED":
// more stuff
break;
}
}
FYI, you can debug properties like this: component.get("v.simpleRecord")["Name"]