Display a Maintenance Message as Banner or Toast Message in Home Screen using LWC #inSalesforce

Display a Maintenance Message as Banner or Toast Message in Home Screen using LWC #inSalesforce

Setup | Custom Code | Custom Metadata Types and click on the New Custom Metadata Type button. 
Create fields like theStartDate, theEndDate, theMessage


Create LWC:

<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={toastMessage.data}>{message}</h2>
        </div>
      </div>
    </div>
  </template>


import { LightningElement, wire } from 'lwc';
import getBannerDetail from '@salesforce/apex/notificationMessageClass.getMessage';
export default class ToastMessage extends LightningElement {
    @wire(getBannerDetail) toastMessage;
    get message() {
        return this.toastMessage.data.theMessage__c;
    }
    maintenanceStartDate() {
        return this.toastMessage && this.toastMessage.data ? this.toastMessage.data.theStartDate__c : 'Loading...';
    }
    maintenanceEndDate() {
        return this.toastMessage && this.toastMessage.data ? this.toastMessage.data.theEndDate__c : 'Loading...';
    }
    get expression() {
        let today = new Date();
        today.setMinutes(new Date().getMinutes() - new Date().getTimezoneOffset());
        let date = today.toISOString().slice(0,10); 
        let maintenanceStartDate = this.maintenanceStartDate();
        let maintenanceEndDate = this.maintenanceEndDate();
        if (date >= maintenanceStartDate && date <= maintenanceEndDate) {
            return true;
        }
        else {
            return false;
        }
    }
}


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.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>


public with sharing class notificationMessageClass {
    @AuraEnabled(cacheable=true)  
    public static maintenanceMessage__mdt getMessage() {
        return [SELECT Id, theStartDate__c, theEndDate__c, theMessage__c
                FROM maintenanceMessage__mdt 
                where DeveloperName ='sample' 
                LIMIT 1
               ];
    }
    }










Comments