Basics of Lightning Web Component
This blog focuses on creating a basic Lightning Web Component in Salesforce using Visual Studio Code.
Use Case: Create a basic LWC to be placed on the contact record page and understand about the track reactive property.
Pre requisites
- Salesforce CLI
- VS Code with Salesforce Extension Pack (if you have problems in opening VS Code in mac go to System Preferences > Security & Privacy > General and choose Open Anyway).
- Create a SFDX project and preferably use scratch org for development.
Create a new LWC component using VS Code
Step 1: Open command palette in VS Code by pressing cmd+shift+p on mac or ctrl+shift+p on windows → search and select Create Lightning Web Component
sfdx force:lightning:component:create -n sampleLWC --type lwcThe above when you want to use CLI to create the LWC and “sampleLWC” is the component name, type “lwc” is crucial else it will create an aura component.
Step 2: If you go with the command palette option enter the name of the lwc component to be created and select default path. This should create basic three files .html, .js and .js-meta-xml. (we can also create .css and .svg files)
Configuration File (.js-meta.xml)
<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"><apiVersion>47.0</apiVersion><isExposed>false</isExposed></LightningComponentBundle>
<isExposed> if it is false then the component is not exposed to the lightning app builder, community builder.
Now let us make the <isExposed> to true and expose the component to a record page for contact object.
<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"><apiVersion>47.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Sample LWC</masterLabel><targets>
<target>lightning__RecordPage</target>
</targets><targetConfigs>
<targetConfig targets="lightning__RecordPage"><objects>
<object>Contact</object>
</objects></targetConfig>
</targetConfigs></LightningComponentBundle>
more details about the configuration tags.
HTML File (.html)
The HTML file for LWC gets created with the root tag <template>. In this example we are going to test the tracked variable.
<template><lightning-card title="Test Track Variable" icon-name="standard:contact">Tracking {trackedVariable}<lightning-input label="Name" value={trackedVariable} onchange={handleChange}></lightning-input></lightning-card></template>
Check the below javascript file to understand how the value is bound with the tracked variable and handleChange function.
JavaScript File (.js)
Every JS file will get created with the import statement importing the LightningElement from the lwc module.
import { LightningElement } from 'lwc';export default class SampleLWC extends LightningElement {}
The “export default” keyword exports the SampleLWC class for other components to use.
import { LightningElement, track } from 'lwc';export default class SampleLWC extends LightningElement {@track trackedVariable = 'Test';handleChange(event) {
this.trackedVariable = event.target.value;
}}
“@track” is used to track the private property if you need the component to re-render if the property value changes.
Push the code to the scratch org using VS Code
Open command palette in VS Code by pressing cmd+shift+p on mac or ctrl+shift+p on windows → search and select Push Source to Default Scratch Org.
Once the code is pushed, due to how the configuration file is setup the component will be only be available to be used in Contact Record Page.
Test the Tracked Variable
- Testing with the “@track” notation
Both the variable in the console also above the input field changes “@track” re-renders the component on change of the variable.
2. Removing “@track” from the “@track trackedVariable = ‘Test’;” in the JS file.
After removing “@track”, the component does not re-render and only the console value gets updated.
Useful Resources
Please provide any comments or feedback.
