SFDC Stop

Tuesday, 19 January 2021

Everything about Constants in JavaScript | ES6 | JavaScript Tutorial Series by SFDC Stop

Hello Trailblazers,

Welcome to the second tutorial in JavaScript Tutorial Series by SFDC Stop. In this tutorial, we're going to learn about constants in JavaScript. 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

Let's have a look at the code snippet given below in which we're defining a constant named as MONUMENT with the value "Taj Mahal":

What do you think will be the output of above code snippet? When you try to execute this code, you'll get the output as shown below:

As you can see that the value Taj Mahal is displayed properly. This means that We can provide a value to a constant while defining it.

Now, let's break this constant definition into two statements as shown below:

What do you think will be the output of above code snippet this time? When you try to execute this code, you'll get the output as shown below:

As you can see, we're getting an error as: Uncaught SyntaxError: Missing initializer in const declaration. This means that We must INITIALIZE a constant while defining it.

Now, let's update this code snippet again and this time we'll initialize the MONUMENT constant and update it's value later on. The updated code snippet is given below:

What do you think the output will be when we execute the above code? When you try to execute this code, you'll get the output as shown below:

As you can see above, first of all, the value of the constant MONUMENT which was given during definition is displayed i.e. "Taj Mahal" but when we're trying to update the value of a constant we're getting an error as: Uncaught TypeError: Assignment to constant variable at <anonymous>:4:10. This means that We cannot assign a new value to a constant.

Now, let's consider one more scenario, this time, we're going to assign an object to a constant named USER. The code snippet for the same is given below:

When you try to execute this code snippet, you'll get the output as shown below:

As you can see above, the object which is assigned to our constant USER is displayed properly. This object has two properties firstName and lastName. Now, let's update our code snippet and try to assign a new value to our USER constant. The updated code snippet is given below:

What will you think will happen now? The output of this code snippet is given below:

As you can see above, first of all our USER constant is displayed through first console.log statement with value of firstName as Rahul and lastName as Malhotra. After that we're getting an error which is similar to the error we saw previously i.e. Uncaught TypeError: Assignment to constant variable at <anonymous>:9:6

This means that even if you have provided an object to a constant you cannot update the constant as a whole. Now, one more question arises which is:

CAN WE UPDATE THE PROPERTY OF AN OBJECT ASSIGNED TO CONSTANT?

Let's find out. We've updated our code snippet again as shown below:

As you can see above, this time, we're not assigning a new value to our constant but we're updating the firstName to Richard and lastName to Hendricks. What do you think will happen now? Will JavaScript allow us to update the property of a constant or not? Let's see the output below:

As you can see, we haven't got any error. In the first console.log, an object is displayed with firstName as Rahul and the lastName as Malhotra and after updation, in the second console.log another object is displayed where the firstName is updated to Richard and the lastName is updated to Hendricks. Therefore, we got to know that If a constant is an object, we cannot assign a new value to that constant but we can update the properties of that constant.

To summarize, the learnings are given below:-

We must initialize a constant while defining it
We cannot assign a new value to a constant
If the constant is an object, we can update the property of that constant

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

Difference between let and var in JavaScript | let v/s var | ES6 | JavaScript Tutorial Series by SFDC Stop

Rahul Malhotra JavaScript ,

Hello Trailblazers,

Welcome to the first tutorial in JavaScript Tutorial Series by SFDC Stop. In this tutorial, we're going to learn about the difference between let and var in JavaScript. 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

Let's have a look at the code snippet given below:

What do you think will be the output of above code snippet? Think about it. When you try to execute this code, you'll get the output as shown below:

As you can see that the value is updated only inside the function, this means that the var keyword supports function scope as the value is updated only inside the function and the variable which is declared outside the function remains unchanged.

Now, let's replace this var keyword with let and check the output again. Below is our updated code:

What do you think will be the output of above code snippet this time? When you try to execute this code, you'll get the output as shown below:

