Lightning Web Components (LWC) have become an essential part of the Salesforce ecosystem, enabling developers to create interactive and responsive user interfaces that enhance the user experience. LWC empowers Salesforce administrators and developers to build custom UI components, streamline processes, and provide seamless interactions within the Salesforce platform.
Let's break down how these technologies fit into the development process:
- HTML (HyperText Markup Language): HTML is used to structure the content of your component. You define the layout and organize your component's elements using HTML tags. In LWC, HTML provides the skeleton of your user interface, including headings, lists, tables, forms, and more.
- CSS (Cascading Style Sheets): CSS is responsible for styling your Lightning Web Component. You can apply styles to your HTML elements, making them visually appealing and consistent with your Salesforce org's branding. CSS allows you to control colors, fonts, spacing, and layout.
I guess it’s enough of the introduction part of LWC, let’s dive into the Hands-On part now,
First thing we need to do is to install SFDX Cli in our system, the link to download it is Salesforce CLI. After installing it in our system with default config, we need to install extension of Salesforce CLI (Salesforce Extension Pack) in our VS Code. After enabling the extension:
- Need to Authorize our Org, we can press Ctrl + P then need to select the option Authorize my Org.
- Then will be redirected to Salesforce login page there we need to enter the username and password of our org. Our org will be added to VS Code
Creating Lightning Web Components
After installing Salesforce CLI and Authorizing the Org we need to create Lightning Web Components, for that we need to press Ctrl + P and need to select “Create Project with Manifest” after that we would be able to see a project created inside which we will be able to see different options like LWC, Apex Class, Triggers, etc. We again need to hit Ctrl + P and select “Create Lightning Web Component” after selecting this option we need to name it.
We will be able to see three files created yourComponentName.html, yourComponentName.js and yourComponentName.js-meta.xml.
- yourComponentName.html: This is the HTML file where you define the structure of your component's UI.
- yourComponentName.js-meta.xml: This XML file contains metadata information for your component, such as its API version and accessibility settings.
Edit the HTML (yourComponentName.html):
- In the yourComponentName.html file, you define the structure of your component's user interface (UI). You use HTML tags and attributes to create the visual elements, such as buttons, forms, text, and more.
- You can use standard HTML and take advantage of Salesforce-specific Lightning Base Components to build your UI efficiently. Lightning Base Components provide pre-built, customizable components like buttons, input fields, and data tables.
- Customize the HTML to match your design requirements, including layout, styling, and positioning of elements. You can use CSS classes for styling or include external CSS files if needed, which will of the same name as our component name.
- In the myComponentName.js file, you implement the logic and functionality of your LWC. This is where you handle user interactions, process data, and make calls to Salesforce APIs or external services.
- Use the component lifecycle hooks (e.g., connectedCallback, disconnectedCallback, renderedCallback, Navigation Mixin) to perform actions at different stages of the component's lifecycle.
Customize the Metadata (yourComponentName.js-meta.xml):
- The myComponentName.js-meta.xml file contains metadata for your component. It specifies the API version, description, and other configuration settings.
- Ensure that the apiVersion matches the Salesforce API version you are using in your org.
- We need to change the IsExpose tag to “true”. We also need to add Targets where we need to expose our component
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>57.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> <target>lightning__AppPage</target> <target>lightning__HomePage</target> <target>lightningCommunity__Page</target> </targets> </LightningComponentBundle>
Deploying Components to Org
After editing all the corresponding files in an LWC component and saving all changes, now it’s time to deploy the things to our Salesforce org, so that we could see some action on UI.
Deploying this component to Salesforce is probably the easiest task in LWC, thanks to Salesforce Extension in VS Code, it gives us privilege to do things on single click.
All you have to do is right click on your component name and you will see an option “Deploy Source to Org”. On selecting this option, you will be getting an output depending on correctness of your code. A success message will pop up. You have deployed your component to Org. To see this deployed component, you need to visit the pages that you have mentioned in the “<targets></targets>” tag in the xml.meta.js file. There you can drag and drop the component to the pages.
Check out another amazing blog by Hrishikesh here: Getting Started with Salesforce | All You Need to Know