This tutorial offers a straightforward guide to creating Lightning Web Components (LWC) for use in Salesforce systems. We will start with the necessary preparations to set up the Development Environment, followed by exploring the basic structure using a simple example named "Simple." Throughout the tutorial, we will deploy the components to a Salesforce testing environment and integrate them into a page.
Lightning Web Components (LWC) represents Salesforce's innovative approach to lightweight web frameworks based on industry standards. It incorporates specialized Salesforce services into the core stack, enhancing development with essential features. These include the Lightning Data Service, which offers declarative access to Salesforce data and metadata, along with efficient data caching and synchronization. Additionally, LWC leverages the Base Lightning Components—an extensive suite of more than 70 UI elements, each developed as custom elements for seamless integration into applications. With Lightning Web Components, Salesforce developers can harness the power of modern web standards while leveraging a robust set of specialized tools tailored for building dynamic, data-driven applications.
Reference:Introducing Lightning Web Components
Preparation: Ensure the Following Software is Installed
The Apex language server is provided as part of the Salesforce Apex extension for VS Code and depends on the Java Development Kit (JDK). It requires installing JDK version 17 (recommended).
Java Setup Guide
- open your VSCode.
- Navigate to the desired project directory.
- Ctrl + P and Run: SFDX: Create project.
- Choose the standard template.
- Enter the project name.
Create a new LWC component
-
Make sure you are in the project directory.
-
Ctrl + P and Run: SFDX: Create Lightning Web Component.
-
Enter the component name.
-
Choose the storage location.
*The default storage location for LWC components is: [folder name]\force-app\main\default\lwc[component name].
The component consists of three main parts:
<template>
<!-- lightning-card is a built-in template -->
<lightning-card if:true="{ready}">
<div id="display" class="slds-m-around_medium">
<!-- Use curly braces to access variables from JS -->
<div>Name: {name}</div>
<div>Description: {description}</div>
<lightning-badge label="{tag1}"></lightning-badge>
<lightning-badge label="{tag2}"></lightning-badge>
<lightning-badge label="{tag3}"></lightning-badge>
<div><img src="{pictureUrl}" /></div>
</div>
</lightning-card>
</template>
import { LightningElement } from "lwc";
export default class simple extends LightningElement {
// Variables used in HTML are declared here
name = "catName";
description = "A cute little cat";
pictureUrl = "https://github.com/Sorab0428/LWC-beginners-guide/blob/master/cat.jpeg?raw=true";
tag1 = "picture";
tag2 = "cute";
tag3 = "cat";
ready = true;
}
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.0</apiVersion> <!-- API version, usually default is fine -->
<isExposed
>true</isExposed> <!-- Whether this component is exposed in Salesforce -->
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
-
More about settings related to simple.js-meta.xml
XML Configuration File Elements -
Many basic templates for Lightning Web Components provided by Salesforce
Built-in Lightning Component Modules
Includes Aura Components and Lightning Web Components. Use the filter options: Click on Filters → Programming Models → Lightning Web Components.
- Make sure you are in the project directory.
- Ctrl + P and Run: SFDX: Authorize an Org.
- Choose the connection method, In here we select "Project Default", open a new tab, and choose your login account.
- Authentication Successful.
If you don't have a Salesforce testing environment yet, please register first.
Sign up for your Salesforce Developer Edition
- Ctrl + P and Run: SFDX: Deploy This Source to Org
- Right-click on the component folder in VS Code and select SFDX: Deploy Source to Org.
- Navigate to the object page where you wish to incorporate the "simple" component and click "Edit Page."
- In the left navigation pane under "Custom Components," locate the uploaded "simple" component.
- Drag the component to your desired location on the page.
- Save the changes and activate the page to begin using the component effectively.
We have successfully created our first Lightning Web Component in our own testing environment.Thank you for exploring this Lightning Web Component tutorial. Feel free to contribute, provide feedback, or raise issues on GitHub. Happy coding!