As you can see , the output is the same when you're replacing var with let. This means that Both the let and var keyword supports function scope. Now you must be wondering that:

WHY SHOULD I USE LET INSTEAD OF VAR WHEN BOTH ARE SAME?

To answer this question, we need to study another code snippet. This time, we're going to replace the function with a block. Let's have a look at the code snippet given below:

What do you think the output will be when we execute the above code? When you try to execute this code, you'll get the output as shown below:

As you can see above, this time the value of the global variable is also updated even if we're assigning the value to a local variable inside an if block. This means that the var keyword doesn't support block scope. Let's try to replace this var keyword with let and check the output again. The updated code snippet is given below:

What do you think will be the output of the above code? When you try to execute this code snippet, you'll get the output as shown below:

As you can see above, this time the result is correct i.e. the value of the global variable is not updated inside the if block. This leads us to the conclusion that the let keyword supports block scope.

To summarize, the learnings are given below:-

Both var and let keyword supports function scope.
var keyword doesn't support block scope
let keyword supports block scope

This was the reason when let was introduced, it was said that let is the new var because is supports block scope which makes JavaScript more similar as different programming languages and it leads to less errors.

So, next time when you're about to declare a variable in your JavaScipt code, make sure to use let instead of var.

Happy Trailblazing..!!

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

Rahul Malhotra Apex , JavaScript

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.

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

Rahul Malhotra Apex , Imperative Apex

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.

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

Salesforce LWC Tutorial Part 5 | ToDo App Project | Wire Service linked to Function and RefreshApex

Rahul Malhotra Apex , JavaScript

Hello Trailblazers,

Welcome to the fifth 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're going to bind our wire service to a function in js which will receive the response. This time we'll be able to mutate the ToDoList as it won''t be directly binded with wire service. We'll also learn about RefreshApex function which will be used to refresh the browser cache.

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, I have created two more methods insertTask and deleteTask.

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

JS Snippet (todo.js)

Let's have a look at the wire method first which is the second last method in the above code. It's calling the same getTasks method which is imported from the apex controller like we did in the previous tutorial, the only difference here is that, instead of binding a variable, we've binded a function with the wire method. The response object in this case (which is having data and error as properties) is not directly assigned to a variable but it's coming as a parameter named response in the getTodoTasks() method which is binded with wire service. This response is stored in the todoTasksResponse variable which we've defined in the beginning of the class. After that we've stored the data and error from the response object into data and error variables for simplifying code.

If we have the data received successfully, we're re-initializing the todoTasks variable to empty array and pushing all the tasks one by one by using the foreach loop on the data array. The id of each todo task will be the (total array length + 1) (to keep it unique), the name of each todo task will be the Subject of the task received from salesforce and the recordId of each todo task will be the id of the task received from Salesforce. We're storing recordId here as well as it'll help us to delete the todoTask from salesforce in our next tutorial.

In case of an error we're displaying that in the console.

We've added a refreshTodoList() method as well which will be used to refresh the todo list from server on clicking the refresh/sync button. This method is calling the refreshApex() imported from @salesforce/apex which is used to refresh the response of wire method stored in browser cache. We're passing todoTasksResponse in this method which is nothing but the response received in our wire method.

I've also reset the addTaskToList() from Tutorial 3 as discussed in the previous tutorial that we don't be retaining/using any code of Tutorial 4 in further tutorials.

Note:- Try to add a new task to your todo list. You'll notice that this time you'll be able to mutate/update the todo list as we haven't directly binded the todoTasks array to wire service. Instead we've received the tasks list (response) in the function as a parameter and updated the todoTasks array manually.

HTML Snippet (todo.html)

We've reset the HTML code also from Tutorial 3 and have done some important changes. If you see the refresh button (lightning-button-icon) in the beginning of lightning:card, you'll notice that it's has an onclick attribute with the value as:- refreshTodoList as it'll call this method from js whenever the button is clicked to refresh the todo list. I have also updated the alternative-text and title from Sync to Refresh.

