Display a notification banner using the lightning web component

SCENARIO

While working on one of the requirements for a Health sector project for a client based out of Atlanta, GA, there was a requirement to display a notification banner or greeting message based on a time frame using the lightning web component.

CHALLENGE

The requirement is to display a greeting message or a notification banner for a specific duration. after the duration, the message will be changed or not display any banner. So they conditionally render notification messages or greeting messages based on a time frame without user interaction.

APPROACH

Notification banners communicate a state that affects the entire system, not just a feature or page. It appears automatically and lasts for the duration of the session.

Bellow is our approach to achieve the requirement by using Lightning Web Component and Custom Metadata Type.

1. Create a custom metadata type to store the banner details.
1. Start Date
2. End Date
3. Message
2. Create an Apex class to retrieve custom metadata type records.
3. Create a lightning web component to conditionally render a notification banner.

Step 1:- Create a Custom Metadata Type to store the banner details.

Below are the steps to create a custom metadata type.

• Click on Setup, In the Quick Find box type Custom Metadata Type.
• Select New Custom Metadata Type and enter Label and Plural Label.
• Click on Save.
• Create 3 custom fields to store the start date, end date, and message. below is an image of Custom Metadata Type.

Custom Metadata Type

• The next step is to create a record into a custom metadata type. Click on Manage Notification Banners and fill in the details and click on Save. Below is an image of the record.

Custom Metadata Type Record

Step 2:- Create an Apex Class to retrieve custom metadata type records.

Step 3:- Create a Lightning Web Component to conditionally render a notification banner.

Output:-

Output

If you have any questions you can reach out our Salesforce Consulting team here.