Building a Sign-up Form with Lightning Components (Part 1)

Hello All!

It’s been a while since I wrote a new post, however, I am back with a multi-part series focusing on building a sign-up form using Lightning components that will create Lead records. The form will allow sign-up of multiple people on the same form and create a lead record each person’s data entered. In this post I will focus on the following:

• Creating a lightning app that will contain all components used for the sign-up form.
• Creating a lightning component that will allow entering of lead data and fire an event requesting a add a new section to add additional people.
• Creating a lightning component to allow saving of the new leads and handling the additional lead section event.

Lightning App

The app markup is quite simple. The app extends “force:slds” in order to apply Lightning Design System styling to the components rendered in the app. The app contains on component which acts as the main container of other components that we will create for the form.

<aura:application extends=”force:slds”> <c:PublicFormMainComp /> </aura:application>

Lightning Event

The event contains one parameter named as newCount, which will be used to by components to indicate the current count of the new lead sections being added.

<aura:event type=”COMPONENT” description=”Notifies listeners to add additional contact form” > <aura:attribute name=”newCount” type=”Decimal” /> </aura:event>

Lightning Components

PublicFormNewLeadComp

This component will be re-usable in the sign-up form to add additional sections to collect lead information.

<aura:component > <aura:attribute name=”count” type=”Decimal” /> <aura:attribute name=”newLead” type=”Lead” default=”{‘sobjectType’:’Lead’}”/> <aura:attribute name=”showAddLeadBtn” type=”Boolean” default=”true”/> <aura:registerEvent name=”addFormEvent” type=”c:addLeadFormEvent”/> <lightning:card > <aura:set attribute=”title”> New Sign-up ({!v.count}) </aura:set> <lightning:recordEditForm objectApiName=”Lead” aura:id=”leadEdit”> <lightning:messages /> <lightning:input label=”First Name” value=”{!v.newLead.FirstName}”/> <lightning:input label=”Last Name” value=”{!v.newLead.LastName}”/> <lightning:input label=”Company” value=”{!v.newLead.Company}”/> <lightning:input label=”Email” value=”{!v.newLead.Email}”/> <lightning:input label=”Phone” value=”{!v.newLead.Phone}”/> </lightning:recordEditForm> <br /> <br /> <aura:if isTrue=”{!v.showAddLeadBtn}”> <lightning:button variant=”brand” label=”Add Additional Person” onclick=”{!c.fireAddFormEvent}”/> </aura:if> </lightning:card> </aura:component>

Attributes

• count is of type decimal and will be used to indicate the current count of the specific component instance.
• newLead is an sObject of type Lead and will be instantiated as an empty object by default.
• showAddLeadBtn is a Boolean value that is used to determine whether or not the lightning button used to add an additional new lead section should be displayed.

Registering the Event

• We register the addLeadFormEvent so that we can fire the event when someone clicks on the Add Additional Person button.

Inputs

• Within the lightning card components we display the current count position of the component.
• We also include five lightning input components that will correspond to lead fields for first name, last name, company, email, and phone.

Button

• The lightning button will execute the fireAddFormEvent function from the javascript controller. It will only displayed within the aura:if if the showLeadBtn attribute equals to TRUE.

PublicFormNewLeadComp Javascript Controller

({ fireAddFormEvent : function(component, event, helper) { var currCnt = component.get(‘v.count’); var cmpEvent = component.getEvent(“addFormEvent”); component.set(‘v.showAddLeadBtn’, false); cmpEvent.setParams( { “newCount” : ++currCnt } ); cmpEvent.fire(); } })

The controller consists of one function named fireAddFormEvent. When the lightning button on the component is clicked the above function is executed. We get the current position count of from the component along with the registered event. We hide the button by setting the showAddLeadBtn attribute value to false. After setting the the newCount event parameter to the value of the current position iterated by 1 (next component instance’s position), we fire the event.

PublicFormMainComp Component

This is the main component of the form that will contain multiple instances of the PublicFormNewLeadComp component. It responsible for listening for the addLeadFormEvent firing, handling the event, and saving all data entered as new lead records. The first instance of the new lead component will be manually added to the main component.

<aura:component controller=”PublicContactFormController”> <aura:attribute name=”personCnt” type=”Decimal” default=”1″/> <aura:handler name=”addFormEvent” event=”c:addLeadFormEvent” action=”{!c.handleAddLeadEvent}”/> <h1 class=”large-font”>Sign-up Form</h1> <br/><br/><br/> <lightning:button variant=”brand” label=”Save” onclick=”{!c.saveLeadsClick}”/> <br/><br/> Number of People: {!v.personCnt} <br/><br/> <c:PublicFormNewLeadComp aura:id=”cntFrm1″ count=”1″/> {!v.body} </aura:component>

