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 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>
<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;
}
}
}
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>
<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
];
}
}
@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
Post a Comment