Logo and Arrow

Salesforce Lightning Web Components - Part 1

Vincent Harriott

February, 2020

Introduction

The purpose of this document is to introduce Lightning Web Components, give some basic examples, and detail how we can use them to help your company.

What are Lightning Web Components?

Lightning Web Components, or LWCs, are the Salesforce implementation of the new breed of lightweight frameworks built on existing web standards. LWCs leverage templates, custom elements, shadow DOM, modules, decorators and other new language constructs that are available in ECMAScript 7 and later.

LWCs are the ‘new’ method for creating Lightning Components in Salesforce. The previous or original method which is still supported, is called Aura or the Aura Component model.

For my team of Salesforce Developers, this means a new way to build web applications that will in some instances replace the Model-View-Controller (MVC) paradigm associated with Visualforce and Apex. For completely new applications, we will use the VCCM (View-Controller-Controller-Model) paradigm with LWCs.

Did you notice above that the VCCM paradigm has 2 controllers? Yeah, that’s right! We’ll talk about that later. For a tease I’ll just say that one controller works on the client side, and the other on the server side.

When we are not building new apps from the ground up, we will leverage the ‘old’ method of creating Lightning Components: Aura.

My Salesforce Development Environment

If anyone has questions about this configuration, just reach out. I’ll be happy to explain.

  • Microsoft Edge web browser
  • Google Chrome web browser
  • Mozilla Firefox web browser
  • Opera web browser
  • Visual Studio Code – Insiders version with Salesforce Extension Pack
  • Salesforce Command Line Interface (CLI) for SFDX commands
  • Node Package Manager (NPM) version 6.14.4
  • NodeJS version 12.16.3
  • Atlassian Suite: Bitbucket and JIRA
  • SourceTree

We Develop Outside of Salesforce, not Inside

When we create Apex classes, Apex triggers, and Visualforce pages we have the option of using Salesforce’s built-in Developer Console to create and edit these components.

With Lightning Web Components things are different. We build and edit them using the Visual Studio Code IDE with the Salesforce Extension Pack. With these tools we can deploy code to our org using methods similar to Sublime and Eclipse IDEs.

First Example – Hello World!

Whenever I start to learn a new programming language, I’ll always start by creating the industry standard “Hello World” app because it’s the most basic and fastest way to be hands on and start coding.

Let’s get after it! Our first sample consists of only 2 files: an HTML and a JavaScript.

Code: HelloWorld.html

<template> <lightning-card title="HelloWorld" icon-name="custom:custom14"> <div class="slds-m-around_medium"> <p>Hello, {greeting}!</p> <lightning-input label="Name" value={greeting} onchange={changeHandler}> </lightning-input> </div> </lightning-card> </template>

Code: helloWorld.js

//vh. these first 2 lines are required! import { LightningElement } from 'lwc'; export default class HelloWorld extends LightningElement { //vh. 'greeting' below will be dynamic content: user can change on the fly! greeting = 'World'; changeHandler(event) { this.greeting = event.target.value; } }

Test Using the LWC Playground

Before describing the content, let’s see how the app will look in a web browser.

Since our two files are ‘client-side’ documents, we can display them in a web browser. Salesforce has provided an environment to rapidly test our LWCs called the LWC Playground: https://developer.salesforce.com/docs/component-library/tools/playground

All we have to do is replace the content of app.html with the content from helloWorld.html, and replace the content of app.js with helloWorld.js. Once we successfully copied these files to the Playground and saved them, you will see the HelloWorld app under the Preview section in the right pane.

Hello World LWC App

Test it out by entering, removing, and entering something else in the Name text box.

That’s It! We’ve created our very first (albeit very small) Lightning Web Component.

As we have shown, an LWC needs a minimum of an HTML file and a JavaScript file to run on a browser. But most of the LWCs we will create will also have a .js-meta.xml file and an optional CSS file, and these files will sit inside of a folder which will have the same name as your main class. We’ll talk about those later.

How the LWC HelloWorld Works

