Decoding Lightning Web Component

A Lightning web component basically has three files which store UI, logic and configuration part.

  • TestApp.html
  • TestApp.js
  • TestApp.js-meta.xml

TestApp.html
Lightning web component HTML file includes the template tag initially. The template tag contains the HTML structure of your component.

<template>
<template if:true={ready}>
    <div>
        <div>MyName: {name}</div>
        <div><img src={imgUrl}/></div>
    </div>
</template>
</template>

Curly braces are used to get the value of variables in the js file of the component.

TestApp.js

// import module elements
import { LightningElement, track } from 'lwc';
// declare class to expose the component
export default class App extends LightningElement {

// add decorator   
    @track ready = false;
    Name='test';
    imgUrl = 'www.google.com/cool.img';

// use lifecycle hook
    connectedCallback() {
        setTimeout(() => {
            this.ready = true;
        }, 3000);
    }
}

The LWC Module

The Lightning Web Component model uses modules (built-in modules were introduced in ECMAScript 6) to bundle core functionality and make it accessible to the JavaScript in your component file. The core module for Lightning web components is lwc.

we import these modules in the component's Js file and specify the functionality of the module.

import { LightningElement, track } from 'lwc';

In our example, the import statement uses the LightningElement and track functionality from the lwc module.

These two pieces of imported functionality are quite different.

  • LightningElement is our base class for Lightning web components.
  • track is a decorator. We delve into decorators in the next section.

Decorators

Decorators are often used in JavaScript to extend the behavior of a class, property, getter, setter, or method.

@track ready = false;

Lightning Web Component decorators Examples:

  • @api: Marks a property as public for use in your template or other components.
  • @track: Marks a property for internal monitoring. A template or function using this property forces a component to rerender when the property’s value changes.
  • @wire: Gives you a way to get and bind data. This implementation simplifies getting data from a Salesforce org.

Tip: But, be aware, apply only one Lightning Web Component decorator to a property at a time.
For example, a property can’t have @api (public reactive) and @track (private reactive) decorators at the same time.

Component Lifecycle Hooks

The Lightning Web Component model provides methods to connect your code up to critical events in a component’s lifecycle. These events include when a component is:

  • Created
  • Added to the DOM
  • Rendered in the browser
  • Encountering errors
  • Removed from the DOM
// use lifecycle hook
connectedCallback() {
	setTimeout(() => {
		this.ready = true;
	}, 3000);
}

Respond to any of these lifecycle events using callback methods.
For example, the connectedCallback() is invoked when a component is inserted into the DOM.

TestApp.js-meta.xml

One other file we haven’t covered yet is the component configuration file. This file provides metadata for Salesforce, including the design configuration for components intended for use in Lightning App Builder.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>false</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Required

  • apiVersion binds the component to a Salesforce API version.
  • isExposed (true or false) makes the component available from other namespaces. Only set this to true to make a component usable in a managed package or by Lightning App Builder in another org.

Optional

  • targets specify which types of Lightning pages the component can be added to in the Lightning App Builder.
  • targetConfigs let you specify behavior specific to each type of Lightning page, including things like which objects support the component.

Happy Coding !!!

Leave a Reply

Your email address will not be published. Required fields are marked *