LWC Development Quick Start

Create a Lightning web component called contactList that displays contact names and phone numbers in your app. You get the contact information to display from an Apex class called ContactController.

Add an Apex Class that Queries Contacts

In VS Code, run the command SFDX: Create Project from the Command Palette to create a Salesforce DX project if you don’t have one.
Run SFDX: Open Default Org to log into the org to which you want to add the LWC.
Run SFDX: Refresh SObject Definitions to get completion suggestions for your SObjects related code.
Run SFDX: Create Apex Class and create a class called ContactController.

Next let’s add a method called getContacts to this class. Make this method both public and static. Because it’s a static method, you don’t need to create an instance of the class to access the method. You can use the name of the class followed by a dot (.) and the name of the method. This method queries a set of fields on the contact object. Paste this code into ContactController.cls:

1public with sharing class ContactController {
2    @AuraEnabled(cacheable=true)
3    public static List<Contact> getContacts() {
4        return [
5SELECT
6Id,
7Name,
8Email,
9Phone
10FROM Contact
11WITH SECURITY_ENFORCED
12LIMIT 10
13];
14    }
15}

Next, add the LWC component that displays the contact information.

Create a Component to Display Contact Information

From the Command Palette, run SFDX: Create Lightning Web Component and create a component called contactList in the default location.
In the contactList.html file, cut and paste the following code, then save the file:

1<template>
2    <lightning-card title="Contact List">
3        <template if:true={contacts.data}>
4            <template for:each={contacts.data} for:item="contact">
5                <div class="slds-var-p-horizontal_medium" key={contact.Id}>
6                    <p>{contact.Name}, {contact.Phone}</p>
7                </div>
8            </template>
9        </template>
10        <template if:true={contacts.error}>
11            <p>{contacts.error}</p>
12        </template>
13    </lightning-card>
14</template>

In the contactList.js file, cut and paste this code and save:

1import { LightningElement, wire } from 'lwc';
2import getContacts from '@salesforce/apex/ContactController.getContacts';
3
4export default class ContactList extends LightningElement {
5    @wire(getContacts) contacts;
6}

Cut and paste the following code in the contactList.js-meta.xml file and save:

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 	<apiVersion>57.0</apiVersion>
4 	<isExposed>true</isExposed>
5 	<targets>
6
7   		<target>lightning__HomePage</target>
8 	</targets>
9</LightningComponentBundle>

Right-click the default folder under force-app/main and run SFDX: Deploy Source to Org to deploy your code to the org.

Add the New Component to Your App in Lightning Experience

In Visual Studio Code, open the Command Palette and run SFDX: Open Default Org. This command opens your org in a separate browser.
From the App Launcher find and select Sales.
Click Setup gear then select Edit Page.

If you don’t see Edit Page, click the Setup gear and open the setup page. In the search field at the top of the page, type “Home”. In the Home menu, toggle Advanced Seller Home off. Now, go back to your Sales app and reload it. Click the Setup gear icon again. This time, you’ll be able to select the Edit Page option.

Drag the contactList Lightning web component from the Custom area of the Lightning Components list to the top of the Page Canvas.
Click Save.
Click Activate.
Click Assign as Org Default.
Click Save.
Click Save again, then click Back arrow to return to the page.
To view your new component, refresh the page.

PNG showing the LWC component