SFDC Stop - Always the latest about Salesforce

Full Tutorial Series with videos, free apps, live sessions, salesforce consulting and much more.

Telegram logo   Join our Telegram Channel

Wednesday, 21 February 2018

Salesforce Lightning Tutorial - Part 4 | Create new Records

Welcome to the 4th tutorial in the Salesforce Lightning Tutorial Series. In this post, you'll learn about how you can create a new record using our custom lightning component and save it to salesforce. I'll be extending the code used in my previous posts so, if you are just starting or need to learn only about creating new records only do have a look at my previous posts or at least the code by having a look at my blog posts starting from here or my github repository code in delete branch here so that you can understand the progress till now and the further additions that I'll do in this post.

So, let's start coding in each and every file one by one and make our lightning component more amazing.

1. Apex Controller

As usual, starting from the apex controller, I have created a new function to insert new contact.

You can see in the  above code, the last function is the latest one that I added named createContactList which is very similar to the other functions above. It take a single contact as a parameter and insert that contact as we are going to insert only one contact at a time. It has a @auraenabled annotation so that this method can be called from lightning component. I am returning a resultMap as a response which is a map of <String, String>. If the contact is inserted, the status key is success and if there is any exception caught by try catch, the status key is error and message key has a value accordingly. We return this resultMap so that correct response can be shown to our user from lightning component.

2. Lightning Component

Moving on to our lightning component, we are going to create a modal now which will be called containing the form to create a new contact. Let's have a look at the code first:-

As you can see, I have added a new attribute whose name is contact and type is also Contact and it has a default value that consists of all the fields, with empty value as I am going to bind value to these fields using my modal fields and pass this contact object as an attribute to the ContactListController function that we just created to create new contact. I have added a new buttons in the lightning card actions section. The button has a label of New Contact and will call the openModal function from our lightning controller.

Apart from all this, I have added a modal which will popup when we click on New Contact button and we can fill in the details of the new contact and save it to the server. The modal code is present after the lightning card.The modal container mainly consists of 3 sections:- Modal Header, Modal Body and Modal Footer. The header mainly consists of a close button and a heading of New Contact. The body consists of 4 input fields for firstname, lastname (kept as required) , phone and email of contact respectively in which the value is binded with the contact attribute fields like in case of FirstName, the value is {!v.contact.FirstName} and the footer consists of cancel and save buttons. The whole code for the modal is referred from slds. I have made the necessary changes like:- converting html buttons to lightning buttons and adding input fields. There is also a separate div with aura id of contactModalBackdrop which is used to add a backdrop to the page when we open the modal.

3. Lightning Controller

In the lightning controller, I have added 3 functions mainly to open the contact modal, close the contact modal and create a new contact. If you see, I am toggling two classes, first is slds-fade-in-open  which is used to display the modal when this class is applied to the modal element and will hide the modal when this class is missing. The same case is with slds-backdrop_open class which is mainly used in backdrop to show/hide it when modal is opened or closed. Apart from these, the createContact function is simply calling our insertContact helper function which will communicate with the apex controller to insert the contact.

4. Lightning Helper

So, the last thing is Lightning Helper. Let's have a look at the code first, I have added a new function at last named insertContact :-

As you can see, first of all we get the contact from the contact's attribute. Then we assign the AccountId of the contact with the records id as this lightning component is going to be embedded within an account's detail page and the contact we create should be associated with that account. Then we initialize a toast and a createAction which is going to call createContactList method of apex controller.We set the parameter as the contact which we get by our lightning component. If the state of response is success we check the status and show the message using toast and if the response is not success, we simply show an alert with the message error in getting data following the previous procedure as we have done till now. Finally we add the action to the global action queue.

We have added another interesting feature that helps us to create a new contact using our lightning component, and our final output is like this:-

Tired of reading or just scrolled down..!! Don't worry, you can watch the video too.

If you liked this post then do follow, subscribe, comment your views or any feedback and share it with everyone in your circle so that they can also get benefit by this. Hope to see you next time too when we'll learn how to add client side validations using JavaScript to our lightning component. For the whole code at one place, please refer to my github repository here. You can fork this repo and do your own changes. However please switch to create branch to get the code specified here and not the future changes. Otherwise, directly go to the create branch by clicking here.

Let's move on to Lightning Tutorial Part 5 now in which you'll learn how you can add validations to the form which is displayed in custom lightning component.

Happy Trailblazing..!!


  1. Replies
    1. Hi, I recommend you to send me a DM on twitter instead because I am not regular in responding to emails. Please let me know if you still need email. On twitter you can find me here :- https://www.twitter.com/rahulcoder

  2. Hi. But how to set a condition for a field in a modal window and, if it is not executed, show a message about incorrect data?

    1. You can handle it in javascript on form submit. Depends on which type of form you've made and are using.

  3. Hi. I made an analogous code according to your sample, but the success message is not showing. What could be the reason?

    1. Hi Yasperson, check out your console if you've received any error there. Also, add a console.log('test data'); to the js code before the toast to confirm whether you're actually reaching there or not. Make sure you've initialized the toast properly before calling out.

  4. Hi. I made a similar code according to your example, but the success message is not displayed. What could be the reason?