Template Rendering in Lightning Web Components (LWC) Salesforce

Hello Trailblazers!

In the realm of Salesforce development, Lightning Web Components (LWC) have emerged as a powerful tool for building dynamic and interactive user interfaces. At the heart of LWC lies its template rendering system, which governs how components display data and respond to user interactions.

In this blog, we’ll learn about template rendering or conditional rendering in LWC and provide an example.

So, let’s get started…

Understanding Template Rendering in LWC

Template rendering in LWC is the process of dynamically generating HTML content based on the component’s template file and the data provided to it. LWC uses a reactive rendering approach, meaning that the UI updates automatically whenever the underlying data changes. This results in a smooth and responsive user experience.

Let’s understand this with a proper example.

Take a scenario where a user requests account creation. So here is the “Account Request” form (a record edit form) along with its fields like Name, Phone, Email, Shipping Address, Billing Address, and a checkbox field—“Billing Address Same as Shipping Address.”

When the user checks the checkbox, all the fields in the Billing Address should be hidden (as this indicates that the billing address is equal to the shipping address). When the user unchecks the checkbox or keeps it as it is, the billing address field should be visible, and the user should be able to add details to it.

The Manufacturer’s Guide to Marketing Through Partner Enablement in 2021

Learn how partnerships allow manufacturers to scale revenue growth beyond what’s possible with direct sales alone.

Get the Guide

If you would like to learn how to create a record edit form in LWC, you can go with this link.

Solution LWC:

templateRenderingLWC.html

<template>
    <div class="slds-modal__content slds-p-around_medium" >
        <div class="slds-box box-config  slds-box_x-small slds-text-heading_medium" style="font-family:Arial ;" ><b>Make a request for your Account here!!</b></div>

        <div class="slds-grid slds-wrap slds-p-around" >
            <lightning-card>

                <lightning-record-edit-form object-api-name={Account_Request_Object} onsuccess={handleSuccess} onerror={handleError} >
                    <div class="slds-grid" >
                        <div class="slds-size_2-of-2 slds-grid slds-wrap slds-form_horizontal slds-form" >
                            <lightning-input-field field-name={Name} ></lightning-input-field>
                            <lightning-input-field field-name={Phone} ></lightning-input-field>
                            <lightning-input-field field-name={Email} ></lightning-input-field>
                            <lightning-input-field field-name={ShippingCity} ></lightning-input-field>
                            <lightning-input-field field-name={ShippingState} ></lightning-input-field>
                            <lightning-input-field field-name={ShippingPostalCode} ></lightning-input-field>
                    
                            <lightning-input-field field-name={BillingAddSameasShippingAdd}   type="checkbox" onchange={handleCheckboxChange} ></lightning-input-field>
    
                                <template if:false={visible} >
                                    <div class="slds-size_2-of-2 slds-grid slds-wrap slds-form_horizontal slds-form" >

                                        <lightning-input-field field-name={BillingCity} ></lightning-input-field>
                                        <lightning-input-field field-name={BillingState} ></lightning-input-field>
                                        <lightning-input-field field-name={BillingPostalCode} ></lightning-input-field>
                                    </div>
                                   
                                </template>                       
                        </div>
                    </div>
                    <lightning-button type="submit" variant="brand" label="Save Request" class="slds-align_absolute-center" ></lightning-button>

                </lightning-record-edit-form>
            </lightning-card>

        </div>
    </div>
</template>

templateRenderingLWC.js

import { LightningElement, track } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import ACCOUNT_REQUEST_OBJECT from '@salesforce/schema/AccountRequest__c';
import NAME_FIELD from '@salesforce/schema/AccountRequest__c.Name';
import PHONE_FIELD from '@salesforce/schema/AccountRequest__c.Phone__c';
import EMAIL_FIELD from '@salesforce/schema/AccountRequest__c.Email__c';
import BILLING_CITY_FIELD from '@salesforce/schema/AccountRequest__c.BillingCity__c';
import BILLING_STATE_FIELD from '@salesforce/schema/AccountRequest__c.BillingState__c';
import BILLING_POSTAL_CODE_FIELD from '@salesforce/schema/AccountRequest__c.BillingPostalCode__c';
import SHIPPING_CITY_FIELD from '@salesforce/schema/AccountRequest__c.ShippingCity__c';
import SHIPPING_STATE_FIELD from '@salesforce/schema/AccountRequest__c.ShippingState__c';
import SHIPPING_POSTAL_CODE_FIELD from '@salesforce/schema/AccountRequest__c.ShippingPostalCode__c';
import CHECKBOX_FIELD from '@salesforce/schema/AccountRequest__c.Billing_Add_same_as_Shipping_Add__c';

export default class TemplateRenderingLWC extends LightningElement {

    @track visible = false;

//Map the HTML side and above imported object and its fields here
Account_Request_Object = ACCOUNT_REQUEST_OBJECT;
Name = NAME_FIELD;
Phone = PHONE_FIELD;
Email = EMAIL_FIELD;
BillingCity = BILLING_CITY_FIELD;
BillingState = BILLING_STATE_FIELD;
BillingPostalCode = BILLING_POSTAL_CODE_FIELD;
ShippingCity = SHIPPING_CITY_FIELD;
ShippingState = SHIPPING_STATE_FIELD;
ShippingPostalCode = SHIPPING_POSTAL_CODE_FIELD;
BillingAddSameasShippingAdd = CHECKBOX_FIELD;

//Handle checkbox chanages here
    handleCheckboxChange(event) {
             //this.visible = event.target.checked;
             if(this.visible==true)
             {
                 this.visible=false;
             }
             else{
                 this.visible=true;
             }
             
        }


//Handle success event here
handleSuccess(event){
    const toastEvent = new ShowToastEvent({
        title : 'Success',
        message : 'Your Account creation request has been sent successfully' ,
        varient : 'success' 
    });
    this.dispatchEvent(toastEvent);
}

//Handle Error event here
handleError(event) {
    let errorMessage = event.detail.detail;
    console.log("response",errorMessage);
    this.dispatchEvent(
        new ShowToastEvent({
            title: 'Error',
            message: errorMessage,
            variant: 'error'
        })
    );
}
}

templateRenderingLWC.xml

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

LWC Output 1:

Here, we did not check the box. Thus, we filled out all the values.

 LWC Output 2:

In the above output, we used the template rendering. Thus we check the checkbox, it hides the billing fields.

You can see that here we used a checkbox to make the Billing Address the same as the Shipping address. But how is it working?

So, to make the billing address the same as the Shipping address, we simply implement the trigger logic. If you would like to learn more about it, follow this link.

Conclusion

In this way, we implemented the template rendering or conditional rendering here using the address example.

Happy Reading!

Resources:

1. Lightning Web Components Developer Guide
2. Lightning Component Library
3. Trailhead: Lightning Web Components Basics

You Can Also Read:

1. An Introduction to Salesforce CPQ
2. Salesforce CPQ and its Key Features
3. Unlocking the Power of AI: Einstein for Developers
4. Revolutionizing Customer Engagement: The Salesforce Einstein Chatbot