Create And View Lightning Web Components

Before we dig into the meatier topics on this blog, let’s get a basic step out of the way. A lot of the things we will work with are Lightning components, Aura or LWC, and I will be providing sample code for you to use if you want to follow along. To see the code in action, you will usually have to create and view Lightning Web Components. Let’s learn how to do that now!

Let’s first start with a Lightning Web Component. Go to Visual Studio Code and open up a project connected to your Salesforce org. Then open the Command Palette (Ctrl + Shift + P) and type in and choose ‘SFDX: Create Lightning Web Component:’

Enter a name for this component (I chose SortedTable for this exercise) and choose force-app\main\default\lwc as the directory to place it in (this should be the first value in the list):

Once you have made the component, take a look at it in the file tree. Open up the filepath force-app\main\default\lwc and you will see a folder for the component you just created. Open that up to the see files inside:

All LWC components are made up of an HTML file and a Javascript file (.html and .js extensions, respectively). The .js-meta.xml file is a Salesforce configuration file needed to recognize this new component. It is automatically created for you through the Command Pallette function you used when you initially made the component. The .js-meta.xml file for a component needs to have the following lines for it to be added into a page:

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

Make the edits to the .js-meta.xml and right-click on your component folder. Choose ‘SFDX: Deploy Source To Org’ to send it over to your Salesforce instance!

Now that the component is in Salesforce, let’s add it to a page. Go to your Salesforce org and click on the gear icon in the upper right corner Choose ‘Setup.’ On the setup screen, use the Search bar in the upper left and type in ‘Lightning App Builder.’ You will see the list of options filter down to that choice. Select it and click on the New button near the center of the screen. Choose to create an App Page:

Give it whatever name you want (I chose Sorted Table again) and select ‘One Region:’

Now, you can add a component to this page! Select your component from the left hand menu under custom and drag it to your page:

If you do not see your custom component, you may see a message that says a custom domain is required to use custom components. If so, click on the link portion of that message and follow the instructions to create and activate your domain. more information can be found here, but you will essentially have to pick a name, confirm it through email, and then activate your domain through the email link.

Once your component is on the page, click ‘Save’ and click ‘Activate’ on the popup. You will then see a popup with three tabs. Navigate to the second one and called ‘Lightning Experience’ and click an option in the left-hand menu (in this case I chose Sales). Then, click ‘Add page to app’ in the right-hand menu:

Your component will now appear in whatever app you selected. Let’s see it in action! Click ‘Save’ in the popup to finalize this and click ‘Save’ one more time on the Lightning App Builder screen. Then, click the ‘Back’ icon in the upper right corner to go back to Setup. From Setup, click on the ‘App Launcher’ icon and choose Sales:

And Sorted Table is in the tab list at the top! There’s not much to see yet, if you click on it, but we will add code to it. You can use these steps to create and view lightning web components for any project you have.