Salesforce Lightning Web Components allows the capability to conditionally render components or elements. If a specific condition is met, the elements or components can be rendered.
Lightning Web Component has two directives for conditional rendering:
- if:true
- if:false
In LWC, the directives can be enclosed in a <template> tag as shown below:
<template if:true={expression}>
display when expression is true
</template>
<template if:true={expression}>
display when expression is false
</template>
The scenario mentioned below is to conditionally render a content based on the logged in user’s role. If the user’s role is Sales Strategy Manager, the content will be displayed or else the content will not be displayed.
Conditional Rendering meta xml:
<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata”>
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
In the meta xml, expose the lightning component and specify the targets to be used for lightning app page, record page and home page.
Conditional Rendering html:
<template>
<lightning-card title=”Conditional Rendering in LWC” icon-name=”custom:custom14″>
<div class=”slds-m-around_medium”>
<template if:true={isManager}>
<div class=”slds-m-vertical_medium”>
Welcome {roleName}! Please click toggle below to view content
</div>
<div class=”slds-m-around_medium”>
<div class=”slds-form-element”>
<label class=”slds-checkbox_toggle slds-grid”>
<span class=”slds-form-element__label slds-m-bottom_none”>Show Image</span>
<input type=”checkbox” name=”checkbox-toggle-16″ value=”checkbox-toggle-16″ aria-describedby=”checkbox-toggle-16″ onchange={handleChange}/>
<span id=”checkbox-toggle-16″ class=”slds-checkbox_faux_container” aria-live=”assertive”>
<span class=”slds-checkbox_faux”></span>
<span class=”slds-checkbox_on”>Enabled</span>
<span class=”slds-checkbox_off”>Disabled</span>
</span>
</label>
</div>
<template if:true={isVisible}>
<div class=”slds-m-vertical_medium”>
<div><img src={pictureUrl}></div>
</div>
</template>
</div>
</template>
<template if:false={isManager}>
<div class=”slds-m-vertical_medium”>
Only Managers are allowed to view the content, you are a {roleName}
</div>
</template>
</div>
</lightning-card>
</template>
The HTML uses nested if to conditionally display contents. The conditional rendering javascript sets the isManager property to true and the toggle gets displayed . It has another if:true directive that displays the image when the toggle is enabled.
Conditional Rendering js:
import { LightningElement,wire, track } from ‘lwc’;
import summer_logo from ‘@salesforce/resourceUrl/summer22logo’;
import { getRecord } from ‘lightning/uiRecordApi’;
import Id from ‘@salesforce/user/Id’;
import ProfileName from ‘@salesforce/schema/User.UserRole.Name’;
export default class Render_Conditional extends LightningElement {
isVisible = false;
roleName;
pictureUrl = summer_logo + ‘/summer22logo.png’;
handleChange(event) {
this.isVisible = event.target.checked;
}
userId = Id;
isManager = false;
@wire(getRecord, { recordId: Id, fields: [ProfileName] })
userDetails({ error, data }) {
if (error) {
console.log(‘error’);
this.error = error;
} else if (data) {
if (data.fields.UserRole.value != null && data.fields.UserRole.value.fields.Name.value==’Sales Strategy Manager’) {
this.isManager = true;
this.roleName = data.fields.UserRole.value.fields.Name.value;
}
else{
this.roleName = data.fields.UserRole.value.fields.Name.value;
}
console.log(‘checking..’+data.fields.UserRole.value.fields.Name.value);
}
}
}
The javascript sets the value for isManager property based on the logged in user’s role and the second property isVisible is set based on the toggle change event.
If the user with the role Sales Strategy Manager logs and loads the page, the content will be displayed with a toggle and based on the toggle, enable, or disable the image gets displayed.
When logged in as Manager, the page renders as below.
If the user with the role other than Sales Strategy Manager logs and loads the page, the message “Only Managers are allowed to view the below content, you are a Training Ordinator” is displayed.
When logged in as Training Coordinator, the page renders as below,
References:
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_conditional