Apex Controller

• The apex controller PublicContactFormController is set for any server-side actions for the sign-up form.

Attributes

• personCnt is an attribute of type decimal. It will be used to keep a count of how many instances of the PublicFormNewLeadComp component has been created.

Handler

• We add an event handler that will allow us to listen to the addLeadFormEvent firing and handle the event executing the handleAddLeadEvent function of the component’s javascript controller.

Button

• The save button will execute the saveLeadsClick function from the javascript controller.

v.Body

• The v.body attribute is added to the bottom of the component in order to dynamically create components and push them into the markup of the main component.

Apex Controller

public with sharing class PublicContactFormController { @AuraEnabled public static String createLeads(List newLeads){ String msg = ”; try{ insert newLeads; msg = ‘SUCCESS’; }catch(DMLException insEx){ msg = insEx.getMessage(); } return msg; } }

The apex controller for the component has a method named createLeads that will handle creating new lead records entered into the sign-up form. If any errors occur the exception messages will be returned, otherwise it will return the string “SUCCESS”.

PublicFormMainComp Javascript Controller

The first function of the controller is handleAddLeadEvent. It is executed when an addLeadFormEvent is fired.

handleAddLeadEvent : function(component, event, helper) { console.log(‘handling add form event’); var newCnt = event.getParam(“newCount”); $A.createComponent( “c:PublicFormNewLeadComp”, { “aura:id”: “cntFrm” + newCnt, “count”: newCnt, }, function(newContFrm, status, errorMessage){ //Add the new button to the body array if (status === “SUCCESS”) { console.log(‘success’); var body = component.get(“v.body”); body.push(newContFrm); component.set(“v.body”, body); var contactCnt = component.get(‘v.personCnt’); component.set(‘v.personCnt’, ++contactCnt); } else if (status === “INCOMPLETE”) { console.log(“No response from server or client is offline.”) // Show offline error } else if (status === “ERROR”) { console.log(“Error: ” + errorMessage); // Show error message } } ); },

We first get the value of the event parameter newCount, which will be the latest position count of the new lead component. Using the $A.createComponent function, we create a new instance of the PublicFormNewLeadComp component along with setting the aura:id and count attribute of the new instance. In the callback function we check whether or not the new component instance has been successfully created or not. If successful, we take the new component markup and push it to v.body. We also increment the personCnt attribute value by 1 to indicate how many new lead sections are being displayed thus far.

The second function of the controller is named saveLeadsClick. The function is executed when the Save button is clicked on the component.

saveLeadsClick : function(component, event, helper){ var leadArr = new Array(); console.log(leadArr); var totalNumOfLeads = component.get(‘v.personCnt’); for(var i = 1; i 0){ helper.saveLeads(component, leadArr); } },

We start by getting the total number of new lead component instanced created. All created lead component instances are retrieved and each lead object is pulled and stored in an array. Finally, if the array contains lead objects we call the saveLeads function from the helper passing the current component and the array as arguments.

PublicMainFormComp Helper

The helper consists of the saveLeads function. It is responsible for saving the lead data entered and creating the records in Salesforce with a server-side action call.

({ saveLeads : function(cmp, leadArr) { var action = cmp.get(“c.createLeads”); action.setParams({ newLeads : leadArr }); action.setCallback(this, function(response) { var state = response.getState(); if (state === “SUCCESS”) { var res = response.getReturnValue(); if(res === ‘SUCCESS’){ alert(‘Contacts record successfully created!’); } else{ alert(‘Error during contact creation: ‘ + res); } } else if (state === “INCOMPLETE”) { // do something } else if (state === “ERROR”) { var errors = response.getError(); if (errors) { if (errors[0] && errors[0].message) { console.log(“Error message: ” + errors[0].message); } } else { console.log(“Unknown error”); } } }); $A.enqueueAction(action); }, })

To start, we get the apex controller method createLeads as an action from the component. We pass the array of leads to the createLeads method as a parameter. In the callback function of the action we check if the method was able to execute successfully, if so we confirm if the lead records were created without issue. The user will be notified of the successful creation or alerted for any errors. Finally we call the $A.enqueueAction to execute the apex method.

The End Result

Here is a screenshot of the completed sign-up form. Check out this video if you want to see it in action.

I hope you found this little exercise interesting. Let me know by leaving a comment or via Twitter. I will be working on part 2 soon and will be adding upon the functionality of the form.

Until next time!