Adminstrator · Lightning · LWC · Salesforce

LIGHTNING WEB COMPONENT

What is LWC?

Lightning Web Components is the Salesforce implementation of that new breed of lightweight frameworks built on web standards. It leverages custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and beyond.

How it Works?

Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including:

  • The Base Lightning Components, a set of over 70 UI components all built as custom elements.
  • The Lightning Data Service which provides declarative access to Salesforce data and metadata, data caching, and data synchronization.
  • The User Interface API, the underlying service that makes Base Lightning Components and the Lightning Data Service metadata aware, leading to substantial productivity gains.

Web standards + metadata = unprecedented productivity

Combining the Web Components programming model with the Salesforce metadata and services unleashes an unprecedented level of productivity. For example, the code below creates a form component that has a view and an edit model, knows which type of input to use for each field (combo box, date picker, etc), enforces validation rules, and saves changes in the database without server-side code: five lines of JavaScript and five lines of HTML!

How to create a LWC component.

Press Ctrl + Shift + P in Visual Studio Code and type the following command in the search bar SFDX: Create Lightning Web Component.

Then enter a name for the LWC component ‘helloWorld’ in the next window.

In the project under force-app\main\default\lwc a new folder with the name helloWorld will be created with three files.

  • helloWorld.html
  • helloWorld.js
  • helloWorld.js-meta.xml

These the three default files will be created automatically while creating a LWC.

In the helloWorld.html copy paste the following code.

<template>
    <lightning-card class="slds-align_absolute-center">
            <p>{message}</p>
    </lightning-card>
</template>

In the helloWorld.js copy paste the following code.

import { LightningElement,track } from 'lwc';

export default class HelloWorld extends LightningElement {
    @track message;
    message= "Hello World"
}

In the helloWorld.js-meta.xml copy paste the following code.

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

Output:

Using lightning-record-form view and update the record details.
Create a new Lighting Web Component using terminal.

sfdx force:lightning:component:create -n contactDetailCard --type lwc -d lwc

In the contactDetailCard.html copy paste the following code.

<template>
    <lightning-card title="Contact" icon-name="standard:contact">
        <lightning-record-form object-api-name= {objectApiName} record-id= {recordId} fields= {fields}></lightning-record-form>
    </lightning-card>
</template>

In the contactDetailCard.js copy paste the following code.

import { LightningElement, api, track } from 'lwc';
 
export default class ContactForm extends LightningElement {
    @api recordId;
    @api objectApiName;
    @track fields = ['Name', 'Title', 'Phone', 'Email'];
}

In the contactDetailCard.js-meta.xml copy paste the following code.

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

Output:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s