July 3, 2019

Kickstart your journey with Lightning Web Component: Part 2

Howdy Geeks! In my previous blog, we saw the basics of Lightning Web components and developed our own component. Last time when we created our component, we used static data for displaying on the page. This time, we will see how to fetch real-time data from our Salesforce instance using Apex code. To fetch the Apex class into the LWC, we do not need to mention the controller name or its extension name on the component. Now you might wonder, how does one connect an Apex class to an LWC? Let’s go through an example…

Creating an Apex Class


First things first, let us create an Apex class. Let’s name it as AccountController. Since we need to send the list of records to be displayed from the controller to LWC, we need to create a method with a return type.
Account Controller
Img1 – Account Controller Class


What is interesting to note here is the fact that both Aura and LWC uses the same method definition conventions; i.e.
  1. The method must be static
  2. The method must be global or public
  3. The method must be decorated with@AuraEnabled(cacheable=true)

I fetched a few Account records using a SOQL query. Now let us see how to display it on the component.

Component


Component
Img2 – Component


Let’s understand the tags attributes we used
  1. as discussed in the previous blog, this tag is similar to card tag in aura component. We use this tag to apply a stylized container to a grouping of information.
  2. For:each, is a directive which iterates over the list of data
  3. For:item, is a variable which is considered as a single entity from an array
  4. {accounts.data} is the binding variable to display data from controller

JavaScript Controller


JavaScript Controller
Img3 – JavaScript Controller


I know this might be confusing for some of us. Let us go step by step and see what I wrote:
  1. JavaScript code imports the Apex method and invokes it via the wire service
  2. Apex class method is imported from the class
  3. Here, getAccountList is the Apex method name and accountController is the Apex class.

Once deployed, let us see how it looks in the org.
Account
Img4 – Account Object


Now that we have seen how to communicate between LWC and the server, here comes a very important part; Debugging your LWC. Salesforce has given us a few simple and easy-to-use tools that empower us to debug an LWC. Here’s what you need to do to enable it:
Enable debug mode in Salesforce org. Check the link for reference: https://help.salesforce.com/articleView?id=aura_debug_mode.htm&type=5

Use Chrome DevTools to debug the Lightning Component

  1. To open DevTools on Windows and Linux, press Control-Shift-I in your Google Chrome browser. On Mac, press Option-Command-I.
  2. You can set ‘debugger’ on controller code (JavaScript method) for breakpoints to quickly check which line of code is failing

Chrome DevTools
Img5 – Chrome DevTools


Of course, this blog is just a kickstart to your journey of learning LWC and you have miles to go before you sleep. Let me know what else you try out!



Written by Pranoti Vaidya , Senior System Executive at Eternus Solutions

Leave a Reply

Your email address will not be published. Required fields are marked *

nineteen + 10 =

Share This Blog

Blog Archives