---
source_url: https://itmustbecode.com/embed-images-in-model-driven-in-app-notifications/
title: Embed Images in Model-Driven In-App Notifications
date: 2021-09-23T03:38:29+00:00
categories:
  - blog
tags:
  - custom-connector
  - dataverse
  - in-app-notifications
  - power-automate
word_count: 1327
reading_time_minutes: 7
type: posts
---

**In-App notifications** for Model-Driven apps ( _still in preview at the time of writing_) exposes a central **notification hub** in Power Platform model-driven apps and the **notifications** model provides a fantastic vehicle to deliver **contextual** and **user-specific** information.

{{< figure src="./image-8.png" alt="" caption="" >}}

In this blog post, I will continue my exploration of **In-App notifications** and show how we can spice things up a little bit and create **visually rich** and **appealing** 💎 notifications by embedding **images** inside the content.

You can refer to my 2 earlier posts for more context.

- [Enable Model-Driven In-App Notifications with Power Automate](/enable-model-driven-in-app-notifications-with-power-automate/)
- [Send Model-Driven In-App Notifications with Power Automate](/send-model-driven-in-app-notifications-with-power-automate/)

## **The use case**

To get a supply of **stunning images** ✨ there are no better use case than to display the _famous_ **[NASA's Astronomy Picture of the day](https://apod.nasa.gov/apod/)** (APOD) inside our notifications.

Also, while the [Microsoft official documentation](https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/send-in-app-notifications?WT.mc_id=DX-MVP-5004959) examples are using **Dataverse Web API** calls to create the notifications, I will use **Power Automate** to show how easy it is to create awesome notifications in a low-code manner.

The end result looks like this and contains the following.

1. A **custom Icon**
1. A **clickable image** in the **body**
1. An **Action** at the bottom rendered as a **clickable image**

{{< figure src="./nasa_apod3.png" alt="" caption="" >}}

## Display images in notifications

Before we go too far in the final solution, let's try to understand the different parts of a notification and how they are rendered.

The main parts of a notification are :

{{< figure src="./image-31.png" alt="" caption="" >}}

The [Microsoft official documentation](https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/send-in-app-notifications) shows how to inject rich content like **hyperlinks** by using the ' **data**' field of the **notification** record. If you look closely at the example below, you will notice that it uses **Markdown** notation to render the hyperlinks. _This is where it gets interesting._

{{< figure src="./image-10.png" alt="" caption="" >}}

## **Markdown links and image syntax**

While the documentation only shows how to render **hyperlinks** inside notifications, the markdown notation also offers methods to render **images** and **clickable images** as well.

- ref : [https://guides.github.com/features/mastering-markdown/](https://guides.github.com/features/mastering-markdown/)

#### **Hyperlink**

```
[Link Text](Url)
```

#### **Image**

```
![Alt text](ImageUrl)
```

#### **Clickable** image

```
[![Alt text](ImageUrl)](Url)
```

That way if you render a notification with this ' **Data**' field

{{< figure src="./image-14.png" alt="" caption="" >}}

Your notification will look like this

{{< figure src="./image-13.png" alt="" caption="" >}}

## **Limitation**

The major limitation I faced with embedding images using Markdown notation is that it seems impossible to **resize** the image.

Meaning that when the image you want to display is **greater than 250 px in width** the image will not render inside the available space and will be cropped 😡. _**Diana Birkelback** came to the same conclusion in her [blog post](https://dianabirkelbach.wordpress.com/2021/09/19/send-in-app-notifications-from-custom-pages/) on in-app notifications._

{{< figure src="./image-12.png" alt="" caption="" >}}

## **Overcome Image sizing limitation**

By doing some research I found a nifty solution using a service called [**FileStack**](https://www.filestack.com/) that makes it possible to resize an image **on-the-fly** by using [URL parameters](https://blog.filestack.com/tutorials/how-to-automatically-resize-fit-and-align-any-image-using-only-url-parameters/).

{{< linkcard url="https://blog.filestack.com/tutorials/how-to-automatically-resize-fit-and-align-any-image-using-only-url-parameters/" title="How to Automatically Resize, Fit, and Align Any Image Using Only URL Parameters | Filestack Blog" summary="See how to automatically resize, fit, and align any image stored on an object store like AWS s3, Azure Blog Storage, or Google Cloud storage." image="https://blog.filestack.com/wp-content/uploads/2019/03/image-resize-blog1.png" domain="blog.filestack.com" new_tab="true" nofollow="true" >}}

{{< figure src="https://www.filestack.com/docs/images/transform%5Furl.png" alt="" caption="" >}}

That way once you have the URL of a large image that you want to display inside a notification, for example

**https://apod.nasa.gov/apod/image/2109/SunSpotHill\_Coy\_960.jpg**

{{< figure src="https://apod.nasa.gov/apod/image/2109/SunSpotHill%5FCoy%5F960.jpg" alt="" caption="" >}}

You can **resize** the image to a **250 px** width in **real-time** using a simple URL.

**https://cdn.filestackcontent.com/****<API\_KEY>/** **resize=width:250**/**https://apod.nasa.gov/apod/image/2109/SunSpotHill\_Coy\_960.jpg**

{{< figure src="https://cdn.filestackcontent.com/ALCNSogtRTAyk16mvgNOJz/resize=width:250/https://apod.nasa.gov/apod/image/2109/SunSpotHill%5FCoy%5F960.jpg" alt="" caption="" >}}

Voilà! Now when embedded in a notification, the image is not overflowing anymore. 👌

{{< figure src="./image-15.png" alt="" caption="" >}}

> To get access to **[Filestack](https://www.filestack.com/)** you need to **sign-up** for an account. There is a **free tier** that gives you a **1000 transformations** per month and its not that expensive if you really need to beef up the API calls. There is also **a ton of other services** available, I encourage you to have a look, it's awesome.

- [Filestack - The Best File Uploader & Upload API](https://www.filestack.com/)
- [How to Automatically Resize, Fit, and Align Any Image Using Only URL Parameters \| Filestack Blog](https://blog.filestack.com/tutorials/how-to-automatically-resize-fit-and-align-any-image-using-only-url-parameters/)

## **NASA Picture of the Day notification** **Flow**

Now that we have all the parts needed, let's build a Power Automate Flow that will create a new notification with the **NASA Picture of the Day everyday at midnight**. The outline of the Flow looks like this.

{{< figure src="./image-17.png" alt="" caption="" >}}

and here are some of the important parts explained.

### **1️⃣ Trigger - Everyday at Midnight**

The trigger of the flow is a simple recurrence trigger set at midnight everyday

{{< figure src="./image-18.png" alt="" caption="" >}}

### **2️⃣ Get NASA Picture of the Day**

To be able to call the Picture of the day service, you will need to get an API key from the [**NASA website**](https://api.nasa.gov/). Its totally **free** and there are plenty of other amazing API. **Get yours now!**

I will show you 2 methods query the **NASA APOD API**.

### **HTTP Call - The HARD way**

With the API Key you can now query the picture of the day API at this address:

```
https://api.nasa.gov/planetary/apod?api_key={YOUR_APIKEY}
```

To call this endpoint in Power Automate you can use an **HTTP action**

{{< figure src="./getAPOD.png" alt="" caption="" >}}

Here is an example of the result

{{< figure src="./apod_json.png" alt="" caption="" >}}

You would then need to add a **Parse JSON** step to **extract** the values from the response and use them in your Flow. Not super complicated but there is a better way.

### **Custom connector - The EASY way**

To make it easier and more portable, I created a [**NASA APOD Custom connector**](https://github.com/drivardxrm/NASA_APOD.Custom_Connector) that you can install in your environments. Follow the instructions from the [Custom Connector Gallery](https://www.connector.gallery/) or on the GitHub repo for installation and usage.


{{< linkcard url="https://www.connector.gallery/NASA-APOD/" title="NASA Pic of the day" summary="Custom connector that retrieves images URL and associated metadata from the famous NASA - Astronomy Picture of the Day (APOD). Free API key required @ https://api.nasa.gov/ 🚀🌌" image="https://www.connector.gallery/assets/images/NASA.png" domain="www.connector.gallery" new_tab="true" nofollow="true" >}}


{{< linkcard url="https://github.com/drivardxrm/NASA_APOD.Custom_Connector" title="GitHub - drivardxrm/NASA_APOD.Custom_Connector: NASA Astronomy Picture of the Day - PowerPlatform Custom Connector" summary="NASA Astronomy Picture of the Day - PowerPlatform Custom Connector - GitHub - drivardxrm/NASA_APOD.Custom_Connector: NASA Astronomy Picture of the Day - PowerPlatform Custom Connector" image="/linkcards/96ee7f2f0b4ac8b0.jpg" domain="github.com" new_tab="true" nofollow="true" >}}

Once installed you can Insert a **Get NASA Picture of the Day** action in your Flow.

{{< figure src="./image-19.png" alt="" caption="" >}}

The first time you will have to create a connection and enter your API key. _Note that this method is much more convenient and secure than the HTTP call since the API Key is stored in the connection and is not revealed._

{{< figure src="https://user-images.githubusercontent.com/38399134/133869571-f695e652-ae20-4e77-90d5-f86fb3a297f9.png" alt="nasa\_apod\_create2" caption="nasa\_apod\_create2" >}}

You can optionally enter a date or leave it blank to retrieve today's image

{{< figure src="https://user-images.githubusercontent.com/38399134/133945953-96437955-e917-45f7-8ece-8943d9ab7caa.png" alt="image" caption="image" >}}

No need to **parse** the JSON response here, all the **output parameters** are ready to use by the downstream steps of the Flow.

{{< figure src="./image-20.png" alt="" caption="" >}}

### **3️⃣ Conditional stuff**

There are 2 types of resource that can be retrieved from the API ( **image** and **video**), so depending on the ' **media\_type**' value of the response I set some variables for the **Image Url** and the **Action** to display at the bottom of the notification

{{< figure src="./image-22.png" alt="" caption="" >}}

{{< figure src="./image-27.png" alt="" caption="" >}}

{{< figure src="./image-28.png" alt="" caption="" >}}

> Notice the **markdown image** notation in the ' **title**' pf the srtAction variable, this is how we can render an image instead of plain text in the actions section at the bottom of the notification.

### **4️⃣ Resize the image**

This is where we use the **Filestack** magic 🧙 described earlier and set the URL to **resize** our image to 250 px wide.

{{< figure src="./image-24.png" alt="" caption="" >}}

### **5️⃣ Create Notification record**

We now have all the pieces to build the notification. So we can drop an **Add a new Row** action from the **Dataverse connector**.

{{< figure src="./image-30.png" alt="" caption="" >}}

Choose the **Notifications** table ( _appnotification_) and set the appropriate fields.

- Set the **IconType** to **Custom**
- inject a **JSON** contruct in the **Data** field that contains **iconUrl**, **body** and **actions** nodes. _Don't forget to pass the resized image URL in the markdown._

{{< figure src="./image-25.png" alt="" caption="" >}}

Here is an example of the final JSON injected in the Data field:

And that's all there is! **Turn on** the Flow and from now on you will receive stunning and inspirational images on a daily basis. What a great way to start your day 😎.

Here are some example:

{{< figure src="./image-29.png" alt="" caption="" >}}

{{< figure src="./image-26.png" alt="" caption="" >}}

{{< figure src="./Screenshot_20210902-100417_Edge.jpg" alt="" caption="" >}}

## Conclusion

I am really happy with the outcome of this _**(space) exploration**_, I think it clearly shows the potential for creating **visually attractive** in-app notifications that end-users will crave for.

Also, I really had a blast 🚀 showcasing the [NASA Astronomy Picture of the Day](https://apod.nasa.gov/apod/) and developing the [custom connector](https://github.com/drivardxrm/NASA_APOD.Custom_Connector). To be frank Business apps are fine, but **nothing beats Science** 🤓.