Send Custom Bell/Push Notification (LWC)

sendCustomNotification.html

<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

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) => {
            alert('Notification Sent');
        })
        .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

<?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>

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; }
}

Published by Sandeep Kumar

He is a Salesforce Certified Application Architect having 11+ years of experience in Salesforce.

Leave a Reply