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.

1. 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.
2. Run SFDX: Open Default Org to log into the org to which you want to add the LWC.
3. Run SFDX: Refresh SObject Definitions to get completion suggestions for your SObjects related code.
4. 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:

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContacts() {
        return [
SELECT
Id,
Name,
Email,
Phone
FROM Contact
WITH SECURITY_ENFORCED
LIMIT 10
];
    }
}

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

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

<template>
    <lightning-card title="Contact List">
        <template if:true={contacts.data}>
            <template for:each={contacts.data} for:item="contact">
                <div class="slds-var-p-horizontal_medium" key={contact.Id}>
                    <p>{contact.Name}, {contact.Phone}</p>
                </div>
            </template>
        </template>
        <template if:true={contacts.error}>
            <p>{contacts.error}</p>
        </template>
    </lightning-card>
</template>

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

import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';

export default class ContactList extends LightningElement {
    @wire(getContacts) contacts;
}

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

<?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__HomePage</target>
 	</targets>
</LightningComponentBundle>

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

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

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

j

No Results

Search Tips:

• Please consider misspellings
• Try different search keywords

Salesforce Extensions for Visual Studio Code

Release Notes

Salesforce Development Models

Installation Instructions for Desktop

Create Project

Add Project to Source Control

Salesforce Extension Pack Features

Programming Languages

Apex Development

Aura Development

Lightning Web Components Development

LWC Development Quick Start

Test LWC Components

Lint LWC Components

Execute Queries with SOQL Builder

Visualforce Components Extension

Salesforce Functions

Deploy and Retrieve Code

Remote Development (Beta)

LWC Local Development Server (Beta)

FAQ

Troubleshooting Tips

Bugs and Feedback