Welcome to the fourth 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 fetch the data from the apex controller for our ToDo List component using wire service in LWC. We'll learn about how we can bind our return value to a property by using wire and we'll try to mutate/change that property and thereby learn about the immutability property of wire service.

Note:- We'll not be using the changes that we'll do in this tutorial as a base in further LWC tutorials for ToDo App Series. This tutorial is important because, It's Equally important to understand WHAT NOT TO DO as it is to understand WHAT TO DO. We'll be learning about immutability property of wire service in this tutorial and we'll see how we can fetch the data from apex to lwc component using wire service.


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.

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, I have created a simple method named as:- getTasks() which will return the list of tasks assigned to the logged-in user. Notice that I have added:- @AuraEnabled(cacheable=true) annotation to the method as it's required in order to make it available to the wire service. Let's have a look at the JavaScript code now.

JS Snippet (todo.js)

As you can see above, I have imported the getTasks method from the apex controller and wire service from lwc. At the end of the js, I have called getTasks method using the wire service and binded the response with todoTasks variable. It's the same variable that we initialized to an empty array in the previous tutorials (I've commented that code as you can see above the newTask variable declaration). Now, this todoTasks variable will store the response that we're getting by calling getTasks method i.e. an object with 2 keys:- data - which will contain the list of tasks and error - which will contain the error messages as you can see in the comments below the wire service.

Also, in the addTaskToList() method, I've commented the previous code of pushing the new task to todoTasks list as now we'll be pushing the new task to todoTasks.data as the list of todoTasks is present there. The id and name keys of each task are now replaced by Id and Subject as we're getting those tasks from apex now. For a new ToDo Task, the Id will have a value:- this.todoTasks.data.length + 1 instead of this.todoTasks.length + 1 as the list of todo tasks is now stored in this.todoTasks.data.

HTML Snippet (todo.html)

If you notice carefully, I have updated the todoTasks array in the for:each loop. Instead of todoTasks, I am using todoTasks.data and instead of using todoTask.id, todoTask.name, I am using todoTask.Id and todoTask.Subject

I have also wrapped this for:each loop under an if condition using <template if:true={todoTasks.data} which will check, if the data under the todoTasks object is defined or in simple words we can say that it'll check, if the tasks are fetched from the server successfully, as it may take some time to fetch the data from the server when the component is rendered. Once all the data is fetched, it'll go inside this template with if condition and render all the todo tasks using a for:each loop.

In the output you'll see that the todoTasks are fetched from salesforce successfully and you'll be able to view those. However, if you try to add a new todoTask to the list, you won't be able to do that as All the data which is fetched by using the wire service is Immutable (can't be updated). We'll see the solution to this issue in the next tutorial, where we'll bind a function with the wire service instead of a variable.

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

Welcome to the third 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'll be modifying the JavaScript and HTML code of our ToDo Application so that we're able to remove a ToDo Task from the list by clicking on the delete button icon. The final result will be as follows:-


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.

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:-

HTML Snippet (todo.html)

Have a look at the code above, if you carefully see the delete button-icon, you'll notice that, I've added a name attribute and an onclick attribute. The name attribute consist of the id of current todo task which is being rendered in the list, specified by todoTask.Id. Using this name attribute we can identify which task is being deleted in the js and remove that task from the todo list array. The onclick attribute is binded with a js function named as:- deleteTaskFromList

Let's have a look at the changes in JavaScript code now.

JS Snippet (todo.js)

As you can see above, I added a new method named as:- deleteTaskFromList() which will be used to remove a task from the ToDo List. Whenever we're clicking on the delete button icon, we're getting the id of the task which we have to delete by using event.target.name and storing it in idToDelete variable. We're assigning the list of todo tasks to a local variable named as todoTasks that we're going to use in this method. We declared another variable named as todoTaskIndex which will be used to store the index of todo task that we have to delete.

After that we're iterating all the todo tasks using a for loop and we're storing the index of the todo task in the todoTaskIndex variable whose id is equal to the id stored in idToDelete variable.

Finally, we're removing the todo task from the list by calling the splice() method on the todoTasks array. The splice() method takes up the index of the element to remove from the array as the first parameter and the number of elements to remove from the array (starting from that index) as the second parameter.

In the method 2, which is commented in the above code, we're using the findIndex() method to find the index of the todo task that we need to remove from the list.

We've re-written the same code specified in method 2 in method 3 also, the only difference is that we've used the arrow function => there to reduce the code to one line. Please have a look at the video for a detailed explanation of those.

You can use any of the methods out of:- method 1, method 2 or method 3. All will do the same work i.e. removing the element from the todo list.

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

Welcome to the second 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'll be adding the JavaScript to our ToDo Application and update the HTML code as well so that it renders dynamically and we'll be moving one step forward to the below result at the end as we'll be able to add elements to todo list dynamically on click of the Add button.


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.

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:-

JS Snippet (todo.js)

HTML Snippet (todo.html)

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