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
.
- 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.
- Log in to the org to which you want to add the LWC.
- Run the SFDX: Refresh SObject Definitions command from the Command Palette to get completion suggestions for your SObjects related code.
- From the Command Palette, 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.
- 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:
- In the
contactList.js
file, cut and paste this code and save:
- Cut and paste the following code in the
contactList.js-meta.xml
file and save:
- Right-click the default folder under
force-app/main
and run SFDX: Deploy Source to Org to deploy your code to the org.
- 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.
- 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.