Rest all the code is same as it was in Tutorial 3. We've done the main effort in js to link wire service with a function and we've also used refreshapex which will be called when the refresh button is clicked.

Give it a try and let me know your observations in the comments down below.

Important Observation:- If you see carefully while testing, you'll notice that the refreshApex() is only refreshing the todo list, when there is a change on the server side (Try inserting a new task record directly in salesforce and click on the refresh button 2-3 times in your todo list to check how many times the wire service is refreshed). Basically, the refreshApex() only update the browser cache when there is a change on the server side otherwise it won't do anything. So, your apex calls are preserved. Thanks to LWC...!!

Salesforce LWC Tutorial Part 4 | ToDo App Project | Understanding Wire Service Immutability

Rahul Malhotra Apex , JavaScript

Hello Trailblazers,

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.

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

Salesforce LWC Tutorial Part 3 | ToDo App Project | Removing elements from ToDo List

Rahul Malhotra findIndex , JavaScript

Hello Trailblazers,

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

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

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

Salesforce LWC Tutorial Part 2 | ToDo App Project | Data Binding and Adding elements to ToDo List

Rahul Malhotra JavaScript , Lightning

Hello Trailblazers,

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.

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

JS Snippet (todo.js)

As you can see above, I created an array of todo tasks with name todoTasks and initialized it as an empty array. along with the newTask variable which is an empty string initially. The array is annotated with @track annotation because we need to re-render the HTML whenever a new task is added to the list. The newTask variable will store the name of new todo task that we're going to add to the list.

After that we've defined an updateNewTask() method which is used to update the value of the new task variable as we type in the new task name in the input field. event.target.value will give us the value as we're going to bind this method to the onchange attribute of input field in HTML.

Finally, we have an addTaskToList() method which is used to add the task to the todo list. This method will create a new todo task object with an id and a name and push it to the todoTasks array, in the new object, the id of the todo task will be the current array length (i.e. number of tasks in the list) + 1 and the name of the task will be the value stored in newTask variable. After adding the new task to the list, we're setting up the newTask variable as blank again.

HTML Snippet (todo.html)

As you can see in the above code, I have removed all the list items under the unordered list and kept only a single list item which is surrounded by a template tag, that template tag is basically a for:each loop which is responsible to iterate the todoTasks array specified in js and in each iteration, the current element can be accessed by the todoTask variable which is specified as the value for for:item in the template. For each list item, I am keeping the todoTask id as the key.

Note:- The first HTML element under the template tag running a for loop must have a key element and that key should be unique.

So, in our case the key is specified by todoTask.id as we're setting up the id each time we're adding an element to the todo tasks list. At the place of task name, I have specified {todoTask.name} which will replace this expression with the name of current todo task as this list is being rendered.

If you carefully see the Enter New Task input field, I have binded the newTask javascript variable as the value of input field and I have also binded the updateNewTask() method in the onchange handler of the input field.

So, whenever we're going to write something in this input field, the updateNewTask method will be called automatically and it'll update the value of newTask variable which is being set as the value of input field.

Finally, we specified our addTaskToList method in the onclick handler of the Add button. So, that whenever we're going to click this button, our todo task will be added to the list.

Salesforce LWC Tutorial Part 1 | ToDo App Project | Designing the markup in SLDS

Rahul Malhotra Lightning , Lightning Basics

Hello Trailblazers,

Welcome to the first tutorial in LWC Tutorial Series. We're focusing on the concept of Learning By Doing in this tutorial series and following that, it's time to get started with our first project in LWC which is a ToDo Application. In this tutorial, we'll be designing the markup in SLDS for our ToDo application and going forward in further tutorials, we'll be adding JavaScript in our application to make it working as shown below:-

So, let's start building the above application and while doing that, we're going to see from very basic, how we can built the HTML structure by looking at a design and we'll learn about various lightning tags and what's their usage on the go.

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 where we created the markup of our ToDo Application

Tutorial Video

Code Gist with Explanation

