Big Idea or Enduring Question:

• How to show different messages based on the logged-in user’s profile? 

Objectives:

After reading this blog, you’ll be able to:

• Render DOM elements conditionally 
• Apply conditional rendering in lightning web component (lwc) 
• and much more

Business Use case

Rachel Gillett is working as a Junior Developer at Gurukul on Cloud (GoC). She just started learning the lightning web component and wondering if someone could help her to understand how to show different messages based on a logged-in user profile.

If the logged-In user profile is System Administrator, then display a message:

Welcome, you are a System Administrator!

Otherwise, display a message:

Welcome, you are a Business User!

What is Conditional Rendering?

Conditional rendering in the lightning web component (lwc) is a way to display components or elements based on a specific condition. For instance, you can display different greeting messages depending on the time of day.

Conditional rendering allows you to render different lwc components or elements if a condition is met. In this tutorial, you will learn about the different ways you can use conditional rendering in the lightning web component.

Read this article to learn how to display logged-in user information in the lightning web component. 

Automation Champion Approach (I-do):

We use conditional rendering to render a DOM element in a template only when specific conditions are met. To achieve this in Salesforce Lightning Web Components, add the if:true | false directive to a nested <template> tag that encloses the conditional content.

conditionalRendering.js-meta.xml

A lightning web component can be used to build custom pages for Lightning Experience and the Salesforce mobile app quickly with point-and-click tools. Make sure to add the right target for it. 

This configuration file makes the component available for all Lightning page types but restricts support on the home page only for desktops. 

<?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>

conditionalRendering.html

When a user loads the page, the ConditionalRendering class sets the value of the isSystemAdministrator property. If the isSystemAdministrator property is true, the if:true directive renders the nested template, which displays Welcome, you are a System Administrator! The template contains two div tags that have a different messages.

<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

Notice that the JavaScript doesn’t manipulate the DOM, it simply changes the value of isSystemAdministrator property.

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;
            }
        }
    }
}

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

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

Video Walkthrough:

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.