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.
- 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>

Pingback: What is Salesforce Lightning Web Component (LWC...
March 16, 2022Best Cheap Proxies
June 13, 2022I really like your writing style, excellent information, thankyou for putting up : D.