Home > CRM > [Step by Step] Model-driven apps | In-app notifications

[Step by Step] Model-driven apps | In-app notifications

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 StyleMarkdown
Bold**Bold**
Italic_Italic_
Bullet list- Item 1\r- Item 2\r- Item 3
Numbered list1. 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 TypeBehaviorValue
TimedThe notification appears for a brief duration (the default is four seconds) and then disappears.200000000
HiddenThe 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 TypeValueImage
Info100000000Info Icon
Success100000001Success Icon
Failure100000002Failure Icon
Warning100000003Warning Icon
Mention100000004Mention Icon
Custom100000005

🙂

Categories: CRM
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: