{"id":87,"date":"2018-05-31T06:37:09","date_gmt":"2018-05-31T13:37:09","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/html-markup-with-dynamic-data\/"},"modified":"2025-06-11T08:08:28","modified_gmt":"2025-06-11T15:08:28","slug":"html-markup-with-dynamic-data","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/html-markup-with-dynamic-data\/","title":{"rendered":"HTML template based on dynamic data in PowerApps"},"content":{"rendered":"

Using HTML templates is a great way to format and display data within in PowerApps applications, to generate reports and to send emails using the app. We come across many scenarios where there is a need to combine HTML markup with dynamic data. One such scenario is explained in the blog here<\/a>, which talks on how to actually combine the data with HTML tags. Another quick scenario I could think of is to generate a report after an inspection.<\/p>\n

In the article below, we will go a bit deeper and generate the HTML template with dynamic data in a much appealing way. Here<\/a> is another blog, using Microsoft Flow to create a PDF document from HTML template with Dynamic data.<\/p>\n

Scenario:<\/h3>\n
\n

Assume you have a Conference app. As users register for the conference, a confirmation email with details of the conference will be sent to each signed up user.<\/p>\n

\"App1\"<\/a><\/p>\n<\/blockquote>\n

Problem:<\/h3>\n
\n

Assuming the data is already available in a context variable, an object called Session<\/b>, here is a sample email template with HTML tags and application data embedded. Let\u2019s call it as Template1.<\/strong><\/p>\n<\/blockquote>\n

\n
Template 1:<\/h5>\n<\/blockquote>\n
\n

\"image\"<\/a><\/p>\n<\/blockquote>\n

\n

In this approach, we are hardcoding application data inline in the HTML template. And, maintenance gets harder as for any change in data and we are forced to modify the template.<\/p>\n<\/blockquote>\n

Solution approach:<\/h3>\n
\n

Let\u2019s store placeholders inline in the HTML template instead of hardcoded application data values. The placeholders will be in the format of {i}, where \u2018i\u2019 refers to index of the placeholder being replaced. Let\u2019s call this as Template2<\/strong>.<\/p>\n<\/blockquote>\n

\n

You can store the index and the application data values in a local collection. Use a ForAll loop and replace the placeholders with actual values from the local collection.<\/p>\n<\/blockquote>\n

\n
Template 2:<\/h5>\n<\/blockquote>\n
\n

\"Template2\"<\/a><\/p>\n<\/blockquote>\n

Implementation:<\/h3>\n

First, let\u2019s create an external source where we store our template. You can use any data source but for this blog, I’m going to use data from a static excel. Let\u2019s call this Settings.<\/p>\n

\n

\"clip_image002[8]\"<\/a><\/p>\n<\/blockquote>\n

Let\u2019s assume you also have another source holding your actual conference data. Let\u2019s call it Sessions<\/p>\n

\n

\"clip_image004\"<\/a><\/p>\n<\/blockquote>\n

Steps:<\/h4>\n

On the OnVisible event of Confirmation Screen:<\/p><\/blockquote>\n

\n

Create a collection SessionInfo<\/b> using values from the selected session.<\/p>\n<\/blockquote>\n

\n

\"Formula1\"<\/a><\/p>\n

Collect the Settings into a local collection called AppSettings<\/b>. We don\u2019t want to modify the original template and hence storing it locally.<\/p>\n<\/blockquote>\n

\n

\"Formula3\"<\/a><\/p>\n

Next step is to update the template with placeholders to dynamically embed actual Session Details inline.To do this, we need to loop through each of the indices in SessionInfo<\/b>, for each index, find its placeholder within the template, and replace that placeholder index with its associated Value.<\/p>\n

\u00a0<\/p>\n

\"Formula2\"<\/a><\/p>\n<\/blockquote>\n

At this point, you have a HTML template with application data embedded inline. And you can send this confirmation template as part of your email.<\/p>\n

\n

\"App1\"<\/a><\/p>\n<\/blockquote>\n

Benefits with the new approach:<\/b><\/p>\n