Salesforce LWC Tutorial Part 6 | ToDo App Project | Call Apex Imperatively from LWC

Hello Trailblazers,

Welcome to the sixth tutorial in LWC Tutorial Series where we're building a ToDo App Project. We're focusing on the concept of Learning By Doing in this tutorial series. In this tutorial, we're going to learn how we can send the data to the apex controller from our ToDo List component by performing an imperative call to apex from LWC. We're going to use this while inserting a new task and deleting a task as we need to insert/delete the task record from Salesforce, when the button is clicked in our component.

So, let's continue building the above application. This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to have a look at the code gist with explanation.

Tutorial Video

Code Gist with Explanation

I highly recommend you to have a look at the video to understand in detail. However, let's have a quick look at the code below to understand in short:-

Apex Class (ToDoListController.cls)

As you can see above, we have created two more methods insertTask and deleteTask. 

insertTask() is used to insert a new task with the subject which will be passed in this apex method as a parameter. This subject will be nothing but our todo task name that we've added to the todo list. OwnerId of the new task will be the id of logged in user, status is hardcoded as "Not Started" and the priority is "Normal". The new task which is inserted is returned from the method.

deleteTask() is used to delete a task from salesforce. It accepts the record id of the task to be deleted as a parameter and it deletes that task. It returns true, if the task is successfully deleted. Otherwise, returns false.

JS Snippet (todo.js)

Let's have a look at the import statements first of all, we have imported the insertTask and deleteTask method from my ToDoListController. 

Now, inside our addTaskToList() we have called insertTask method where we passed the name of our todo task which is stored in this.newTask variable, in the subject parameter. We have console logged the result of that apex call to debug what's coming in the response, this result will be the new task record which is inserted in Salesforce. Once the task is inserted, we're going to push this task in this.todoTasks list where id of the new task is calculated based on the number of tasks that are present in the list. If the number of tasks are more than 0, we'll take the id of the last task in the list, add 1 to it to get the id of the new task which is now added to the todoTasks list. Otherwise, the id of the new task is 0 if the todoTasks list is empty. This is important to make sure that we don't have tasks with duplicate ids in the list ( have a look at the video which will be provided in the next blog (part 7) to see the issue with duplicate ids in detail ). The name of the new task as we know is the value of this.newTask variable. We have added one more property to our new task here which is the recordId of the task. This property will store the salesforce record id of the newly inserted task which we can access using result.Id. As earlier, we can make the value of this.newTask as empty after the task is inserted. We've also added a catch to console log the error (if any) and we also have a finally block to assign the processing variable to false which is a small enhancement and we'll learn about it in the next tutorial.

Finally, inside our deleteTaskFromList() we have created one more variable which is named as recordIdToDelete. This variable will be used to delete the task from salesforce by using the salesforce record id. After the for loop, we've populated the recordIdToDelete variable by the recordId property of the todo task which is present at todoTaskIndex in the todoTasks list. Now, as we have the salesforce record id, we've called our deleteTask method in which we have passed the recordIdToDelete to the recordId parameter. As we know, this method will delete the task from salesforce and will return true if the task is successfully deleted, otherwise it'll return false. Therefore, we'll have a boolean value in the result variable. If the result is true, we'll remove the task present at todoTaskIndex from the todoTaks list. Otherwise, we'll simply console log the message i.e. Unable to delete task. We've also added a catch to console log the error (if any) and we also have a finally block to assign the processing variable to false which is a small enhancement and we'll learn about it in the next tutorial.

HTML Snippet (todo.html)

We've added some enhancements in the html file about which we'll learn in the next tutorial. Stay tuned..!!

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!