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:
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> | 🗸 | |
| |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
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:
Photo by Miguel Á. Padriñán from Pexels
