Creating an input form using the RecordEdit and Lightning input field components

The following component demonstrates an example of how you can use the Lightning:inputfield to collect user input and create a record in Salesforce. This component does not require Data Service or Apex controllers, as it can be obtained by using base components. Note that base components respect security settings configured by the Salesforce system administrator for fields and objects.

The component code for the recordEdit form is as follows:

<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome">
<aura:attribute name="companyName" type="String"/>
<Lightning:layout verticalAlign="start" multipleRows="true">
<Lightning:layoutItem flexibility="auto" padding="around-small">
<Lightning:recordEditForm aura:id="recordEditForm"
objectApiName="Lead" onsuccess="{!c.handleSuccess}" onsubmit="{!c.handleSubmit}" onload="{!c.handleOnload}">
<Lightning:messages />
<Lightning:inputField fieldName="Name" />
<Lightning:inputField fieldName="Company" />
<Lightning:inputField fieldName="Phone" />
<Lightning:button variant="brand" class="btn" type="submit" label="Create new lead" />
</Lightning:recordEditForm>
</Lightning:layoutItem>
</Lightning:layout>
</aura:component>

In the preceding code, the component requires a recordEditForm component and an input field for your user to enter into, followed by a Lightning:button of the type submit.

The controller code illustrates how to handle various events, such as submitting actions (onsubmit) and after successful actions (onsuccess):

({
handleSuccess : function(component, event, helper) {
console.log(event.getParams().response);
for (let key of Object.keys(event.getParams().response)) {
console.log(key + event.getParams().response[key]);
}
console.log(event.getParams().response.id);
//console.log(component.find("name").get("v.value"));
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"title": "Success!",
"message": "The record has been created successfully.",
"type": "success"
});
toastEvent.fire();
},

handleSubmit : function(component, event, helper) {
console.log('Submit Event' + JSON.stringify(event.getParams()));
console.log(component.find("company"));
//The following is useful if you want to overwrite.Notice you need to specify both the values.This also assumes you have aura:id on the company field.
//component.find("company").set("v.fieldName","Company");
//component.find("company").set("v.value","value");
},

handleOnload : function(component, event, helper) {
console.log('Load Event' + JSON.stringify(event.getParams()));
},
})

The following screenshot shows the screen for the component that we created using Lightning:recordEditForm:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.149.27.72