Send Dynamic Custom Notification To All Users In Lightning Web Component

You can send custom notifications when important events occur in the Salesforce system. Custom Notification can be sent using Process builder, Lightning Flow, Api or using Apex. Are you looking for a solution where you want to send dynamic custom notification on-demand? Do you want to allow your users to send dynamic custom notification by choosing the title and body of their choice? If yes, this blog is for you.

We are going to create a Lightning Web Component which uses the apex method to invoke send cutsom notification method. The Lightning Web Component name is sendCustomNotification. It has three file:-

sendCustomNotification.html
sendCustomNotification.js
sendCustomNotification.js-meta.xml

sendCustomNotification.html

HTML file of the lightning web component has two input field and one picklist. Users can input the title, body and notification type of the custom notification. It also a lightning button which makes the apex call to send the notification.

<template>
    <lightning-input type="text" label="Enter Notification Title" placeholder="type here..." onchange={handleTitle}></lightning-input>
    <lightning-input type="text" label="Enter Notification Body" placeholder="type here..." onchange={handleBody}></lightning-input>
    <template if:true={showNotificationTypePicklist}>
        <lightning-combobox name="notificationtype" label="Select Notification Type" placeholder="Select Notification type"
        options={notificationOptions} onchange={handleNotificationTypeChange}></lightning-combobox>
    </template>
    <div class="slds-m-vertical_medium">
        <lightning-button variant="brand" label="Send Notification" title="Send Custom Notification" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
    </div>
</template>

sendCustomNotification.js

JS file of the lwc have change handler for the input field, picklist field and lightning button. The connectedCallback method used for calling apex method to fetch all the available custom notification type and show it as picklist.

import { LightningElement, api, track } from 'lwc';
import notifyUsers from '@salesforce/apex/CustomNotificationFromApex.notifyUsers';
import getNotificationList from '@salesforce/apex/CustomNotificationFromApex.getNotificationList';
export default class SendCustomNotification extends LightningElement {
    @api recordId;
    @track notificationOptions = [];
    showNotificationTypePicklist = false; 

    //fired on load of the component
    connectedCallback(){
        this.notificationJson.targetId = this.recordId;
        //get all the notification type
        getNotificationList()
        .then((result) => {
            result.forEach(element => {
                this.notificationOptions.push({label: element.CustomNotifTypeName, value: element.Id});
            });
            this.showNotificationTypePicklist = true;
        })
        .catch((error) => {
            console.log(error);
        });
    }

    //handler for button click
    handleClick(){
        //send the custom notification
        notifyUsers({ 
            wrapp : this.notificationJson
        })
        .then((result) => {
            console.log(result);
        })
        .catch((error) => {
            console.log(error);
        });
    }

    //property to hold the input parameter values
    @track notificationJson = {
        title: null,
        body: null,
        customNotificationType: null,
        targetId : null
    };

    //hanlder for title input
    handleTitle(event){
        this.notificationJson.title = event.detail.value;
    }

    //hanlder for body input
    handleBody(event){
        this.notificationJson.body = event.detail.value;
    }

    //hanlder for notification type picklist
    handleNotificationTypeChange(event){
        this.notificationJson.customNotificationType = event.detail.value;
    }
}

sendCustomNotification.js-meta.xml

The component is only exposed to the lightning record pages.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Now, It’s time to create the Apex controller. We are having two apex controller:-

CustomNotificationFromApex
NotificationWrapper

CustomNotificationFromApex

public without sharing class CustomNotificationFromApex {

    @AuraEnabled
    public static void notifyUsers(NotificationWrapper wrapp) {
        // Create a new custom notification
        Messaging.CustomNotification notification = new Messaging.CustomNotification();

        // Set the contents for the notification
        notification.setTitle(wrapp.title);
        notification.setBody(wrapp.body);

        // Set the notification type and target
        notification.setNotificationTypeId(wrapp.customNotificationType);
        notification.setTargetId(wrapp.targetId);
        
        // Actually send the notification
        try {
            notification.send(getUserIds());
        }
        catch (Exception e) {
            System.debug('Problem sending notification: ' + e.getMessage());
        }
    }

    @AuraEnabled
    public static List<CustomNotificationType> getNotificationList() {
        List<CustomNotificationType> notificationTypeList = new  List<CustomNotificationType>();
        notificationTypeList = [SELECT Id, CustomNotifTypeName, DeveloperName FROM CustomNotificationType ];
        return notificationTypeList;
    }

    public static set<String> getUserIds() {
        set<String> userids = new set<String>();
        for(User usr : [select id from User Where Profile.UserLicense.Name = 'Salesforce' and IsActive = true]){
            userids.add(usr.id);
        }
        return userids;
    }
}

NotificationWrapper

public class NotificationWrapper {
    @AuraEnabled public string title{ get; set; }
    @AuraEnabled public string body{ get; set; }
    @AuraEnabled public string customNotificationType{ get; set; }
    @AuraEnabled public string targetId{ get; set; }
}

Once you have deployed everything to your salesforce org, edit the lightning record page on any object and place it at your desired place on the canvas.