I highly recommend you to have a look at the video to understand the thinking process like:- How I proceeded with creation of this component by just having a look at the design. However, I'll be explaining the code of the same below. So, let's have a look at the code using which we created our first ToDo App LWC component. My component name is todo and the code is given below:-

HTML Snippet (todo.html)

As you can see in the above code, I have first of all created a lightning-card with a title ToDo List. I added a lightning-button-icon in the actions slot of the card with the icon of sync. I used slds icons to find out which icon I should use for this purpose. Next, I created the card body using lightning-layout and also created a paragraph which I added to the footer slot of the card.

Let's learn in detail about the card body first, inside the lightning-layout, I added a lightning-layout-item with padding as around-small in order to give equal padding from the border to all the list items and I specified the size to 12 as each row in lightning-layout can be divided into 12 columns at max, so, I wanted the card body to take/cover the maximum width available.

After that, I created an unordered list by referring to the slds code shown here and under each list item, I again created a lightning-layout as I wanted to divide the list item into two parts, one for the task name and other for the delete button which will be used to delete the task. This lightning-layout has a vertical-align property of center so that the text (task name) is aligned middle in vertical direction to look good with delete button and also, I specified a horizontal-align property to spread as I want the items in the task row i.e. the task name and delete button to spread evenly in the width available.

As specified above, each lightning-layout under the list item has two lightning-layout-item one for task name and one for delete button. I have given the padding as horizontal-small to both these lightning-layout-item so that they're properly spaced from each other and also from the corners. I again used lightning-button-icon in order to create delete button for each task.

Moving onto the footer code, I again used lightning-layout but this time I specified a property named as pull-to-boundary as small in order to make sure that the text field and the button that I am going to create should stick with their boundaries irrespective of the width. I created two lightning-layout-item inside that. Again, these two are having a padding of horizontal-small so that they're placed away from each other and from the footer corners as well.

In the first lightning-layout-item, I added the property of flexibility as grow because I want the input field to grow as the width increases, I didn't add this property to the second lightning-layout-item where I am going to place the button because I want the button to have a fixed width as it shouldn't grow depending on the container width.

Finally, I added a lightning-input field to the first layout item with a placeholder as Enter new task so that it's shown as a hint and I also specified the variant as label-hidden as I didn't want a label for this field. I also made this field required as it's important to add a task name before adding it to the todo list. For the second layout item, I just added a simple lightning-button with variant as brand as I wanted it to be blue in color. I specified the label of this button as Add, as this button will be used to add elements to the todo list.

The output of the above code i.e. the final design is shown below:-

Getting Started with LWC | Setup local server for Lightning web components | First LWC Component

Rahul Malhotra Lightning , Lightning Basics

Hello Trailblazers,

Welcome to the first tutorial in LWC Tutorial Series. In this tutorial, we'll cover the below points :-

1. What is LWC ?

2. Why should we use LWC when Aura is here ? 😎

3. Comparison between Old and New Web Stacks

4. Setting up Local Server for Lightning web component development

5. Creating your first LWC component with a little bit of HTML and JavaScript

6. Have a look at the references and resources for learning LWC

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 the presentation and have a look at the code gist with brief explanation where we created our First LWC Component

Tutorial Video

Presentation

The presentation used in this tutorial is published on Slideshare and can be viewed below.

Getting Started with Lightning Web Components | LWC | Salesforce from Rahul Malhotra

Code Gist with brief Explanation

Now let's have a look at the code using which we created our first LWC component. My component name is myFirstLWC and the code is given below:-

HTML Snippet (myFirstLWC.html)

As you can see in the above code, I created a simple lighting-card that consist of a lightning-input field with a label Write your Name. This field has an onchange handler associated which is calling my updateName method present in the javascript file. The value of this field is binded with the name variable which we're going to define in our js file. Below that, we just have displayed a text as:- Hello {name}, Welcome to your first LWC Component. In this statement everything is static except the name variable which is declared in the JavaScript file and being used here, by specifying it within curly braces{}.

