Lightning Web Components from Admin Perspective

Lightning Web Components(LWC) is an exciting new technology launched in the Salesforce ecosystem not too long ago. Learning Lightning Web Components as a Salesforce admin has its own advantages. A few of them are:

Have the ability to work with a developer as and when required.
Can relate to what appears on the web page and provide constructive suggestions.
Switch to a developer role if interested/needed.
Can contribute to overall performance and add value to the project.

What are Lightning Web Components?

Lightning Web Components is a new programming model for building lightning components. It is based on the latest web standards and ES6(ECMAScript). LWC makes use of HTML, CSS, and Javascript. It uses the core concepts of web standards; the security, lightning data service, and base lightning components are all taken care of by the browser, all thanks to these web standards.

Consider a scenario where you want a login and sign-up page for your customers to create an account and log in to see and buy the products from your website, that time; you can use Lightning Web components to create it. You can also make the look and feel of the website more interactive.

Benefits of Lightning Web Components

Fast and Lightweight framework
Offer enhanced security.
Better testing since the Jest testing framework is used that helps to catch bugs at an early stage.
Interoperability with lightning Aura components.
Lightweight framework since we are using fewer tasks.

Let’s create a Lightning Web Component in Visual Studio Code

Step 1: Create a new project

Open Visual Studio code and open the command palette by pressing Cmd+Shift+P for Mac or Ctrl+Shift+P for Windows.
Make sure the new prompt starts with >.
Search for SFDX: Create project and press Enter.
Select the Standard Project template(default) and press Enter.
Enter your Project name and press Enter.
Select the location for the new project and click Create project.

Step 2: Authorize your Salesforce org

Open the command palette by pressing Cmd+Shift+P for Mac or Ctrl+Shift+P for Windows.
Type SFDX.
Search for SFDX: Authorize an org and press Enter. It will open the browser and ask you to verify the credentials for your org where you want to build the LWC.

Step 3: Create a Lightning web component

Open the command palette by pressing Cmd+Shift+P for Mac or Ctrl+Shift+P for Windows.
Type SFDX.
Search for SFDX: Create Lightning Web Component, give the component name, and press Enter.
Now you will see three files created: the .html, .js, and .xml files.

This is how the folder will look like:

Sample code for creating your first Lightning Web Component, just click on the file names to open the file to edit and copy & paste the following code to the corresponding files and save the files.

.html file code:

<template>
    <lightning-card>
        <div class="slds-var-m-around_medium">
            <p>{greeting}</p>
        </div>
    </lightning-card>
</template>

Line 2: Used a lightning-card to create a small card that can be used on a web page.
Line 4: Binding the property ‘greeting’ created in the JS file.

.js file code

import { LightningElement } from 'lwc';
export default class HelloSalesforceAdmins extends LightningElement 
{
    greeting='Hello Salesforce Admins!'
}

Line 1: Importing the LightningElement from the lwc package to provide our element with the lightning capacity.
Line 2: Extending the Lightning element to our element.
Line 4: Creating a property named ‘greeting’ and assigning it a value.

.XML file code

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

Line 4: Exposing the Lightning web component to use an in-app page, record page, etc
Line 6: We are exposing the component to the lightning app home page to use it on that page.

Step 4: Deploy the source to your org

Right-click on the component we just created and choose ‘SFDX: Deploy source to org‘.
It will show you a message ‘SFDX: Deploy Source to Org successfully ran‘.

If the command ran successfully, a Deployed Source message lists the three files that are uploaded to the org can be seen in the Output tab of the terminal.

Step 5: Add Component to the App in Lightning Experience

In Visual Studio Code, open the Command Palette by pressing Cmd+Shift+P for mac or Ctrl+Shift+P for windows.
Type SFDX.
Select SFDX:Open default org, (it will open your org in separate browser you authorized in step 2).
From App Launcher, find and select Service app (or any other app you want to add the LWC).
Click on gear icon and select Edit Page.
Drag the ‘helloSalesforceAdmins’ Lightning web component from the left pane custom area of the Lightning Components list to the the Page Canvas.
Click Save and Activation.
Click Assign as Org Default and Save.
Click arrow to return to the page.