Pages

Saturday, January 26, 2019

Lightning Web Component : My First Web Component

What are Lightning Web Components?

Now you can build Lightning components using two programming models: Lightning Web Components (LWC), and the original model, Aura Components. Lightning web components (LWC) are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

Lightning Web Components (LWC) uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

Is it necessary to learn Lightning Component before we start with LWC?

Not necessary, knowledge of Lightning Component will be an add-on to understand LWC easily but it is not mandatory. We can directly start learning LWC with the help of Lightning Web Component Library provided by Salesforce.

How to create a Lightning Web Component?

We cannot create LWC directly from our developer console. We need to have SFDX to create our own LWC. Other prerequisite to create LWC are as follows:
  • VS Code Editor
  • Salesforce Extension Pack (Extension for VS Code)
  • Lightning Web Components (Extension for VS Code)
  • Salesforce CLI Command Tool
  • SFDX

Creating first Component: Temperature Calculation

I have tried to create a simple component which calculates temperature calculation centigrade to fahrenheit or vice versa. Please ignore bad UI representation I am not good into CSS and UI representation.

TempConverter.html
<template>
  <lightning-card title="Temperature Converter" icon-name="standard:formula">
    <lightning-layout multiple-rows="true">
      <lightning-layout-item size="12" padding="around-small">
        <lightning-input type="number" label="In Centigrade" 
        name="centigrade" onchange={onNumberChange}></lightning-input>
      </lightning-layout-item>
      <lightning-layout-item size="12" padding="around-small">
          <p class="slds-m-top_medium" style="color:blue; font-weight:bold;">{
            finalFahrenheitresult}</p>
      </lightning-layout-item>
      <lightning-layout-item size="12" padding="around-small">
        <lightning-input type="number" label="In Fahrenheit" 
        name="fahrenheit" onchange={onNumberChange}></lightning-input>
      </lightning-layout-item>
      <lightning-layout-item size="12" padding="around-small">
          <p class="slds-m-top_medium" style="color:blue; font-weight:bold;">
            {finalCentigraderesult}</p>
      </lightning-layout-item>
      
    </lightning-layout>
  </lightning-card>
</template>
TempConverter.js
import { LightningElement, track } from 'lwc';

export default class TempConverter extends LightningElement {
    @track centigradeValue;
    @track fahrenheitValue;
    @track centigradeResult;
    @track fahrenheitResult;

    /**
     * This method will be called when either centrigade or fahrenheit value 
     * is changed
     * Accordingly it will set the centrigade or fahrenheit property in 
     * javascript
     * @author Prateek Tandon
     * @param {} event 
     */
    onNumberChange(event){
        const tagName = event.target.name;
        if(tagName === "centigrade"){
            this.centigradeValue = event.target.value;
            if(this.centigradeValue !== ''){
                this.fahrenheitResult = (this.centigradeValue * 1.8)+32;
            }else{
                this.fahrenheitResult = '';
            }
        }else{
            this.fahrenheitValue = event.target.value;
            if(this.fahrenheitValue !== ''){
                this.centigradeResult = (this.fahrenheitValue-32)*0.55;
            }else{
                this.centigradeResult = '';
            }
        }
    }

    /**
     * Property getter
     * This method will automatically be called when fahrenheitResult value
     * is changed. This getter method can be easily accessed in template using 
     * {finalFahrenheitresult}
     * @author Prateek Tandon
     */
    get finalFahrenheitresult(){
        if(this.fahrenheitResult === 0 || this.fahrenheitResult){
            return 'Value in Fahrenheit ' + this.fahrenheitResult;
        }
        return '';
    }

    /**
     * Property getter
     * This method will automatically be called when centigradeResult value
     * is changed. This getter method can be easily accessed in template using 
     * {finalCentigraderesult}
     * @author Prateek Tandon
     */
    get finalCentigraderesult(){
        if(this.centigradeResult === 0 || this.centigradeResult){
            return 'Value in Fahrenheit ' + this.centigradeResult;
        }
        return '';
    }
}

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

 Output:



This is the simplest Lightning Web Component that I have created. Please let me know if you find any scope of improvement and I am still learning LWC components.
Posted by