Lightning Web Components: The New Development Style

Lightning, Lightning, Lightning. If you are in Salesforce Eco system, then Lightning is the most common word you hear these days. Now we are coming to year end but Lightning is still going strong with lots of update and new feature. This week Salesforce introduce Lightning Web components (LWC). This is just not another update this is total game changer. Don’t worry existing lightning component will still be supported but Lightning Web component is future, because they support latest feature and standard. Lightning Web Components is a new programming model for building Lightning components. It leverages the web standards breakthroughs of the last five years, But at the same time they also support existing lightning, aura components.

Lightning Web Components (LWC)

In 2019 web stack many new feature added in web standards and Lightning Web Component (LWC) supports them.

Install pre-requisite software

Today we will create a basic lightning web component using SFDX and VS code. First you need to install SFDX CLI in your system. You can read steps for that here.

 After that install the Visual Studio Code. Once the VScode is installed then go to extension pack and Search for Salesforce Extension Pack and click Install and again search for Salesforce Lightning Web Components and click Install. Now in VScode press Command + Shift + P on macOS or Ctrl + Shift + P on Windows and then type SFDX commands. In terminal enter sfdx plugins to check everything is correctly setup.

  • First we need to upgrade our CLI to v45 pre release version. 
    sfdx plugins:install salesforcedx@pre-release
Install the latest version of SFDX. Make sure its above or equal to 45

Create Project in VS code

  • Now we will create a new project. In VS code Ctrl + Shift + P on Windows and type SFDX: Create Project
Create new project
  • Now we will Authorise a dev hub org. For this you need to sign up for pre release org. You can do that here.
  • In setup search for Dev hub and enable it. In VS code Ctrl + Shift + P on Windows and type SFDX: Authorize a Dev Hub. Login using pre release org and when asked allow the permission. Then you will get success message in CLI.
Auth the default org
Create project
  • Next we will create a scratch org using command SFDX: Create a Default Scratch Org.Select all the default details. Here you can also use it with NON-SCRATCH org. We just need to authorise and connect them using sfdx:authorize an org.
Create default scratch org

Create LWC Components

  • Next we will create the Lightning web component. In VScode Ctrl + Shift + P on Windows and type command SFDX: Create Lightning Web Component. Enter default Path and give a name.
Create Lightning Web Components (LWC)
  • You will notice that, instead of the previous bundle now we get three files. First LightningdataService.html where we will write the html code. Second 
    LightningdataService.js file where we will write the JS code and third is meta xml 
    LightningdataService.js-meta.xml file. We also get one CSS file.
  • Copy paste the code in newly created component.

LightningdataService.html

<template>
    <lightning-card title="Record Edit Form Contact" icon-name="standard:contact">

        <div class="slds-m-around_medium">
   
            <lightning-record-edit-form
                object-api-name="Contact"
                record-id="recordId">
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Title"></lightning-input-field>
                <lightning-input-field field-name="Phone"></lightning-input-field>
                <lightning-input-field field-name="Email"></lightning-input-field>
                <div class="slds-m-top_medium">
                    <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
                </div>
            </lightning-record-edit-form>

        </div>

    </lightning-card>
</template>


And the JS code

LightningdataService.js

import { LightningElement, api } from 'lwc';
  
export default class RecordEditFormDynamicContact extends LightningElement {
  @api recordId;
  @api objectApiName;
} 

LightningDataService.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LightningDataService">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Here target define where this component will be visible. LWC follow lightning-* naming format. Also set the isExposed to true to make it visible.

We can see that JS code reflect modern module like import, export statement, class and extends. 

  • Now we need to save it into default org. In VScode Ctrl + Shift + P on Windows and type command SFDX: Push Source to Default Scratch Org.
Push code to default org in Lightning Web Components (LWC)
  • In VScode Ctrl + Shift + P on Windows and type command SFDX: Open Default Org.
  • Now select an existing Contact or create new Contact. Edit page and then add the new component.
Lightning Web Component

So here we have quickly created new LightningDataService using new Lightning Web Component. As these component are just introduce so not much information,documents are available. Also as of now developer console don’t support LWC so we need SFDX to create,update them,

You can try your hands on LWC trailhead badge or can check the sample gallery to try lightning app using new LWC components.

You can also check LWC developer guide. There you will find LWC documents, Component reference and playground which you can use to try components. You will also get unique URL which you can share with other so that they can refer same code.

Lightning Web Components (LWC) in Salesforce documents hands-on experience.

If you want to fetch existing Metadata including Lightning Web Components (LWC) then you need to add its metadata details in project.xml as default it wont fetch LWC components.

<types>
        <members>*</members>
        <name>LightningComponentBundle</name>
 </types>

You can also check below posts to get hands-on experience.

  1. Get Current User Details in Lightning Web Components
  2. Use Static Resource In Lightning Web Component
  3. Call Apex Method From Lightning Web Components
  4. Pass Data between Components using Events in Lightning Web Components
  5. Custom Toast Component in Lightning Web Components
  6. Lightning Web Components: Datatable with LDS and Apex
  7. Lightning Web Components: Datatable with Lazy loading, Inline Edit and Dynamic Row Action
  8. Iterate Map in Lightning Web Components
  9. Display Generic sObject in Lightning Web Components
  10. Custom Lookup in Lightning Web Components

Did you like the post, have any question or want to add anything, let me know in comments. Happy programming 🙂

Advertisements