Here we taking a simple example to see how to use force:recordData to create the record.
Put the below component in account record detail page.
createcomp.cmp
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global" >
<aura:attribute name="newContactRecord" type="Object"/>
<aura:attribute name="contactFieldsToQuery" type="Object"/>
<aura:attribute name="recordError" type="String"/>
<force:recordData aura:id="creatingContactRecordOnAccount"
layoutType="FULL"
mode="EDIT"
targetRecord="{!v.newContactRecord}"
targetFields="{!v.contactFieldsToQuery}"
targetError="{!v.recordError}"
/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!--We are using lightning card to display fields of account object-->
<lightning:card iconName="action:new_contact" title="Create Contact">
<div class="slds-p-horizontal--small">
<lightning:input label="First Name" value="{!v.contactFieldsToQuery.FirstName}"/>
<lightning:input label="Last Name" value="{!v.contactFieldsToQuery.LastName}"/>
<br/>
<lightning:button label="Create Contact" variant="brand" onclick="{!c.createContact}"/>
</div>
</lightning:card>
<!-- Display errors if exists -->
<aura:if isTrue="{!not(empty(v.recordError))}">
{!v.recordError}
</aura:if>
</aura:component>
createcompcontroller.js
({
doInit: function(component, event, helper) {
// getNewRecord loads a new record template that performs an insert when data is saved.
component.find("creatingContactRecordOnAccount").getNewRecord(
"Contact", // Specify Object (entityAPIName)
null, // recordTypeId
false, // skip cache?
$A.getCallback(function() {
var conRec = component.get("v.newContactRecord");
var error = component.get("v.recordError");
if(error || (conRec === null)) {
alert("Error in initializing template");
}
else {
alert("Template initialize succesfully");
}
})
);
},
createContact: function(component, event, helper) {
component.set("v.contactFieldsToQuery.AccountId", component.get("v.recordId"));
component.find("creatingContactRecordOnAccount").saveRecord(function(saveResult) {
// Handling state of response(SUCCESS,INCOMPLETE,ERROR)
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
alert("Changes saved successfully.");
}
else if (saveResult.state === "INCOMPLETE" ) {
alert("Error in saving record");
}
else if (saveResult.state === "ERROR") {
alert("Problem saving record, error:" +
JSON.stringify(saveResult.error));
}
else
{
alert('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
}
});
}
})
OUTPUT:
Put the below component in account record detail page.
createcomp.cmp
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global" >
<aura:attribute name="newContactRecord" type="Object"/>
<aura:attribute name="contactFieldsToQuery" type="Object"/>
<aura:attribute name="recordError" type="String"/>
<force:recordData aura:id="creatingContactRecordOnAccount"
layoutType="FULL"
mode="EDIT"
targetRecord="{!v.newContactRecord}"
targetFields="{!v.contactFieldsToQuery}"
targetError="{!v.recordError}"
/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!--We are using lightning card to display fields of account object-->
<lightning:card iconName="action:new_contact" title="Create Contact">
<div class="slds-p-horizontal--small">
<lightning:input label="First Name" value="{!v.contactFieldsToQuery.FirstName}"/>
<lightning:input label="Last Name" value="{!v.contactFieldsToQuery.LastName}"/>
<br/>
<lightning:button label="Create Contact" variant="brand" onclick="{!c.createContact}"/>
</div>
</lightning:card>
<!-- Display errors if exists -->
<aura:if isTrue="{!not(empty(v.recordError))}">
{!v.recordError}
</aura:if>
</aura:component>
createcompcontroller.js
({
doInit: function(component, event, helper) {
// getNewRecord loads a new record template that performs an insert when data is saved.
component.find("creatingContactRecordOnAccount").getNewRecord(
"Contact", // Specify Object (entityAPIName)
null, // recordTypeId
false, // skip cache?
$A.getCallback(function() {
var conRec = component.get("v.newContactRecord");
var error = component.get("v.recordError");
if(error || (conRec === null)) {
alert("Error in initializing template");
}
else {
alert("Template initialize succesfully");
}
})
);
},
createContact: function(component, event, helper) {
component.set("v.contactFieldsToQuery.AccountId", component.get("v.recordId"));
component.find("creatingContactRecordOnAccount").saveRecord(function(saveResult) {
// Handling state of response(SUCCESS,INCOMPLETE,ERROR)
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
alert("Changes saved successfully.");
}
else if (saveResult.state === "INCOMPLETE" ) {
alert("Error in saving record");
}
else if (saveResult.state === "ERROR") {
alert("Problem saving record, error:" +
JSON.stringify(saveResult.error));
}
else
{
alert('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
}
});
}
})
OUTPUT:
Can you please provide the scrolling and copy paste option
ReplyDelete