Hey guys, today in this post we are going to learn about How to create a form and submit on database in Salesforce lightning component.
We will be achieve to validate a form and submit into custom sObject in Salesforce.
We used the files in this example:-
| File Name | File Type | Description |
|---|---|---|
| submitFormCustomObjectCmp.cmp | Lightning Component | It is hold User Interface (UI) tags and display on the browser. |
| submitFormCustomObjectCmpController.js | JavaScript File | It is used for form validation and javascript function to call a apex class method. |
| submitFormCustomObjectCmp.css | Style CSS File | For alignment and form validation input border color. |
| submitFormCustomObjectController.apex | Apex Class Controller | For create a record in database server |
|
Custom Object:- student_info__c Custom Object Fields:- student_first_name__c student_last_name__c student_phone__c student_email__c
|
Custom Object and their fields | Custom object like database and custom fields are column of data table. |
Other related post that would you like to learn…
Step:-1
submitFormCustomObjectCmp.cmp [Lightning Component]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<aura:component controller="submitFormCustomObjectController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="studentInfoAc" type="student_info__c" default="{'sobjectType': 'student_info__c'}"/> <aura:attribute name="studentItrt" type="student_info__c[]"/> <div class="slds"> <div class="slds-col slds-size_6-of-12 slds-m-bottom--small"> <div class="slds-form-element"> <label class="slds-form-element__label">First Name</label> <div class="slds-form-element__controller"><ui:inputText aura:id="fName" value="{!v.studentInfoAc.student_first_name__c}" class="slds-input" placeholder=""/></div> </div> </div> <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_6-of-12 slds-m-bottom--small"> <div class="slds-form-element"> <label class="slds-form-element__label">Last Name</label> <div class="slds-form-element__controller"> <ui:inputText aura:id="lName" value="{!v.studentInfoAc.student_last_name__c}" class="slds-input" placeholder=""/> </div> </div> </div> </div> <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_6-of-12 slds-m-bottom--small"> <div class="slds-form-element"> <label class="slds-form-element__label">Phone</label> <div class="slds-form-element__controller"> <ui:inputText aura:id="phone" value="{!v.studentInfoAc.student_phone__c}" class="slds-input" placeholder=""/> </div> </div> </div> </div> <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_6-of-12 slds-m-bottom--small"> <div class="slds-form-element"> <label class="slds-form-element__label">Email</label> <div class="slds-form-element__controller"> <ui:inputText aura:id="emailId" value="{!v.studentInfoAc.student_email__c}" class="slds-input" placeholder=""/> </div> </div> </div> </div> <div class="slds-text-align--center slds-m-top--medium"> <button class="slds-button slds-button--brand" onclick="{!c.submitStudentInfo}">Submit</button> </div> </div> </aura:component> |
Step:-2
submitFormCustomObjectCmpController.js [JavaScript File]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
({ submitStudentInfo : function(component, event, helper) { var isValidate = true; var firstName = component.find('fName'); var firstNameVal = component.find('fName').get('v.value'); if($A.util.isUndefinedOrNull(firstNameVal) || $A.util.isUndefined(firstNameVal) || $A.util.isEmpty(firstNameVal)){ firstName.set("v.errors",[{message:'First Name is required'}]); isValidate = false; }else{ firstName.set("v.errors",null); } if(isValidate){ var action = component.get('c.getStudent'); var postData = component.get('v.studentInfoAc'); action.setParams({"insertStudent": postData}); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { var stringItems = response.getReturnValue(); component.set("v.studentItrt",stringItems); component.set("v.studentInfoAc", null); //Show the success toast message var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ "title":"Success", "type":"success", "message":"Form submitted successfully.", }); toastEvent.fire(); } }); $A.enqueueAction(action); } }, }) |
Step:-3
submitFormCustomObjectCmp.css [Style CSS File]
|
1 2 3 4 5 6 7 8 |
.THIS { } .THIS .slds-input.has-error, .THIS .slds-select.has-error { background-color: rgb(255, 255, 255); border-color: rgb(194, 57, 52); box-shadow: rgb(194, 57, 52) 0 0 0 1px inset; background-clip: padding-box; } |
Step:-4
submitFormCustomObjectController.apex [Apex Class Controller]
|
1 2 3 4 5 6 7 8 9 10 |
public class submitFormCustomObjectController { @AuraEnabled public static List<student_info__c> getStudent(student_info__c insertStudent){ insert insertStudent; return [select Id, student_first_name__c,student_last_name__c,student_phone__c from student_info__c]; } } |
Related further post that you want to learn……
