Generic Notification Component in LWC

Some kind of notification is required on every page of the Salesforce Application. We can have an alert, prompt, or confirm modal notification in LWC to notify some information to the user on screen. Let us create a generic notification component in LWC that can also be used in the Salesforce flow.

We have lightning/alert, lightning/prompt, and lightning/confirm modules that will create different kinds of modals.

Notification Type	Use
lightning/alert	This module is used to show a dialog with some notification detail.
lightning/confirm	This module is used to get some confirmation from the user before processing further.
lightning/prompt	This module is used to collect some information from the user before processing further.

Using lightning/prompt we can get any kind of input from the user but using lightning/confirm we can get a confirmation with two choices OK or cancel.

Let us create a generic component that will support the above three types of notifications and we can use it anywhere in the application.

1. Create a Generic Notification Component in LWC
2. Test Generic Component in another LWC
3. Test Generic Component in Flow

1. Create a Generic Notification Component in LWC

Let us create a generic notification component that has the capability to show alert, prompt, and confirm dialog boxes.

To make a generic component for notification. We will add below public properties to prepare modal dialog.

• notificationType – the type of model. Options are alert/confirm/prompt
• message – Notification message
• variant – Header or Header less notification? Options are header/headerless
• header- Header Text
• colorTheme- Color theme for the header. Choose from default, shade, inverse,alt-inverse, success, info, warning, error, and offline
• value- This is the output value of the modal.
• isCallerFlow- This property to check notifications should be shown when the page is loaded.

As components can be used in flow as well so after clicking on the button, we should move to the next flow action. For this, we will use flow support events FlowAttributeChangeEvent and FlowNavigationNextEvent.

Component Code:

2. Test Generic Component in another LWC

Let us use the above generic component in another LWC to show alert/confirm/prompt.

Lightning Alert Notification

Lightning Prompt Notification

Lightning Confirm Notification

3. Test Generic Component in Salesforce Flow

Let us use the above generic component in Salesforce Screen Flow. Put Notification LWC component on-screen component and set below properties

• notificationType – Alert
• message – ‘Record is Saved’
• variant – header
• header-‘Process Completed’
• colorTheme- success
• isCallerFlow- true

Set selected value in Manually assign variables in the Advance section.

Put value property in flow variable to set selected values.

Lightning Alert Notification

References:

Alert

Prompt

Confirm

Similar Posts

Generic Multi-Select Lookup Component

DATA TABLE IN SCREEN FLOW

Need Help?

Need some kind of help in implementing this feature, connect on linked in profile.