Lightning comes with a built-in robust style library. In the HTML (Template) file we use one of the built in styles (class="slds-m-around_medium" ) to give a default Lightning-style margin around most of the HTML content.

The heavy lifting of HelloWorld can be traced to the lighting-input field in the HTML file. The lighting-input field uses the onchange attribute to listen for a change to its value. When the value changes, the changeHandler() function in the JavaScript file executes.

To bind the changeHandler() function to the template, we use the same syntax with the curly braces: {changeHandler}.

Deploy HelloWorld to a Dev Org

Now we’re going to deploy our new LWC to our Dev org. Because Salesforce enables us to have multiple free Development (Dev) orgs, VH Enterprises sometimes uses them for demos and to test new functionality.

For this step we’ve already done the following:

  • Configured VSCode with the Salesforce CLI Extension
  • From VSCode we authorized a Salesforce Dev org
  • Created a VSCode Project, and created the Lightning Web Component with the name helloWorld.

Here’s what our LWC looks like in VSCode:

Hello World LWC in VsCode

The helloWorld.html and helloWorld.js are the same two files we used to test in the LWC Playground. Now we’ll describe the helloWorld.js-meta.xml file and how it helps us deploy the LWC to an org.

The Lightning Web Component folder must include a Component Configuration file to render UI. For our example that is the file helloWorld.js-meta.xml. This file defines the metadata values for the component, including the design config for the Experience Builder / Lightning App Builder.

Code: helloWorld.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> </span> <!-- VH. LWC Component Config file --> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
  • The isExposed tag set to true exposes the component to the Experience Builder / Lightning App Builder.
  • The target Lightning__AppPage enables the component to be used on an App page in Lightning App Builder.
  • The target Lightning__RecordPage enables the component to be used on a record page in Lightning App Builder.
  • The target Lightning__HomePage enables the component to be used on a Home page in Lightning App Builder.

    To move the component to our Dev org we right-click on the default folder in VSCode, then click on SFDX: Deploy Source to Org.

    Deploy HelloWorld LWC to Dev Org via VsCode

    In the Output tab in VSCode we can see the results of our deployment. We look for a message that starts with "Starting SFDX: Deploy Source to Org” and ends with “ended with exit code 0”.

    Additional Deployment Verification Step (Optional)

    Although we cannot view LWC code from within our Dev org, we can see the component and its Created By and Modified By Date/Time fields. We find our LWC in our org by going to Setup -> Custom Code -> Lightning Components -> Lightning Components. This gives us a list of all LWC and Aura Components. After locating helloWorld from this list, we click on it and see its details.

    Helloworld LWC Listed in Dev Org

    From the Modified By date and time, I know that the component was just updated by me.

    Add the Component to an App in Lightning Experience

    We can log in directly to our Dev org via the standard Salesforce URL (login.salesforce.com), or launch the Dev org directly from VSCode. These are the steps:

    1. Open the Command Palette, then type SFDX.
    2. Select SFDX: Open Default Org.
    3. From the App Launcher, select Sales.
    4. Click the gear icon SF Gear Icon then click on Edit Page.
    5. Find and drag the helloWorld LWC from the Custom section in the left column to the body of the page.

    We did the above steps and added the helloWorld LWC to a page we use to test and demo new LWCs to customers.

    Hello World LWC on Default Home Page  
    1. Click Save, then click Activate.
    2. Click Assign as Org Default
    3. Click Save, then click Save again.
    4. Click Back to return to the Home page.
    5. Refresh the page to see the new component in action!

    Summary

    In this document we introduced Salesforce Lightning Web Components (LWCs). Using a development environment that includes VsCode, we created a HelloWorld LWC, tested it in the Salesforce Playground, explained the code, then deployed the LWC to our Salesforce Development org.

    Next we are going to go a bit deeper and show two different methods to take and process user input with Lightning Web Components. We are also going to show a complete customer-ready application, built almost entirely with LWCs, that creates, edits, displays, and deletes records. This app will include other really cool features, so as they say in the movies...

    Stay Tuned!

    Part 2 - 1st CRUD Example