Rajeev Pentyala – Microsoft Power Platform

Using in-app notification feature (Preview) we can notify Users with in the Model-driven apps. In this article lets learn how to enable the feature and use the in-app notifications with different options step by step.

Enable In-app notifications feature:

• Connect to Power Apps Maker Portal.
• Open the ‘Model Driven App’ using ‘Edit in preview’ option.

• In the App Editor, select ‘Settings -> Upcoming’ and enable the In-app notifications (Preview) as below.

Create a Test User:

• To test the In-app notifications, create a new user account. This User acts as recipient of notification.
  • Note: If you already have more users in your environment, skip this step and use one of the existing Users as recipient.
• I’ve created an User named ‘Test User 1’ to send the notifications to.

• Open the Model driven app in another browser using the Test User account.

• Next copy the ‘Test User 1’ GUID by opening the User from ‘Advanced Find’. We will use this GUID while creating notification.

As we completed pre-requisites, its time to create notifications.

Creating our first notification:

• Notification features uses an OOB table called “appnotification”.
• We create a record in ‘appnotification’ table which turns out to be a notification for targeted User.
• Each notification row is meant for a single user, identified by the Owner column value.
• If a notification needs to be sent to multiple users, a record needs to be added for each recipient.
• The sender controls the recipient through the Owner column.

Following is code snippet is using ‘Client API’ to create a basic notification.

function showBasicNotification() {
    // GUID of User (i.e.,Test User 1 in my case) whom you want to send the Notification to.
    var systemuserid = "0758fd55-c2ca-ec11-a7b5-00224808dd66";
    var notificationRecord =
    {
        "title": "Welcome",
        "body": "Welcome to the world of app notifications!",
        "ownerid@odata.bind": "/systemusers(" + systemuserid + ")",
        "icontype": 100000000, // info
        "toasttype": 200000000 // timed
    }
    // 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);                
            }
        );
}

• Register the showBasicNotification() function on one of the form jscript events (i.e., On Load/On Save/Field_OnChange).
• For this blog post, I’ve registered script on ‘On Load’ event.

• Use Browser ‘DevTools’ (F12) to check the successful execution of function.

• Up on executing the script, end user (i.e., Test User 1) would get a notification as below.

Notification with Action(s):

• Using “data” tag we can create notifications that include actions, custom body definitions, and custom icons.
• Following code snippet contain 2 actions (i.e., 2 URLs to navigate to) in Notification.
  • ‘actions’ is an array.

function showNotificationWithMultipleActions() {
    // Notification with multiple actions as center dialog 
    var systemuserid = "0758fd55-c2ca-ec11-a7b5-00224808dd66";
    var notificationRecord =
    {
        "title": "Different Search Options",
        "body": "This is to inform you that you can use following search options",
        "ownerid@odata.bind": "/systemusers(" + systemuserid + ")",
        "icontype": 100000000, // info
        "data": JSON.stringify({
            "actions": [
                {
                    "title": "Bing",
                    "data": {
                        "url": "https://bing.com",
                        "navigationTarget": "dialog"
                    }
                },
                {
                    "title": "Google",
                    "data": {
                        "url": "https://google.com",
                        "navigationTarget": "dialog"
                    }
                }
            ]
        })
    }
    Xrm.WebApi.createRecord("appnotification", notificationRecord).
        then(
            function success(result) {
                console.log("notification created with multiple actions: " + result.id);
            },
            function (error) {
                console.log(error.message);
            }
        );
}

• Up on execution, End User gets a notification with 2 navigation actions as below.

Notification with a custom Title and Body:

• The data field supports overriding the Title and Body simple strings with a limited subset of markdown based.

• Below is the supported markdown.

Text Style	Markdown
Bold	**Bold**
Italic	_Italic_
Bullet list	- Item 1\r- Item 2\r- Item 3
Numbered list	1. Green\r2. Orange\r3. Blue
Hyperlinks	[Title](url)

• Newlines can be included with the body using \n\n\n\n.
• Following is a code sample using ‘Markdown’ to customize Title and Body.
  • Under ‘actions’ tag, url is pointing to an existing record.

function notificationWithCustomTitleAndBody() {
    var systemuserid = "0758fd55-c2ca-ec11-a7b5-00224808dd66";
    var notificationRecord =
    {
        "title": "Example of Custom Title and Body",
        "body": "Maria Campbell mentioned you in a post.",
        "ownerid@odata.bind": "/systemusers(" + systemuserid + ")",
        "icontype": 100000004, // mention (Displays @ symbol)
        "data": JSON.stringify({
            "title": "[Potential Prospect](?pagetype=entityrecord&etn=raj_prospect&id=48f5d750-cbca-ec11-a7b5-00224808dd66)",
            "body": "Here is a [Potential Prospect](?pagetype=entityrecord&etn=raj_prospect&id=48f5d750-cbca-ec11-a7b5-00224808dd66)",
            "actions": [
                {
                    "title": "View record",
                    "data": {
                        "url": "?pagetype=entityrecord&etn=raj_prospect&id=48f5d750-cbca-ec11-a7b5-00224808dd66"
                    }
                }
            ]
        })
    }
    Xrm.WebApi.createRecord("appnotification", notificationRecord).
        then(
            function success(result) {
                console.log("notification created with custom title and body: " + result.id);
            },
            function (error) {
                console.log(error.message);
            }
        );
}

• Up on execution End User receives notification as below.

Notification with a custom Icon:

• Within the notification, set iconType to Custom and in the body, include iconUrl with a value pointing to a web resource.
  • “icontype”: 100000005, // custom
  • “data”: “{ ‘iconUrl’: ‘/WebResources/cr245_AlertOn’}”
• The icon can be either an SVG or PNG file type.

• Following is the ‘notificationRecord’ object.

var notificationRecord = 
{
  "title": "Welcome",
  "body": "Welcome to the world of app notifications!",
  "ownerid@odata.bind": "/systemusers(" + systemuserid + ")",
  "icontype": 100000005, // custom
  "data": "{ 'iconUrl': '/WebResources/cr245_AlertOn'}"
}

• Notification with Custom icon looks as below.

Key points on Notification usage:

• If you don’t specify “ownerid@odata.bind” in ‘notificationRecord’ object, notification will go to the User who created Notification.
• Notification Polling:
  • In-app notifications uses polling to retrieve notifications periodically when the app is running.
  • New notification are retreived at start of the model-driven app and when a page navigation occurs as long as the last retreival is more than one minute ago.
  • If a user stays on a page for a long duration, new notifications will be retrieved.

• Notifications appear in the notification center until the recipient dismisses them or they expire. By default, a notification expires after 14 days but your administrator can override this setting
• You can change in-app notification behavior by setting Toast Type to one of the following values.

Toast Type	Behavior	Value
Timed	The notification appears for a brief duration (the default is four seconds) and then disappears.	200000000
Hidden	The notification appears only in the notification center and not as a toast notification.	200000001

• You can change the in-app notification icon by setting Icon Type to one of the following values.

Icon Type	Value	Image
Info	100000000
Success	100000001
Failure	100000002
Warning	100000003
Mention	100000004
Custom	100000005

🙂