Send In-App Notifications from Custom Pages

In-app notification announcement was very promising. Of course, I had to try it out right away.

It’s a preview feature, but the docs are already very detailed. We find there how to activate this feature per app and discover a lot of interesting examples on how to send notifications using form scripting.

Basically, all we have to do is to create a record in the Notification table (table logical name is “appnotification”). The owner of the record will receive it. If the ownerid is not set, we’ll send a notification to ourselves. That opens a lot of ways to send notifications, not only using form scripting, PCFs or WebResources, but also using PlugIns, Flows. Simple, yet so powerful. Since I was working on a custom page, I wanted to see how we can send the notifications from a Custom Page.

Use case

Let’s imagine we are working with a custom page where we have the possibility to send notifications to a colleague/ the product owner, when we need to warn her/him. So my custom page contains a dialog with a text box where some text can be preset, and a button to send the text.

Since this dialog opens for a specific product, I can send not only the text, but also some buttons related to the product.

Send simple notification from a custom page

The properties are documented in the docs: Title, Body, Owner, IconType, and there are a few more. All we have to do, is make a “Patch”, a create request for the Notification table.

Patch(Notifications, {
    Title : "Out of stock", 
    Body: TextBox_Comment.Value, 
    Owner:  varTargetUser,
    IconType: 'IconType (Notifications)'.Warning
});

//that would correspond to the following, using javascript


Xrm.WebApi.createRecord("appnotification",{
  "title": "Welcome",
  "body": "This is the body!",
  "ownerid@odata.bind": "/systemusers(" + systemuserid + ")",
  "icontype": 100000003, //warning
}).

The most of the properties are self-explaining, and in the custom pages we even get IntelliSense, so we don’t need to remember everything:

The structure of the Data column

The most interesting part is the “Data” column, documented like this:

Data = JSON that’s used for extensibility and parsing richer data into the notification. The maximum length is 5,000 characters

But what’s the structure of this JSON? Examining the examples, I understood the following structure:

{
 title : "string", 
 body: "string", 
 data : {
        iconUrl : "string"
        },
 actions: Array<{
                title: "string", 
                data: {
                   url: "string", 
                   navigationTarget : "dialog" or "inline" or "newWindow"
                   }
                }>
}

Now, it’s getting a little confusing, because this JSON cannot use the “Display Name” like the rest in low-code. Everything passed in the “Data”, will overwrite the main properties.

For instance, if I pass the body in the “Data”, this will ignore the “Body” defined outside the “Data” node.

Patch(Notifications, {
    Title : "Out of stock", 
    Body: "THIS ONE WON'T BE USED", 
    IconType: 'IconType (Notifications)'.Warning, 
    Data : JSON({
        body : "HERE I OVERWRITE THE BODY"
    })
});

Notification with action buttons

For the actions, we need an array, so we’ll use ClearCollect in Power FX:

ClearCollect(Actions, { 
            title: "View product", 
            data: { 
                url: "?pagetype=entityrecord&etn=sample_product&id=" & varProductId, 
                navigationTarget: "dialog" 
                }
            }, { 
            title: "View order", 
            data: { 
                 url: "?pagetype=entityrecord&etn=diana_order&id=" & varOrderId, 
                 navigationTarget: "dialog" 
                 }
            }, { 
            title: "Delivery calendar", 
            data: { 
                 url: "?pagetype=custom&name=diana_deliverycalendarpage1_567e2", 
                 navigationTarget: "dialog" 
                 }
            }
            );            
//Notify(JSON({Data: Actions }));

Now we can use the Actions created above:

Patch(Notifications, {
    Title : "Out of stock", 
    Body: TextBox_Comment.Value,         
    Owner:  varTargetUser,
    IconType: 'IconType (Notifications)'.Warning,
    Data: JSON({
        actions: Actions 
   })
});

The notification will look like this:

Each of the three buttons will open a modal dialog. The first two ones will open forms (because the url is set to pagetype=entityrecord). The third button is opening a custom page, since the pagetype=custom:

 url: "?pagetype=custom&name=diana_deliverycalendarpage1_567e2"

I am not aware of a way to specify the size of the dialog, so it’ll be always opened about that big (in the example below we see the result of the button opening the custom page):

Custom icon

The sdk says that we can use custom icons. For that we’ll need a WebResource containing the image (only PNG or SVG are documented), and the iconType should be set to “Custom”

Patch(Notifications, {
    Title : "Custom icon", 
    Body: "This will be the body",             
    IconType: 'IconType (Notifications)'.Custom,
    Data: JSON({
        iconUrl : "webresource/diana_powerapps.svg"
        })
});

Right now, the docs are showing an additional “data” child, which didn’t worked for me, but the example above worked like a charm. And we get the Power Apps custom icon:

If we set the iconUrl, but forget to set the IconType to custom, we’ll get an “information” icon (iconUrl will be ignored):

Using Markdown

In the docs is not really described, but there are several examples where it seems to me that it supports Markdown. Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents

But what exactly will work, and what not. Here is a list of what I’ve tested:

Markdown syntax	Description	Worked?
# Header 1	H1	🗸
## Header 2	H2	🗸
**text**	bold	🗸
*text*	italic	🗸
1. Item 2. Item	Ordered or unordered list	✗
	Image	🗸
[text](linkUrl)	Hyperlink	🗸
<test@dummy.com>	E-Mail	🗸
|column1|column2| |value1| value|	Tables	✗
HTML tags	Custom HTML	✗

So the basics seem to work, but not the lists, tables, custom HTML tags or script tags.

Have a look to my tests:

---

Markdown E-Mail <your@email.address>

Example of text containing the E-Mail address, and the notification resulted:

• 

  Text to send

• 

  Notification

---

Bold, italic, but not lists

The unordered list “1. One” and “2. Two” doesn’t seem to work.

---

Headers (H1, H2) and emoji

---

Images

Markdown allows also images. So we can send images also inside the body. Here is how the images are looking like:

Going a little further, I wanted to see what happens i the image is much bigger (and in this case the image is not a webresource, but one of my blog images). It works, but only the left side of the image was shown:

---

Links

Works like a charm:

Well, actually I’ve used the combination of “bold” and “link” for the notificatioon above:

---

Some examples which didn’t work

JavaScript “`javascript

Table

Custom HTML tag (“<b>”)

Notifications are awesome

I love how the in-app notification integrates in the app, and will allow us to communicate, set reminders, without having to leave the application.

If you want to see nitification from Custom Pages “in action”, have a look to the Powerful Devs Conference, where I’ve talked about more aspects about Custom Pages & PCFs:

Click to play!

Photo by Miguel Á. Padriñán from Pexels