Hello Trailblazers,
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
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.
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)
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..!!
Awesome work , Thank you so much for all you do for sharing knowledge.
ReplyDelete