LWC with Salesforce Data

In my previous article, we have learned how SFDX is configured for building LWC and a very basic app HelloLWC, now time to explore more complex things. In this article, I am going to talk about how LWC works with salesforce data. Salesforce provides several ways for Lightning web components to work with data. Always start with the simplest solution and move to a solution that allows for more customization as needed.

• Use Lightning Data Service (LDS) to Work with Data

• Use Apex to Work with Data

1) Use Lightning Data Service (LDS) to Work with Data

Lightning Data Service is the preferred (and easiest) way to work with Salesforce data. With Lightning Data Service, developers use JavaScript to connect components to Salesforce data. There are multiple benefits while using LDS:

• Lightning Data Service maximizes performance. When a record is cached, it’s retrieved from the cache, eliminating unnecessary calls to the server.

• Lightning Data Service maintains consistent, up-to-date data across multiple components and clients throughout the app lifecycle. If several components use Lightning Data Service to work with a record, and one of them updates the record, the other components automatically reflect that update.

• It respects CURD Access, FLS, and sharing setting

• Support all custom and standard object

• There are two ways to use LDS

1. Using Base Components-Below are 3 base Lightning components built on Lightning Data Service (LDS)

1. Lightning-record-form

2. Lightning-record-view-form

3. lightning-record-edit-form

2. Using Wire adapters and functions in the lightning/ui*Api modules

2) Use Apex to Work with Data

So far we learned that LDS is the best approach however, there are some limitations as well. sometimes, neither the lightning-record-*-form components nor the LDS wire adapters and functions suit a particular use case. For example, when you want to customize a single-record data transaction or perform multi-record operations on a single transaction, Apex is the best choice. There are three ways to apex method.

1. Call Apex Using @wire (Wire a property & Wire a function)

2. Call a method imperatively

Hello LWC!

Lightning Web Component (LWC)

• Lightning Component can be created by Aura Component and LWC

• LWC is the latest way to write coding.

• Lightning Web Components use core web standards.

• As it’s built on code that runs natively in browsers, LWC is lightweight & delivers exceptional performance.  

The benefit of lightning components

• LWC is fast

• It is light-weight.

• Better security

• Better browser compatibility 

The file involved in LWC

• It consists of four files

• HTML

• CSS

• JavaScript

• Configuration

Configure set up for lightning 

Before starting to build the LWC, you must know that LWC cannot be directly created in CRM as an Aura component, you need Salesforce DX to build and deploy LWD to Salesforce. In order to configure Salesforce DX perform the below steps:

1. Install the Command Line Interface (CLI)

1. Use https://sfdc.co/sfdx_cli_osx  link for Mac

2. Use https://sfdc.co/sfdx_cli_win for MS windows

2. Verify the installation

1. Once you complete installation, you can quickly verify from the Mac terminal or Command Prompt with sfdx command, if everything is fine, you will get the message below.

3. Install VS code-

Download and install the latest version of Visual Studio Code for your operating system. If you already have Visual Studio Code installed, there’s no need to reinstall it.

4.  Install Salesforce Extensions for Visual Studio Code

5. Create a new Project- 

Now you are good to create your 1st lightning Project in Salesforce in your local machine. In Visual Studio Code, open the Command Palette by pressing 

• Ctrl+Shift+P (Windows) or 

• Cmd+Shift+P (macOS)

6. Authorize Your Salesforce org- 

So far, you have completed all steps in your local machine. In the above screenshot, you can see No Default Org set, it means no salesforce is connected with your local project. You need your local project to connect with salesforce so that you can retrieve or deploy your LWC to salesforce org. IIn Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) and type SFDX: Once you run this, you will be asked to authorize the salesforce org, once you authorized, you will be able to see your org in button with alias name as below.

 Lightning Web Component (LWC)

                              

Now we are good to start our 1st LWC app. 

Create Lightning web component

Once you complete all the above steps to configure SFDX, we are good to go with our 1st application HelloLWC. Let’s follow the below steps:

1. Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) and SFDX: Create Lightning Web Component.

2. Enter HelloLWC for the name of the new component.

3. Press Enter to accept the default force-app/main/default/lwc, you will see below three file in LWC directory

1. helloLWC.html

2. hellowLWC.js

3. hellLWC.js-meta.xml

4. In the HTML file, helloLWC.html, copy and paste the following code and save the file:

<template>

   <lightning-card title="Hello LWC" icon-name="custom:custom14">

       <div class="slds-m-around_medium">

         <p>Hello, {greeting}!</p>

         <lightning-input label="Name"

                           value={greeting}

                           onchange={changeHandler}></lightning-input>

       </div>

     </lightning-card>

 

</template>

5. In the JavaScript file, helloLWC.js, copy and paste the following code

import { LightningElement } from 'lwc';

 

export default class HelloLWC extends LightningElement {

   greeting = 'LWC'; 

   changeHandler(){

       this.greeting = event.target.value;

   }

}

6. In the XML file helloWorld.js-meta.xml, copy and paste the following code

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

   <apiVersion>49.0</apiVersion>

   <isExposed>true</isExposed>

   <targets>

       <target>lightning__AppPage</target>

       <target>lightning__RecordPage</target>

       <target>lightning__HomePage</target>

     </targets>

</LightningComponentBundle>

Note- Each Lightning web component folder must include a configuration file named <component>.js-meta.xml. This file defines where the LWC component can be placed. To get more details please Click here

Deploy LWC from local to Salesforce

• Once you created the HelloLWC component in a local machine, you can deploy this to an authorized Salesforce org. 

• Right-click on LWC component helloLWC, select deploy source to org

For a more complex scenario, how LWC works with salesforce data,

please check out my next blog.

You can also refer below links for LWC more details.

Work with a template in LWC, click here.

Navigation in LWC, click here.