What is Lightning Web Component?

With the introduction of Lightning Web Components (LWC), everyone is excited about this new programming model. In Salesforce Lightning Components have two models which are Lightning Web Components and Aura Components. Lightning Web Component is built by HTML and modern JavaScript to create custom HTML elements. Lightning Web Components and Aura Components can coexist and interoperate on a page and also available for Admin and End Users.

Lightning Web Components is lightweight and delivers up to the end to end with exceptional performance. Most of the Code we write is in Standard JavaScript and HTML.

Differences between Lightning Web Component and Lightning Component?

The most notable difference between Lightning Web Component and Lightning Component is the component bundle structure. But between LWC and LC have similarity between some of the files in the bundle, but the major differences are: –

  • Lightning Web Component requires a folder to host all the Component files. The folder is located in the root folder which hosts all the Lightning Web Components.

Whereas, when you are creating a Lightning Component then it creates all the files for you, in the case you will need to start manually while creating it.

  • In Lightning Component Bundle the file name is saved with .cmp.

Whereas, the name of the file should be same as that of the folder that you create,e.g., if the name of the folder is myComponent, then the name of the HTML file should be myComponent.html.Every UI component that you will build requires this file. Contents in this HTML file needs to be enclosed between the <template> root tag.

  • Mandatory component JavaScript file. This is the only JS file in Lightning Web Component bundle unlike controller and helper JS files in Lightning Component. The name of the file should be the same as that of the folder that you create, e.g., if the name of the folder is myComponent, then the name of the JS file should be myComponent.js.
  • Mandatory component Configuration file. The naming convention of the file is <component>.js-meta.xml. This file defines all the metadata values for the component. This file consists of values that determine:
    • Availability of the component
    • <target> attribute which determines if the component can be used on viz., home page, record page, lightning app builder, community builder, etc.
    • This file replaces the design file that was available in Lightning Component bundle.
  • Optional CSS file & SVG Icon file (similar to what was available in Lightning Components)

How Lightning Web Component Works ?

To create a lightning web component first you need the following prerequisites
  • Salesforce Org setup
  • Salesforce CLI
  • Visual studio code setup with the extensions

Salesforce Org setup

  • Login into your existing salesforce org or sign up for the new org using :
    https://developer.salesforce.com/
  • Let’s personalize the org which we created by registering a domain by searching My Domain in quick find box.
  • Once done with creating the domain Deploy to Users.
  • In the quick find box search Dev Hub and click enable.

Version of salesforce CLI

  • First download and install the CLI  in your machine by using the links based on your OS.

Example: Create and Test of LWC

Below are the details given, how to create Lightning Web Component.

<!–webComponent.html–>

<template>

   <lightning-card title=”HelloWorld” 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>

<!–webComponent.js–>

import { LightningElement,track } from ‘lwc’;

export default class WebComponent extends LightningElement {

   @track greeting = ‘World’;

   changeHandler(event) {

       this.greeting = event.target.value;

   }

}

<!–webComponent.js-meta.xml–>

<?xml version=”1.0″ encoding=”UTF-8″?>

<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”WebComponent”>

<targets>

   <target>lightning__AppPage</target>

   <target>lightning__RecordPage</target>

   <target>lightning__HomePage</target>

 </targets>

   <apiVersion>46.0</apiVersion>

   <isExposed>true</isExposed>

</LightningComponentBundle>

Output:

Hope you have already setup your VS code and You have authorized your salesforce Org.

Step 1: Click on CTRL+SHIFT+P to create lightning web component.

Step 2: Give a name of your web component.

Step 3: Select location.

Step 4:

<!–accountSearch.html—>

<template>

       <lightning-card title=”Search Account” icon-name=”custom:custom14″>

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

     <div class=”slds-m-bottom_small”>

         <lightning-input type=”text”

            value={sVal}

            label=”Account Name”

            onchange={modSeachKey}

            ></lightning-input>

      </div>

      <lightning-button label=”Search”

         onclick={handleSearch}

         variant=”brand”></lightning-button>

      <!– custom data table(with SLDS style) to display Account list  –>

      <table class=”slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small”>

         <thead>

            <tr class=”slds-line-height_reset”>

               <th class=”” scope=”col”>

                  <div class=”slds-truncate” title=”Account Name”>Account Name</div>

               </th>

               <th class=”” scope=”col”>

                  <div class=”slds-truncate” title=”Account Number”>Account Number</div>

               </th>

               <th class=”” scope=”col”>

                  <div class=”slds-truncate” title=”Account Source”>Account Source</div>

               </th>

               <th class=”” scope=”col”>

                  <div class=”slds-truncate” title=”Account Site”>Account Site</div>

               </th>

            </tr>

         </thead>

         <tbody>

            <!–iterate all Account records using for-each iteration –>

            <template for:each={accounts} for:item=”account”>

               <tr class=”slds-hint-parent” key={account.Id}>

                  <td>

                     <div class=”slds-truncate”>{account.Name}</div>

                  </td>

                  <td>

                     <div class=”slds-truncate”>{account.AccountNumber}</div>

                  </td>

                  <td>

                     <div class=”slds-truncate”>{account.AccountSource}</div>

                  </td>

                  <td>

                     <div class=”slds-truncate”>{account.site}</div>

                  </td>

               </tr>

            </template>

         </tbody>

      </table>

   </div>

   </lightning-card>

</template>

<!–accountSearch.Js–>

import { LightningElement,track} from ‘lwc’;

// import server side apex class method

import getAccountList from ‘@salesforce/apex/CustomAccountSearchController.getAccountList’;

// import standard toast event

import {ShowToastEvent} from ‘lightning/platformShowToastEvent’

export default class customSearch extends LightningElement {

   @track accounts;

   sVal = ”;

   // update sVal var when input field value change

   modSeachKey(event) {

       this.sVal = event.target.value;

   }

   // call apex method on button click

   handleSearch() {

       // if search input value is not blank then call apex method, else display error msg

       if (this.sVal !== ”) {

           getAccountList({

                   searchKey: this.sVal

               })

               .then(result => {

                   this.accounts = result;

               })

               .catch(error => {

                   // display server exception in toast msg

                   const event = new ShowToastEvent({

                       title: ‘Error’,

                       variant: ‘error’,

                       message: error.body.message,

                   });

                   this.dispatchEvent(event);

                   this.accounts = null;

               });

       } else {

           // fire toast event if input field is blank

           const event = new ShowToastEvent({

               variant: ‘error’,

               message: ‘Search text missing..’,

           });

           this.dispatchEvent(event);

       }

   }

}

<!–accountSearch.js-meta.xml–>

<?xml version=”1.0″ encoding=”UTF-8″?>

<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”AccountSearch”>

<targets>

   <target>lightning__AppPage</target>

   <target>lightning__RecordPage</target>

   <target>lightning__HomePage</target>

 </targets>

   <apiVersion>46.0</apiVersion>

   <isExposed>true</isExposed>

</LightningComponentBundle>

Step 5: Deploy to source org