Create First Lightning Web Component

Every Lightning Web Component (LWC) has the following files such as

1. html [defines the UI layer with html content]
2. js [defines the behavior of the LWC]
3. css [defines the look & feel]
4. svg [defines the Scalable Vector Graphics for the Lightning Web Component]
5. xml [defines the metadata of the LWC to set the component visibility in the Lightning Experience along with configuration of design attributes for Lightning App Builder]

Let’s say, we are going to create one Lightning Web Component named “welcomeWindow“. So, following files will be created by default in the root folder of “welcomeWindow” Lightning Web Component.

welcomeWindow.html
welcomeWindow.js
welcomeWindow.js-meta.xml

You can create the welcomeWindow.css and welComeWindow.svg file, but it’s optional.

1. Let’s talk about welcomeWindow.js-meta.xml first.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="welcomeWindow">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

At the time of saving this XML file, please set the value for isExposed tag as true. That means, this component will be visible into Lightning App Builder. If you focus the targets, you can see that we have passed the values for the target as lightning__AppPage, lightning__RecordPage, lightning__HomePage.

lightning_AppPage: LWC is visible for Lightning App.
lightning_RecordPage: LWC is visible for Lightning Record Page.
lightning_HomePage: LWC is visible for Lightning Home Page.

Later we will discuss about other separate configuration tags belongs to XML file.

2. Then, we need to focus on welcomeWindow.html file.

<!-- @name: welcomeWindow @description: used to show only welcome message by Lightning Web Component @author: Santanu Pal @date: 10 FEB 2019 Copyright (c) 2019 -->

<template>
    <lightning-card title="Welcome My Friends">    
        <lightning-layout>
                <lightning-layout-item flexibility="auto" padding="around-small">                    
                        Welcome to LWC Training Class
                </lightning-layout-item>
            </lightning-layout>
    </lightning-card>     
</template>

3. For now, we will not touch the welcomeWindow.js & welcomeWindow.css file.

4. You can see this Lightning Web Component (LWC) in any Lightning App Page, Lightning Record Page & Lightning Home Page based on welcomeWindow.js-meta.xml file.

Result

So, we have created our first Lightning Web Component which is currently displaying only welcome message.

Now, if we will inspect our first Lightning Web Component, we will see the name of our Lightning Web Component is replaced with this <c-welcome-window> in the default namespace. Please see this image:

Now, why welcome-window??  Let’s go to the next chapter.

Thanks for your time.

7,140 total views, 3 views today