Utilizing Lightning Net Part to Present an Alert Banner

Final Up to date on July 10, 2022 by Rakesh Gupta

Massive Thought or Enduring Query:

• How do you employ the lightning internet element to show an alert banner on lightning pages to show messages like an upcoming Salesforce/ inner launch notification or reminder to complete year-end follow-up conferences with shoppers?

Targets:

After studying this weblog, you’ll be capable to:

• Perceive what’s customized metadata varieties and conditional rendering 
• Create customized metadata varieties
• Entry customized metadata varieties within the lightning internet element
• Show dynamic alert messages utilizing the lightning internet element
• Use SLDS to indicate an alert banner with out consumer interplay 
• and way more

Prior to now written a couple of articles on Lightning Net Part. Why not verify them out if you are at it?!

1. Check User Permissions for Logged-In User in Lightning Web Component
2. Get Record Id and Object API Name in Lightning Web Component

Janel Parrish is working as a Junior Developer at Gurukul on Cloud (GoC). Janel acquired a activity to design an app utilizing the lightning internet element to indicate Salesforce product releases or inner launch notifications with out consumer interplay. 

She needs to supply a capability for System Administrator to set Begin and Finish dates for banner show. 

What’s Conditional Rendering?

Conditional rendering within the lightning internet element (lwc) is a approach to show elements or components based mostly on a selected situation. As an example, you’ll be able to show completely different greeting messages relying on the time of day.

Conditional rendering permits you to render completely different lwc elements or components if a situation is met. On this tutorial, you’ll be taught in regards to the other ways you need to use conditional rendering within the lightning internet element.

Learn this article to learn the way conditional rendering works within the lightning internet element.

What’s a Customized Metadata Sort?

What’s a Customized Metadata Sort? Why ought to one use it? How ought to one use it? And, final however not least, how is Customized Metadata Sort associated to, or completely different than, Customized Object? Effectively, allow us to discover these ideas collectively!

Customized Metadata Sort is just like a customized object – it permits software builders to create customized units of information, in addition to to create and affiliate customized knowledge with a company. All customized metadata kind knowledge is obtainable within the software cache. In consequence, it permits environment friendly entry to the information with out the price of repeated queries (SOQL) to a database. Customized Metadata Sort is principally used to retailer info that might be steadily accessed from Apex code.

Customized Metadata Sort performs higher than a customized object as a result of it’s accessible within the cache; due to this fact, it doesn’t should be queried. The opposite distinction, which you’ll discover between the customized metadata kind and a customized object, is the distinction within the suffix. Customized Metadata kind has __mdt suffix on the finish of the customized metadata kind, versus the same old __c for customized objects.

Automation Champion Strategy (I-do):

Alert banners talk a state that impacts the complete system, not only a function or web page. It persists over a session and seems with out the consumer initiating the motion.

There are three steps to resolve Janel’s enterprise requirement utilizing Lightning Net Part and Customized Metadata Sorts. We should:

1. Create a customized metadata kind to retailer the banner particulars 
   1. Upkeep Begin Date
   2. Upkeep Finish Date
   3. Message
2. Create an Apex class to entry customized metadata kind file
3. Create a lightning internet element to indicate or conceal an alert banner 

Step 1: Create Customized Metadata Sorts to Retailer the Banner Particulars 

1. First, we are going to create a Customized Metadata Sort to retailer the banner particulars.
2. To create a brand new customized metadata kind, navigate to Setup | Customized Code | Customized Metadata Sorts and click on on the New Customized Metadata Sort button. 
3. Create a couple of fields to retailer the beginning date, finish date, and message. Ultimately, the Upkeep Notification customized metadata kind ought to seem like what’s proven within the following screenshot:
4. The subsequent step is to insert a file into the customized metadata kind.
5. To try this, click on on the Handle Upkeep Notifications button on the customized metadata kind element web page, after which click on on New to insert some information, as proven within the following screenshot:

Step 2: Create an Apex class to Access Customized Metadata Sort Document

The next apex class entry the Salesforce_Release file from the Notification Upkeep customized metadata kind. 

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 Net Part to Present or Disguise the Alert Banner 

Now we are going to create a lightning internet element to indicate or conceal the alert banner based mostly on begin and finish date. 

bannerAlert.html

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

When a consumer masses the web page, the BannerAlert class units the worth of the expression and banner property. If the expression and banner properties are true, the if:true directive renders the nested template, which shows Message! 

<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" function="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 wanted">
          <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
            <use xlink:href="http://automationchampion.com/property/icons/utility-sprite/svg/symbols.svg#warning"></use>
          </svg>
        </span>
        <h2 if:true={banner.knowledge}>{message}&nbsp;
          <a href="https://standing.salesforce.com" goal="_blank">Extra Info</a>
        </h2>
      </div>
    </div>
  </div>
</template>

			

bannerAlert.js

This pattern JavaScript code makes use of the @wire decorator. It’s used to invoke Apex to get the Salesforce_release file from the Notification Upkeep customized metadata kind. 

Then JavaScript additionally performs a logical operation to make it possible for:

• Upkeep Begin Date is much less or equal than at present 
• Upkeep Finish Date is larger or equal than at present 

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.knowledge.Message__c;
    }

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

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

    get expression() {

        let at present = new Date();
        at present.setMinutes(new Date().getMinutes() - new Date().getTimezoneOffset());
        
        // Return at present's date in "YYYY-MM-DD" format
        let date = at present.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

Each element should have a configuration file. The configuration file defines the metadata values for the element, together with supported targets and the design configuration for Lightning App Builder and Expertise Builder.

This configuration file makes the element accessible for all Lightning pages, together with desktop and telephone.

<?xml model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://cleaning soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <goal>lightning__RecordPage</goal>
        <goal>lightning__AppPage</goal>
        <goal>lightning__HomePage</goal>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <supportedFormFactors>
                <supportedFormFactor kind="Giant" />
                <supportedFormFactor kind="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <supportedFormFactors>
                <supportedFormFactor kind="Giant" />
                <supportedFormFactor kind="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__HomePage">
            <supportedFormFactors>
                <supportedFormFactor kind="Giant" />
                <supportedFormFactor kind="Small" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

			

Proof of Idea

Formative Evaluation:

I wish to hear from you!

What’s one factor you discovered from this submit? How do you envision making use of this new information in the true world? Be at liberty to share within the feedback under.