Conditional rendering is a technique for displaying components or elements based on a predetermined condition. For example, conditional rendering is used if you want to display different messages at different times. We can render different LWC components or elements if a condition using conditional rendering in LWC is met.

In today’s blog, we will show you how to use conditional rendering in the lightning web component.

So, Let’s begin!

conditionalRendering.html

The ConditionalRendering class sets the value of the is SystemAdministrator property when a page loads.

If the is SystemAdministrator property is true, the if: true directive displays the nested template. You are now a System Administrator!

If the is SystemAdministrator property is false, the if: true directive displays the next nested template. You have successfully registered as a Business User!

Code

<template>
<lightning-card title="Conditional Rendering Example" icon-name="standard:user">
<div class="slds-m-around_medium">
<template if:true={isSystemAdministrator}>
<div class="slds-m-vertical_medium">
Welcome, you are a System Administrator!
</div>
</template>
<template if:false={isSystemAdministrator}>
<div class="slds-m-vertical_medium">
Welcome, you are a Business User!
</div>
</template>
</div>
</lightning-card>
</template>

conditionalRendering.js

We are not manipulating the DOM in this JavaScript; instead, we are importing the profile name from Salesforce and changing the value of the is SystemAdministrator property.

Code

import { LightningElement, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import Id from '@salesforce/user/Id';
import ProfileName from '@salesforce/schema/User.Profile.Name';
export default class ConditionalRendering extends LightningElement {
userId = Id;
isSystemAdministrator = false;
@wire(getRecord, { recordId: Id, fields: [ProfileName] })
userDetails({ error, data }) {
if (error) {
this.error = error;
} else if (data) {
if (data.fields.Profile.value != null && data.fields.Profile.value.fields.Name.value=='System Administrator') {
this.isSystemAdministrator = true;
}
}
}
}

conditionalRendering.js-meta.xml

This configuration file makes the component available for all Lightning page types except the home page, which is only supported on desktops.

Code

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__HomePage">
<supportedFormFactors>
<supportedFormFactor type="Large" />
</supportedFormFactors>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>

Output:

  • if a User with a profile System Administrator loads the home page, the lightning web component will display the following message.
  • if a User with a profile other than System Administrator loads the home page, the lightning web component will display the following message.

Conclusion

We hope you find the tutorial helpful. Feel free to use the code to implement conditional rendering in LWC.

Also, stay hooked to our tutorials as we will be back with another interesting Salesforce development solution soon. Catch you on the next one, Happy Coding!!

Share This Blog
Table of contents
Related Articles
Complete Guide to Salesforce Agentforce

Discover the ultimate guide to Salesforce Agentforce, your comprehensive resource for mastering features, functionalities.

Read More
Salesforce Introduces A New Payment Feature and Snapchat Integration For Commerce

Salesforce has recently announced a series of innovative features in Commerce Cloud for businesses to integrate digital commerce experiences into their sales, service, and marketing channels. These new capabilities leverage AI, Data, and CRM to create personalized purchasing experiences across multiple channels, driving revenue and meeting customer expectations by automating reorders, embedding order support, streamlining […]

Read More
Sales Cloud Implementation: Our Best Practices for Success

Salesforce Sales Cloud offers rich features and products that help sales reps build deeper customer relationships by winning more deals. But sales teams often struggle to derive the best out of the platform that can amp their sales revenue. So the question is, how do you get the most out of your Sales Cloud implementation? […]

Read More
Marketing Cloud features, Spring ‘23 release, salesforce, Marketing Cloud Engagement, Journey Builder, Marketing Cloud Intelligence

The Spring ’23 Release has brought some innovative Marketing Cloud features that help businesses integrate and automate their data, systems, and workflows. As businesses today, need consolidated tech stack and automation to drive growth in a cost-efficient way, the latest updates come as a pleasant surprise to them. With the newest updates in Marketing Cloud, […]

Read More
Salesforce unveils Automation Everywhere Bundle to enable end-to-end automation at scale

The global CRM leader Salesforce has been on a release spree to bring about new cost-efficient solutions for every segment of the business. The recent announcement of the Analytics Bundle and Marketing Effectiveness Bundle is a glaring example of this. Now, adding another solution to this list is –The Automation Everywhere Bundle, which automates across […]

Read More
Salesforce unveils Marketing Effectiveness Bundle-100

Days after announcing the Analytics Performance Bundle, Salesforce launched the Marketing Effectiveness Bundle with the same goal of helping businesses succeed now with cost-efficient solutions. The Marketing Effectiveness bundle is a consolidated tech of three Marketing Cloud tools that help marketers boost efficiency, increase sales, and lower costs while continuing to meet customers’ growing digital-first […]

Read More
Our Location worldwide
Indian Flag India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
United States of America Flag USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
United Kingdom Flag UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818