JavaScript Snippet (myFirstLWC.js)

As you can see above, I have just created a name variable which is having a default value empty. Below that we have our updateName method defined which is responsible to udpate the name variable with the value of the input field as this method will be called automatically whenever the value of input field is changed by reacting to the onchange handler. The onchange event will be passed onto this method automatically and inside this method, we're getting the reference to the HTML element which is changed by using event.target. As, we need the value of that HTML element, we're getting that using event.target.value. We're assigning that value to the name variable that will automatically cause the HTML to re-render as the name variable used in HTML as {name}, is updated now.

The component will look like this initially:-

As you click on the lightning-input field and write anything there. The component will be re-rendered automatically and you'll see your text after hello as shown below:-

I am viewing the LWC component in the LWC Local Server that I've setup in my system. If you've Node.js and SFDX CLI installed in your system, you can also setup the local LWC Server by executing the below commands in the terminal:-

sfdx plugins:install @salesforce/lwc-dev-server

The above command will install lwc-dev-server in your local system. After it's installed, open the terminal again and run the below command:-

sfdx plugins:update

This command will basically update all the sfdx plugins so that you can run your LWC component on the local server installed.

After your local server is installed successfully, you can preview the LWC component by right clicking on the lwc component in your VSCode project and choosing SFDX: Preview Component Locally option as shown below:-

Choose the first option, i.e. Use Desktop Browser to preview the component locally in your default browser as shown below:-

Make sure you have Salesforce Extension Pack installed in VSCode. You can have a look at this tutorial to setup VSCode for Salesforce Development:- How to setup Visual Studio Code for Salesforce ?

You can also use the below command to start the local dev server in case the extensions are not working properly:-

sfdx force:lightning:lwc:start

In case you're follwing some issues, installing the sfdx plugins, read the instructions carefully as it's possible that you're missing some node js packages, you can install those packages by using the below command:-

npm install -g <package name>

-g is basically used to install the package globally so that you can use it anywhere.

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

Extract Update and Deploy Metadata to Salesforce Org | SFDX Deploy Tool | Deploy Extracted Metadata

Rahul Malhotra API , Metadata API

Hello Trailblazers,

In this tutorial, we're going to learn how we can very easily extract, update and then deploy metadata to a Salesforce Org by executing a single command from SFDX Deploy Tool for Windows.

Use Case:- In real life projects, when we're actually working in Salesforce, it usually happens that we need to deploy some metadata from one Salesforce Environment to another, let's say you've completed a feature in developer environment and you need to push all the changes to a QA sandbox, while pushing the changes it usually happens that we face some deployment issues, and we need to update some metadata and then try to deploy again and again. This can be very hectic specifically if you're using change sets which take time to upload and then you need to wait for it to be available in the destination org where you want to deploy.

We'll learn how we can make those deployments very easy using SFDX Deploy Tool for Windows

SFDX Deploy Tool can be downloaded from the github repository here:- https://github.com/rahulmalhotra/SFDX-Deploy-Tool

For this tutorial, we need SFDX Deploy Tool to be already setup with you. If you want to know more about how to setup SFDX Deploy Tool, have a look at the README file of the GitHub repository or have a look at this blog post or the tutorial below:-

Once you've setup SFDX Deploy Tool, i.e. the source and destination orgs, where you have to pull and push the metadata respectively. You can open the tool and you'll see the below screen:-

As you can see in the above image, I have updated this tool and added 3 more options at number:- 2, 5 and 6. These options are:-

Extract fetched metadata at option 2
Validate extracted metadata in destination org at opton 5
Deploy extracted metadata in destination org at option 6

Once you've setup the tool, the first step you need to do is to fetch the metadata from the source org. That you can do by setting up the package.xml present under the metadata folder. After you have the package.xml ready, open the deploy tool, choose option 1 and press the Enter key. A sample package.xml is shown below:-

