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:

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:
  1. In the contactList.js file, cut and paste this code and save:
  1. Cut and paste the following code in the contactList.js-meta.xml file and save:
  1. 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.

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.
  1. Drag the contactList Lightning web component from the Custom area of the Lightning Components list to the top of the Page Canvas.
  2. Click Save.
  3. Click Activate.
  4. Click Assign as Org Default.
  5. Click Save.
  6. Click Save again, then click Back arrow to return to the page.
  7. To view your new component, refresh the page.

PNG showing the LWC component