What is Lightning Web Component?
Now you can build Lightning Components using two programming models: Lightning Web Components and the original Aura components.
Though you can design your own UI using CSS and HTML it also provides LDS i.e. Lightning Design Systems out of the box which makes it easier and faster to develop components.
A component to get weather information of a location entered.
Create a Lightning Web Component:
Before we start, you should have the following things’ setup in order to start the development of the component.
- Visual Studio Code
- Salesforce CLI
- Developer org
- Salesforce’s extension pack for VS Code
Steps to create a Project:
- Open command palette using view>Command Palette or Ctrl+shift+p.
- Select SFDX. Create Project with Manifest.
- Select Standard.
- Enter the name of your project or press enter for default.
We have successfully created the project, now we are going to create a lightning web component and start working on it.
- Open command palette.
- Select Create Lightning Web Component.
- Enter the name of your component and press enter.
Structure of LWC:
It consists of three main files. They are .html, .js and .xml. All the HTML goes to .html and all the logic for rendering and operations for Apex are done in .js file.
The .xml file is just the configuration file that is used to provide information about where the component should be visible and the title etc.
We are just making a basic LWC in which we will show some text on a card.
No need to change anything in .js file since we are just showing the text in the component.
We need to set isExposed to true and also specify the target where we want this component to be visible. In this case it is lightning__RecordPage.
In order to deploy, open your command palette and click on Deploy Source to Org.
Adding the component to a Record Page:
- Go to a page of a Record page of a particular Object where you want your component to be visible.
- Click on the Settings icon on the top right of the page and select Edit Page.
- In the builder, search for your component in the Custom section on the left side of the page.
- Drag and drop the component to your desired location and click on save.
- Go back to the page and the component will be visible.