Once you've fetched the metadata from the source org, you'll see an unpackaged.zip file automatically created in the base folder as shown in the above image. This zip file mainly consists of all the metadata that you've fetched using the package.xml. Our next step is to extract and update this metadata before deploying it to the destination org.

To extract the metadata, open SFDX Deploy Tool and choose option 2 with the name:- Extract fetched metadata this option will extract the fetched metadata using windows powershell, once the metadata is successfully extracted, you'll see an output as shown below:-

In the base folder, you can see that the unpackaged.zip file is extracted automatically and a new folder named unpackaged is created which consist of all the metadata that we fetched from the source org as shown below:-

In case you don't have powershell in your windows you can use any other tool to extract that zip file. Now, we can simply open any metadata and update it. Once, we've updated the metadata, it's time to validate and deploy the extracted metadata.

To Validate Extracted Metadata:- Open SFDX Deploy Tool and choose option 5 with the name:- Validate extracted metadata in destination org

To Deploy Extracted Metadata:- Open SFDX Deploy Tool and choose option 6 with the name:- Deploy extracted metadata in destination org. This option will automatically pick the updated files in the extracted folder and deploy them to your destination org.

If you face errors while deployment, you can simply update the extracted files in VSCode and use SFDX Deploy Tool to deploy the metadata again and again in a single command.

Tired of reading or just scrolled down ? Don't worry, you can watch the video too:-

That's all for this tutorial everyone. I hope you liked it, give a try to SFDX Deploy Tool and let me know your feedback in the comments down below.

Happy Trailblazing..!!

Salesforce Git Codelab | Learn By Doing | Live Deployment | SFDC Stop | GitHub Actions

Rahul Malhotra Announcement , Code Lab

Hello Trailblazers,

Good News :-) We recently crossed 2500 subscribers on YouTube...!! Thank you for being supportive all the time, you have made it possible.

To celebrate this, I am very excited to present the first CodeLab from SFDC Stop:- "Salesforce Git CodeLab" where you'll learn about the concepts of git by actually coding yourself and finally, you'll be having your name in the SFDC Stop Contributors after completing the code lab.

The Salesforce Git Codelab will be live today i.e. 28th of June 2020 at 7 P.M. IST on SFDC Stop YouTube Channel. and I'll be available on the live chat to answer any questions that you have during the premiere.

So, make sure to set a reminder for the premiere by clicking on the below video or subscribe to the channel to get notified

See you soon...!!

All the instructions regarding the codelab are also available in the README file of the GitHub Repository that you can follow in order to complete it. Have a look at the GitHub repository by clicking here.

Happy Trailblazing..!!

How to connect VSCode Salesforce Project to GitHub ? | Getting Started with Version Control System

Rahul Malhotra Apex , CD

Hello Trailblazers,

In this post, we're going to learn how we can connect VSCode Saleforce Project to GitHub. We're going to create a new GitHub repository, commit our changes and push it to our GitHub repository. Let's Begin.

Download Git

The first step is to download and install git in your system. In order to download git, go to this link:- https://git-scm.com/downloads and you'll see the below screen.

Git is available for Mac, Windows and Linux. Download by clicking on the button as shown in the above image and follow simple steps to install git in your system.

Initialize git in VSCode

Now, as you've installed git in your system, move on to your Salesforce Project in VSCode and click on Initialize Repository button available on the 3rd section in the left side bar as shown below:-

As you click on this button, it will automatically initialize the repository for you as shown below:-

If you want to initialize repository using command, you can just open terminal and write git init and press enter in order to initialize a new repository in the project folder. You can see in the above image, in the left sidebar, we're having all the files with an indicaton U where U means Untracked i.e. these files are currently not being tracked by git.

Commiting the files

Just to give you a brief overview:- Git is a version control system which basically tracks all the changes that you're doing. Any new file that you create is initially Untracked. Each file in a git repository can be in one of the below state:-

1. Untracked:- When a new file is created by the user, it is untracked or we can say that this file is unknown to git.

