Last Updated on November 23, 2022 by Rakesh Gupta

Big Idea or Enduring Question:

How do you use the lightning web component to display an alert banner on lightning pages to display messages like an upcoming Salesforce/ internal release notification or reminder to finish year-end follow-up meetings with clients?

Objectives:

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

Understand custom metadata types and conditional rendering
Create custom metadata types
Access custom metadata types in the lightning web component
Display dynamic alert messages using the lightning web component
Use SLDS to show an alert banner without user interaction
and much more

In the past written a few articles on Lightning Web Component. Why not check them out while you are at it?!

Business Use case

Janel Parrish is working as a Junior Developer at Gurukul on Cloud (GoC). Janel got a task to design an app using the lightning web component to show Salesforce product releases or internal release notifications without user interaction.

She wants to provide an ability for System Administrator to set Start and End dates for banner display.

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 conditional rendering works in the lightning web component.

What is a Custom Metadata Type?

What is a Custom Metadata Type? Why should one use it? How should one use it? And, last but not least, how is Custom Metadata Type related to, or different than, Custom Object? Well, let us explore these concepts together!

Custom Metadata Type is similar to a custom object – it allows application developers to create custom sets of data, as well as to create and associate custom data with an organization. All custom metadata type data is available in the application cache. As a result, it allows efficient access to the data without the cost of repeated queries (SOQL) to a database. Custom Metadata Type is mainly used to store information that will be frequently accessed from Apex code.

Custom Metadata Type performs better than a custom object because it is available in the cache; therefore, it does not have to be queried. The other difference, which you will notice between the custom metadata type and a custom object, is the difference in the suffix. Custom Metadata type has __mdt suffix at the end of the custom metadata type, as opposed to the usual __c for custom objects.

Automation Champion Approach (I-do):

Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action.

There are three steps to solve Janel’s business requirement using Lightning Web Component and Custom Metadata Types. We must:

Create a custom metadata type to store the banner details
1. Maintenance Start Date
2. Maintenance End Date
3. Message
Create an Apex class to access custom metadata type record
Create a lightning web component to show or hide an alert banner

Step 1: Create Custom Metadata Types to Store the Banner Details

First, we will create a Custom Metadata Type to store the banner details.
To create a new custom metadata type, navigate to Setup | Custom Code | Custom Metadata Types and click on the New Custom Metadata Type button.
Create a few fields to store the start date, end date, and message. In the end, the Maintenance Notification custom metadata type should look like what is shown in the following screenshot:
The next step is to insert a record into the custom metadata type.
To do that, click on the Manage Maintenance Notifications button on the custom metadata type detail page, and then click on New to insert some records, as shown in the following screenshot:

Step 2: Create an Apex class to Access Custom Metadata Type Record

The following apex class access the Salesforce_Release record from the Notification Maintenance custom metadata type.

Copy Code



public with sharing class BannerController {
@AuraEnabled(cacheable=true)  

public static Maintenance_Notification__mdt getBannerDetail() {
    
    return [ 
            SELECT Id, Maintenance_Start_Date__c, Maintenance_End_Date__c, Message__c
            FROM Maintenance_Notification__mdt 
            where DeveloperName ='Salesforce_Release' 
            LIMIT 1
           ];
}
}

Step 3: Create a Lightning Web Component to Show or Hide the Alert Banner

Now we will create a lightning web component to show or hide the alert banner based on start and end date.

bannerAlert.html

To reference a resource in a template, use {property} syntax use {property} syntax, which is the same syntax we use to reference any JavaScript property. We’re using conditional rendering.

When a user loads the page, the BannerAlert class sets the value of the expression and banner property. If the expression and banner properties are true, the if:true directive renders the nested template, which displays Message!

Copy Code


<template>
  <div class="slds-card slds-theme_shade" if:true={expression}>
    <div class="slds-card__header slds-grid">
      <div class="slds-notify slds-notify_alert slds-alert_warning" role="alert">
        <span class="slds-assistive-text">warning</span>
        <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small"
          title="Description of icon when needed">
          <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
          </svg>
        </span>
        <h2 if:true={banner.data}>{message}&nbsp;
          <a href="https://status.salesforce.com" target="_blank">More Information</a>
        </h2>
      </div>
    </div>
  </div>
</template>

bannerAlert.js

This sample JavaScript code uses the @wire decorator. It is used to invoke Apex to get the Salesforce_release record from the Notification Maintenance custom metadata type.

Then JavaScript also performs a logical operation to make sure that:

Maintenance Start Date is less or equal than today
Maintenance End Date is greater or equal than today

Copy Code


import { LightningElement, wire } from 'lwc';
import getBannerDetail from '@salesforce/apex/BannerController.getBannerDetail';

export default class BannerAlert extends LightningElement {

    @wire(getBannerDetail) banner;

    get message() {
        return this.banner.data.Message__c;
    }

    maintenanceStartDate() {
        return this.banner && this.banner.data ? this.banner.data.Maintenance_Start_Date__c : 'Loading...';
    }

    maintenanceEndDate() {
        return this.banner && this.banner.data ? this.banner.data.Maintenance_End_Date__c : 'Loading...';
    }

    get expression() {

        let today = new Date();
        today.setMinutes(new Date().getMinutes() - new Date().getTimezoneOffset());
        
        // Return today's date in "YYYY-MM-DD" format
        let date = today.toISOString().slice(0,10); 

        let plannedMaintenanceStartDate = this.maintenanceStartDate();
        let plannedMaintenanceEndDate = this.maintenanceEndDate();

        if (date >= plannedMaintenanceStartDate && date <= plannedMaintenanceEndDate) {
            return true;
        }
        else {
            return false;
        }
    }
}

bannerAlert.js-meta.xml

Every component must have a configuration file. The configuration file defines the metadata values for the component, including supported targets and the design configuration for Lightning App Builder and Experience Builder.

This configuration file makes the component available for all Lightning pages, including desktop and phone.

Copy 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__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__HomePage">
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Proof of Concept

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.