Salesforce LWC Tutorial Part 7 | Wrapping up ToDo App Project | Add Spinner | Deploy to Salesforce

 Hello Trailblazers,

Welcome to the seventh and final 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 refine our ToDo List component by adding a spinner and some validations in LWC. We're also going to deploy our todo list component to a Salesforce Org.

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 haven't made any change in the apex class, so the code is same as it was in the previous tutorial.

JS Snippet (todo.js)

If you see carefully, we've defined a new variable named as processing which is initially true. This variable will be used to show a spinner whenever a call to apex is performed from our lwc component. Initially, it's true because we're loading the list of tasks from Salesforce when the component is initialized. We'll now see how we need to toggle this boolean attribute in js to show/hide the spinner at multiple places and finally, we'll add a spinner component to our HTML.

If you check the addTaskToList() we have added a check first of all i.e. if our this.newTask which is our task name is blank, the method will simply return and no operation will be performed, this check will stop the user to add a blank record in our todo list. After this, we've set the processing variable to true.We've done this at the beginning, because our apex call will be asynchronous and we want our spinner to display from the moment we click on the Add button until the task is inserted in Salesforce. 

Then, we've called out insertTask method which is responsible to insert a new task in Salesforce and we've linked a finally() method as well, after the then and catch method. Inside the finally method, we again set the processing variable to false. We've done this in the finally method because we want to hide the spinner irrespective of the fact that the call to apex is successful or not, so, it doesn't matter whether we're getting a successful response or an error from apex callout, the spinner will hide as the apex call is complete.

Remember setting up the id of the new task in our insertTask method as:- this.todoTasks[this.todoTasks.length - 1].id + 1 to prevent duplicacy? I have mentioned this in the previous blog because this was important although the detailed explanation of the same is given in the video embedded above as it's also a part of enhancement.

Now, let's move on to our deleteTaskFromList(), inside this method as well, you can see that we've set the processing variable to true before we're going to perform any operation to delete the particular task, this is because we want to show the spinner before executing any code. Then, we are finding the record id of the task to delete from salesforce and finally, we're calling the deleteTask method which is used to delete the task from Salesforce by using the record id. This method is also having a finally() method attached to it after the then and catch, where we've set the processing variable to false. The reason is same, we have to hide the spinner after the apex call is complete irrespective of the fact whether the task was deleted successfully or not.

Let's have a look at getTodoTasks() method now, as you know that this is a wire method, so, it'll be called automatically when the component is initialized. Remember, we kept the initial value of processing variable as true when we initialized it? We're going to make it false now when our wire method apex call is complete. As you can see, inside our getTodoTasks() method, we're setting processing to false when the response is received from salesforce irrespective of the fact that we're getting the data or error from salesforce side when we're loading the list of tasks.

Finally, in the refreshTodoList() method, initially, we have set the processing variable to true. I have linked a finally() method to the refreshApex method as well. Inside this finally method, we've set the processing variable to false as we did in other places.

HTML Snippet (todo.html)

If you see above, inside the first lightning-layout-item tag, we've added a template with a condition which specifies, if the processing variable is true, the lightning-spinner component will be visible which is kept inside this template tag. This lightning-spinner component is responsible to display the loading spinner and is controlled by the processing variable. We've already toggled the processing variable at various places in our js code in order to show/hide the loading spinner. If you see the lightning-input tag, we've have added another property there named as autocomplete, whose value is off. This property will stop the suggestions that are coming when we're typing the name of a new task. This is also an enhancement that you can add-on to your custom lwc components.

XML Snippet (todo.js-meta.xml)

Now, it's time to deploy our lwc component to Salesforce Org. As you can see in the meta file above, we've marked isExposed property as true which will make the component visible in Salesforce Org. Apart from this, we've added a masterLabel using which you can search this component in the page builder. A friendly description of the component is added as well and under the targets tag, we've added 3 target tags:-

lightning__RecordPage:- To make our component available to a record detail page.

lightning__AppPage:- To make our component available to an app page.

lightning__HomePage:- To make our component available to a home page.

Now you can deploy this component to a Salesforce org using VSCode and you can embed your component to the homepage and test it out.

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..!!