2. Tracked / Index Added:- When we specify or tell git that this is a newly created file and you've to track this file (particularly known as staging the file), the status of the file is changed to tracked or we can say that a particular index (number) is given to the file so that it can be identified by git.

3. Committed:- When we're done with the required changes, we commit that file. Git mark that file as committed and add an entry in it's internal changelog which has the required updates with a Commit Message.

4. Untracked / Modified:- When a previously commited file is updated, the status of the file is changed to untracked / modified. We need to stage this file again to tell git that this file is ready to be committed.

5. Tracked / Index Modified:- When a modified file is staged by the user, it's status is again changed to tracked. At this point the index of the file is modified with recent changes and the file is again ready to be committed.

The basic flow for new files will be:-

Untracked -> Index Added (Tracked) -> Committed

and for existing files that are committed before, the flow will be:-

Untracked -> Index Modified (Tracked) -> Committed

So, we've just initialized a git repository and all our files are untracked by default. The next step is to stage the files. This basically tells git that these are the files in which the changes are completed and these files are now ready to be committed.

You can manually stage each file one by one or only some of the files by clicking on the + icon after that file name as shown below:-

Once you've marked even a single file as staged, you can see the staged files under the Staged Changes heading and unstaged files under the Changes heading in VSCode as shown below:-

If you want to stage all the files at once, click on the + icon on the Changes heading as shown below:-

Once all your files are staged, the next step is to commit these files. In order to commit the files you need to specify a Commit Message. As you can see in the below image, you can specify a Commit Message in the message box in VSCode and click on the right (tick) icon to make a commit.

As you can see in the above image, I have specified a commit message as Initial Commit as it's the first time I am committing all the changes to git. You can give any commit message of your choice. Once you've committed all the files, your git changes sidebar will become empty as there is no further change made by you after the last commit.

After committing, if you do even a single change, your git bar will show you that file as Modified and you need to stage and commit that file again to mark the change as done.

