In my previous blog, I explained all the pre-requisite steps to set up the LWC development environment on your system.
Now I'll explain
It will create a lwc component.
Note: As best practice component name should be in CAMEL case.
Our lwc component by default has 3 files: .html, .js and meta.xml.
We can also add additonal .css, .svg
Everything will come under <template> tag only.
Now I'll explain
- How to create your fist lightning web component?
- Significance of each component bundle file.
- Enable My domain and Dev Hub.
- Create scratch org
- Deploy component to Org or Scratch org
Create Lightning Web component:
Create Project:
Open Visual Studio Code > Open command pallet by pressing 'Ctrl + Shift + P ' and run follwing command > Select 'SFDX: Create Project' > Enter Project name for exmaple : 'SalesforceTechnoWarrior'Create Lightning Web Component
run command > 'SFDX: Create Lightning web component' > Enter component name (helloSalesforce) > Select 'force-app\main\default' as directory.It will create a lwc component.
Note: As best practice component name should be in CAMEL case.
Component bundle
No alt text provided for this imageOur lwc component by default has 3 files: .html, .js and meta.xml.
We can also add additonal .css, .svg
1. .html file:
It holds the markup of your component. You can write normal HTML tags or lightning component elements inside <template> tag.Everything will come under <template> tag only.
2. .js file:
It defines business logic and event handling like On click of a button, on page load, get data from Salesforce object, etc.- JS file by default has 2 statements - import and export.
- Import statement: is used to import any ECMA script module in the lightning web component.
- 'lwc' is a module and we are importing 'LightningElement' property from lwc module so that we can use it to construct our custom component. We can also import other properties from 'lwc' module like track, api, wire etc. We can also write multiple import statements as well.
import { LightningElement,track,api,wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
- Now we use 'Export' statement to use variables(other code to use a class, function, or variable) declared in the module ('lwc').
All of our client-side logic will come under this {} parenthesis. So you need to declare all of your properties and methods here.
Note: Our component file name is in CAMEL case (helloSalesforce) and our class name is in PASCAL case (HelloSalesforce).
3. meta.xml file:
Every component must have a meta config file. It defines the metadata values for the component like
- Design configuration properties, allowing lwc to be available in the lightning app builder.
- We can target lwc components to Record Page, App Page, Hom page, Community Page, Utility bar, Lightning tab, etc by using <target> tag
Check above screenshot of meta.xml file
Point 1: <isExposed> is set to true to exposes the component in all orgs, and in Lightning App Builder, Community Builder, and managed packages. It makes the component available from other namespaces.
Point 2: Using <masterLabel> and <description> tag we can provide some meaningful label and description to our custom lwc component which can be seen by admin in the lightning app builder.
Point 3: Using <target> tag we can specify where admin can add lwc component like Account record page, app page, or community page.
Point 4: Using <property> We can define configurable/custom properties to make generic components. While adding this component to page, admin can set values for it.
When we deploy our component to Org then while adding it to any app page we can see the following important things:
4. .css file:
Additionally, we can add a .css file to lwc component folder to define our custom UI styles. CSS file name should be same as the component name.
Right-click on lwc component folder name > Add file > enter file name as 'helloSalesforce.css' > Add your classes like normal css styles.
5. .svg file:
Scalable Vector Graphics is an XML-based image format. It is an icon which is visible in lightning app builder same as in AURA components.
Code for Lightning Web Component
Now we have a deep understanding of each file of lwc component. Lets copy-paste following code into your LWC component:
helloSalesforce.html
<template>
<!--html elements-->
<h2>Hello Salesforce</h2>
<p>This is my first lightning web component </p>
<div>Keep Learning...Keep Sharing...!!!</div>
<!--lightning elements-->
<lightning-card title={prop1}>
<lightning-button label="New" slot="actions"></lightning-button>
<p class="slds-p-horizontal_small">LWC Component Bundle | Build your first component</p>
<p slot="footer">Follow me on Linkedin : sud-gupta</p>
</lightning-card>
</template>
helloSalesforce.js
import { LightningElement, track,api, wire } from 'lwc';
export default class HelloSalesforce extends LightningElement {
/*
All our properties and methods will come here
*/
@api prop1 = 'Salesforce Techno Warrior'; // Defining default value for configurable property
@api prop2 = false;
//To expose a public property, decorate it with @api.
helloSalesforce.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>47.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Hello Salesforce Component</masterLabel>
<description>Here we specify component description component.</description>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightningCommunity__Page</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__AppPage,lightning__RecordPage">
<property name="prop1" type="String" />
<property name="prop2" type="Boolean" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
helloSalesforce.css
(right-click on lwc folder name and add new file componentName.css)
h2{
font-size: large;
color: blue;
background-color:white;
}
p{
background-color:white;
font-size: medium;
}
div{
border-bottom: 1px solid grey;
width:100%;
font-size: large;
color:tomato;
background-color:rgb(235, 233, 233);
margin-bottom: 20px;
}
Enable My domain and Dev Hub.
Before we deploy our component to salesforce, we need to make sure my domain and dev are enabled/configured in salesforce org.
Follow this video to create free developer of, enable my domain and dev hub.
Deploy LWC Component to your Org
We can deploy lwc components to scratch org (short-lived org for testing purpose) or main org. Here we will be deploying to our developer org (main org).
Ctrl + Shift + P > run following command :
- SFDX: Authorize an Org : Login with your salesforce org. (you can skip alias name)
- SFDX: Deploy This Source to Org
Add this component to Lightning app page.
Setup > Lightning app builder > Create a new App page > edit page > find 'Hello salesforce component' in custom list > drag it to page > save > activate
Keep Learning ... Keep Sharing...!!!
