Welcome to my blog

I have been working with Salesforce for quite a while, so don’t hesitate to contact me if you have any questions or want some advice.

s f

Subscribe
Follow Us
h

LIGHTNING WEB COMPONENT

 . Adminstrator  . LIGHTNING WEB COMPONENT
What is Salesforce Lightning Web Component (LWC) & How It Works?

LIGHTNING WEB COMPONENT

What is Salesforce Lightning Web Component (LWC) & How It Works?

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.

Your next question will be how and where I will do this  Salesforce Admin certification?

How it Works?

Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including in Above Image.

  1. The Base Lightning Components, a set of over 70 UI components all built as custom elements.
  2. The Lightning Data Service which provides declarative access to Salesforce data and metadata, data caching, and data synchronization.
  3. 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>

Comments

Post a Comment