Implement In-App Notifications with JavaScript in Dynamics 365

Introduction

Wouldn't it be nice if next time you logged into Dynamics you were immediately notified of all the important events that happened while you were gone? Leads assigned to you, opportunities your team closed, cases opened? This is all now possible with 'in-app notifications' for Dynamics 365.

Enable the feature within your model-driven apps and users will see notifications when they log in, navigate pages, or are on a page for more than a minute.

You can register a notification from the front-end, back-end, or over the REST API.

Enable the feature

1. Navigate to the maker admin(https://make.powerapps.com/), open the model-driven app you would like to enable this feature in, and select the edit.
2. Select settings, Navigate to Features, and enable 'In-app notifications'.
   

After refreshing your browser you should see the notification bell in your header.

Examples of in-app notifications

Certainly! Here is an illustrative example: when the case is assigned to another user, a notification will be displayed for the assigned user.

Create/update the web Resource

Create/update the web Resource and add the below code on the “onchange” event of the owner filed.

function displayInAppNotification(executionContext) {
    var formContext = executionContext.getFormContext();
    
    var OwnerId = formContext.getAttribute("ownerid").getValue();

    // Getting the GUID of the lookup record
    var Id = OwnerId[0].id;
    var caseNumber = formContext.getAttribute("ticketnumber").getValue();
    var CaseId = formContext.data.entity.getId();

    var userId = Id.replace(/{|}/g, '');
    var systemuserid = userId;

    var notificationRecord = {
        "title": "Case has been assigned to you",
        "body": "Case has been assigned to you Case Number: " + caseNumber + "",
        "[email protected]": "/systemusers(" + systemuserid + ")",
        "icontype": 100000000 // info 
    };

    // Create notification record
    Xrm.WebApi.createRecord("appnotification", notificationRecord)
        .then(
            function success(result) {
                console.log("notification created with ID: " + result.id);
            },
            function (error) {
                console.log(error.message);
            }
        );
}

Alternatively, we can achieve the same functionality with the following code.

function displayInAppNotification(executionContext) {
    var formContext = executionContext.getFormContext();
    
    var OwnerId = formContext.getAttribute("ownerid").getValue();

    // Getting the GUID of the lookup record
    var Id = OwnerId[0].id;
    var caseNumber = formContext.getAttribute("ticketnumber").getValue();
    var CaseId = formContext.data.entity.getId();
    var CaseGuid = CaseId.replace(/{|}/g, '');

    var userId = Id.replace(/{|}/g, '');
    var systemuserid = userId;

    var notificationEtn = {
        title: 'Case Has been assigned to you',
        body: 'Case has been assigned to you Case Number: ' + caseNumber + '',
        '[email protected]': '/systemusers(' + systemuserid + ')',
        icontype: 100000000,
        toasttype: 200000000 
    };

    Xrm.WebApi.createRecord('appnotification', notificationEtn)
        .then((result) => {
            console.log('notification registered with ID: ' + result.id);
        })
        .catch((ex) => console.error(`error message: ${ex.message}`));
}

After adding the event, save and publish. Subsequently, I am attempting to assign the owner for the case record below.

After assigning the case, the following notification is received.

The following example shows how to create a notification with a single URL action.

function displayInAppNotification(executionContext) {
    var formContext = executionContext.getFormContext();
    
    var OwnerId = formContext.getAttribute("ownerid").getValue();

    // Getting the GUID of the lookup record
    var Id = OwnerId[0].id;
    var caseNumber = formContext.getAttribute("ticketnumber").getValue();
    var CaseId = formContext.data.entity.getId();
    var CaseGuid = CaseId.replace(/{|}/g, '');

    var userId = Id.replace(/{|}/g, '');
    var systemuserid = userId;

    var notificationEtn = {
        title: 'Case Has been assigned to you',
        body: 'Case has been assigned to you Case Number: ' + caseNumber + '',
        '[email protected]': '/systemusers(' + systemuserid + ')',
        icontype: 100000000,
        toasttype: 200000000,
        data: JSON.stringify({
            actions: [{
                title: 'Open Case',
                data: {
                    url: '?pagetype=entityrecord&etn=incident&id=' + CaseGuid + '',
                    navigationTarget: 'dialog',
                },
            }],
        }),
    };

    Xrm.WebApi.createRecord('appnotification', notificationEtn)
        .then((result) => {
            console.log('notification registered with ID: ' + result.id);
        })
        .catch((ex) => console.error(`error message: ${ex.message}`));
}