{"content":"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.\nIn 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.\nYou can refer to my 2 earlier posts for more context.\nEnable 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\u0026rsquo;s Astronomy Picture of the day (APOD) inside our notifications.\nAlso, while the Microsoft official documentation 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.\nThe end result looks like this and contains the following.\nA custom Icon A clickable image in the body An Action at the bottom rendered as a clickable image Display images in notifications Before we go too far in the final solution, let\u0026rsquo;s try to understand the different parts of a notification and how they are rendered.\nThe main parts of a notification are :\nThe Microsoft official documentation shows how to inject rich content like hyperlinks by using the \u0026rsquo; data\u0026rsquo; 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.\nMarkdown 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.\nref : 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 \u0026rsquo; Data\u0026rsquo; field\nYour notification will look like this\nLimitation The major limitation I faced with embedding images using Markdown notation is that it seems impossible to resize the image.\nMeaning 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 on in-app notifications.\nOvercome Image sizing limitation By doing some research I found a nifty solution using a service called FileStack that makes it possible to resize an image on-the-fly by using URL parameters.\nHow to Automatically Resize, Fit, and Align Any Image Using Only URL Parameters | Filestack Blog 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. blog.filestack.com That way once you have the URL of a large image that you want to display inside a notification, for example\nhttps://apod.nasa.gov/apod/image/2109/SunSpotHill_Coy_960.jpg\nYou can resize the image to a 250 px width in real-time using a simple URL.\nhttps://cdn.filestackcontent.com/****\u0026lt;API_KEY\u0026gt;/ resize=width:250/https://apod.nasa.gov/apod/image/2109/SunSpotHill_Coy_960.jpg\nVoilà! Now when embedded in a notification, the image is not overflowing anymore. 👌\nTo get access to Filestack 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\u0026rsquo;s awesome.\nFilestack - The Best File Uploader \u0026amp; Upload API How to Automatically Resize, Fit, and Align Any Image Using Only URL Parameters | Filestack Blog NASA Picture of the Day notification Flow Now that we have all the parts needed, let\u0026rsquo;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.\nand here are some of the important parts explained.\n1️⃣ Trigger - Everyday at Midnight The trigger of the flow is a simple recurrence trigger set at midnight everyday\n2️⃣ 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. Its totally free and there are plenty of other amazing API. Get yours now!\nI will show you 2 methods query the NASA APOD API.\nHTTP Call - The HARD way With the API Key you can now query the picture of the day API at this address:\nhttps://api.nasa.gov/planetary/apod?api_key={YOUR_APIKEY} To call this endpoint in Power Automate you can use an HTTP action\nHere is an example of the result\nYou 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.\nCustom connector - The EASY way To make it easier and more portable, I created a NASA APOD Custom connector that you can install in your environments. Follow the instructions from the Custom Connector Gallery or on the GitHub repo for installation and usage.\nNASA Pic of the day 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/ 🚀🌌 www.connector.gallery GitHub - drivardxrm/NASA_APOD.Custom_Connector: NASA Astronomy Picture of the Day - PowerPlatform Custom Connector NASA Astronomy Picture of the Day - PowerPlatform Custom Connector - GitHub - drivardxrm/NASA_APOD.Custom_Connector: NASA Astronomy Picture of the Day - PowerPlatform Custom Connector github.com Once installed you can Insert a Get NASA Picture of the Day action in your Flow.\nThe 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.\nnasa_apod_create2 You can optionally enter a date or leave it blank to retrieve today\u0026rsquo;s image\nimage No need to parse the JSON response here, all the output parameters are ready to use by the downstream steps of the Flow.\n3️⃣ Conditional stuff There are 2 types of resource that can be retrieved from the API ( image and video), so depending on the \u0026rsquo; media_type\u0026rsquo; value of the response I set some variables for the Image Url and the Action to display at the bottom of the notification\nNotice the markdown image notation in the \u0026rsquo; title\u0026rsquo; 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.\n4️⃣ 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.\n5️⃣ 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.\nChoose the Notifications table ( appnotification) and set the appropriate fields.\nSet the IconType to Custom inject a JSON contruct in the Data field that contains iconUrl, body and actions nodes. Don\u0026rsquo;t forget to pass the resized image URL in the markdown. Here is an example of the final JSON injected in the Data field:\nAnd that\u0026rsquo;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 😎.\nHere are some example:\nConclusion 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.\nAlso, I really had a blast 🚀 showcasing the NASA Astronomy Picture of the Day and developing the custom connector. To be frank Business apps are fine, but nothing beats Science 🤓.\n","date":"2021-09-23T03:38:29Z","image":"/embed-images-in-model-driven-in-app-notifications/maligne_lake.jpg","permalink":"/embed-images-in-model-driven-in-app-notifications/","title":"Embed Images in Model-Driven In-App Notifications"}