As you can see in the above image, I have removed opening brace { from my setRequestMap() method and as I saved this file, it's specified as modified by the git in sidebar. After I am done with all the changes, I need to follow the same procedure as we did above to stage and commit the file. You can click on the filename in the git sidebar to review the change you've done as shown below:-

You can revert one or all the changes by clicking on the Undo icon which says (Discard Changes), on the left of the + icon for single file as shown in the above image or it'll show Discard All Changes if you see on the Changes heading.

Creating a GitHub repository

Now, we've done our first commit locally, it's time to create a new GitHub repository and push our changes here. To do that, first create an account on https://github.com/

After you created an account and you're logged in on github, the next step is to create a new repository. Go to the top menu bar and click on the + icon there and choose New repository as shown below:-

You'll see a new page as shown below:-

As you can see in the above image, first of all you need to add a repository name, then you can give a description of your choice. After that you need to specify if your repository is public or private.

Public Repository:- Visible to everyone. Anyone can have a look at the code, clone your repository or submit a pull request.

Private Repository:- Visible only to you and the collaborators. You can invite people to collaborate on a private repository on github and they'll have access to this repository.

We don't need to initialize this repository with a README as our project in VSCode already has a readme file as shown in the below image, so keep it unchecked.

Click on the Create Repository button to create a new repository as shown below:-

Once a new repository is created you'll be taken to a new screen as you can see in the below image:-

As you can see in the above image, I have a HTTPS URL automatically generated which is:- https://github.com/rahulmalhotra/ci-cd-tutorial.git

Adding origin to local repository in VSCode

Our next step is to tell VSCode git repository that it has to push the changes to this repository URL that we got from GitHub. So, we need to specify a remote server by giving this URL to our local git repo. In order to do that, open the terminal in your VSCode and execute the below command:-

git remote add origin <YOUR-REPOSITORY-URL>

As you can see in the below image, I have given my repo URL that I got from github after the git remote add origin command. This will basically tell my local git that this is the remote origin (server url with the name or alias origin) where I am going to push my code. You can also run a git remote -v command to verify the remote URLs as shown below:-

I have also executed git status command to check the status and make sure that everything is clean and ready to be pushed.

Pushing our changes to GitHub

To push your changes, you need to execute the git push command from your terminal as shown below:-

As you can see above, as I executed git push I got a message that this branch has no upstream branch set. This message basically means that we haven't mapped our local git branch to the git branch on github server. By default, when you create a new git repo. You have a master branch automatically created. Similarly, on github when we created a new repository, a master branch is automatically created. But our next task is to tell git that you need to push our code in the local master branch to the remote master branch on github. In order to do that execute the command as specified by git in the above image which is:-

git push --set-upstream origin master

The above command will tell git to set the upstream (remote) branch as master for the current local branch which is also master by default and push the code. The shortcut for the above command is git push -u origin master where -u stands for --set-upstream

As you can see above, as I executed this command, the command asked for my github username and password that I entered and everything is pushed onto my github repository and I got a message that Branch master set up to track remote branch master from origin.

If you now go to your github repository and refresh that page, you can see that the code is pushed and is available on your github repository as shown below:-

Note:- Any empty folders in your project are automatically not tracked by git and will not be pushed to your github repository as well.

You can also push to your github repository by using the push option in VSCode as shown below, but make sure that you've set the remote origin first which is a one time effort that we did above.

Now it's your time. Make some changes, commit them and push them again to GitHub. Explore your commits in the GitHub repository and see what information you can see from there. You can have a look at the CI/CD Tutorial github repository that I used in this tutorial by clicking here.

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

That's all for this tutorial everyone, If you liked it, make sure to share it in your network and let me know your feedback in the comments down below.

Happy Trailblazing..!!

SFDC Stop - Always the latest about Salesforce

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

Tuesday, 19 January 2021

Tutorial Video

Code Gist with Explanation

Tuesday, 12 January 2021

Tutorial Video

Code Gist with Explanation

Tuesday, 29 December 2020

Tutorial Video

Code Gist with Explanation

Apex Class (ToDoListController.cls)

JS Snippet (todo.js)

HTML Snippet (todo.html)

XML Snippet (todo.js-meta.xml)

Wednesday, 23 December 2020

Tutorial Video

Code Gist with Explanation

Apex Class (ToDoListController.cls)

JS Snippet (todo.js)

HTML Snippet (todo.html)

Wednesday, 23 September 2020

Tutorial Video

Code Gist with Explanation

Apex Class (ToDoListController.cls)

JS Snippet (todo.js)

HTML Snippet (todo.html)

Monday, 14 September 2020

Tutorial Video

Code Gist with Explanation

Apex Class (ToDoListController.cls)

JS Snippet (todo.js)

HTML Snippet (todo.html)

Thursday, 27 August 2020

Tutorial Video

Code Gist with Explanation

HTML Snippet (todo.html)

JS Snippet (todo.js)

Sunday, 23 August 2020

Tutorial Video

Code Gist with Explanation

JS Snippet (todo.js)

HTML Snippet (todo.html)

Tuesday, 21 July 2020

Tutorial Video

Code Gist with Explanation

HTML Snippet (todo.html)

Saturday, 18 July 2020

Tutorial Video

Presentation

Code Gist with brief Explanation

HTML Snippet (myFirstLWC.html)

JavaScript Snippet (myFirstLWC.js)

Tuesday, 30 June 2020

Sunday, 28 June 2020

Sunday, 7 June 2020

Download Git

Initialize git in VSCode

Commiting the files

Creating a GitHub repository

Adding origin to local repository in VSCode

Pushing our changes to GitHub

Tele Inventory - Manage Products, Customers, Sales and Purchase Orders

$50 OFF with LIFETIME ACCESS. Complete Salesforce Platform & Lightning Experience Training Pack

LWC Training

Competitive Programming Solutions

Subscribe for free tutorials

Get new posts directly to your inbox

Follow Us

Popular

Feed Subscribe

Featured post

Recent

Twitter

Followers

Facebook

Translate

Blog Archive

Recent Post

Subscribe