How to enable send in-app notifications within model-driven apps (preview)

If you think your friends/network would find this useful, please share it with them – I’d really appreciate it.

Enable the in-app notification feature

To use the in-app notification feature, you need to enable the AllowNotificationsEarlyAccess app setting in a model-driven app.Sign in to your model-driven app.

Step 1: Select the app where you want to use this feature.

Step 2: Copy the following code:

fetch(window.origin + "/api/data/v9.1/SaveSettingValue()",{
 method: "POST", 
   headers: {'Content-Type': 'application/json'},
   body: JSON.stringify({AppUniqueName: "Your app unique name", SettingName:"AllowNotificationsEarlyAccess", Value: "true"})
   });

Step 3: Select F12 on your keyboard to open the browser console or right click and choose Inspect.

How to run the code in the browser console.

Step 4: In the browser console, paste the code that you copied in step 3. Enter the name of your app in the AppUniqueName parameter, and then select Enter. You can find the unique app name by running the code below in the browser console:

let globalContext = Xrm.Utility.getGlobalContext();
let appProperties = await globalContext.getCurrentAppProperties();
let uniqueName = appProperties.uniqueName;

console.log(uniqueName);
Get the unique name of the model driven app using JavaScript in the developer console.
Running the script from step 3 with the unique app id from the previous code.

Step 5: Sign in to Power Apps (https://make.powerapps.com). Note: Remember to select the correct environment.

Step 6: On the left pane, select Solutions > New

Step 7 On the left pane, select Solutions > New solution. Enter the details, and then select Create.

Steps to create a new solution.

Step 8: Open the solution that you created. Select Add > App > Model-driven app. From the list of apps, select the model-driven app where you want to see the notifications feature.

Open the solution
Navigate to add existing Model Driven App
Select and add the existing model driven app to the solution

Step 9: For development, select Publish all customizations, and then refresh the model-driven app. You’ll see a bell icon in the upper-right corner.

Step 10: For production, package the app setting within a managed solution to be deployed in prod.

Export solution as managed.

Some examples of the in app notifications

Created some examples below based on the documentation from Microsoft. Customized customization the examples a bit to retrieve values dynamically regarding user and case in the examples below. More examples in the Microsoft Docs (Send in-app notifications within model-driven apps (preview)).

let userSettings = Xrm.Utility.getGlobalContext().userSettings;
let userId = userSettings.userId.replace(/{|}/g, '');
let systemuserid = userId;
let 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
await Xrm.WebApi.createRecord("appnotification", notificationRecord).
  then(
      function success(result) {
          console.log("notification created with ID: " + result.id);
      },
      function (error) {
          console.log(error.message);
          // handle error conditions
      }
  );
Example of how to create a welcome notification with JavaScript.

Another example showing a notification that a case is over due with a link in the notification to the regarding case.

let caseTitle = Xrm.Page.getAttribute("title").getValue(); // use formContext instead of Xrm.Page
let incidentId = Xrm.Page.data.entity.getId().replace(/{|}/g, ''); // use formContext instead of Xrm.Page
let userSettings = Xrm.Utility.getGlobalContext().userSettings;
let userId = userSettings.userId.replace(/{|}/g, '');
let systemuserid = userId;
var notificationRecord = 
{
    "title": "SLA critical",
	"body": "Records assigned to you is critically past SLA.",
	"ownerid@odata.bind": "/systemusers(" + systemuserid + ")",
    "icontype": 100000002, // failure
    "data": JSON.stringify({
	 "body": `Case record [${caseTitle}](?pagetype=entityrecord&etn=incident&id=incidentId ) assigned to you is critically past SLA and has been escalated to your manager.`
	 })
}
Xrm.WebApi.createRecord("appnotification",notificationRecord).
  then(
      function success(result) {
          console.log("notification created with custom body: " + result.id);
      },
      function (error) {
          console.log(error.message);
          // handle error conditions
      }
  );
Notification of SLA over due notification example.

Hope it was useful🥳