HTML template based on dynamic data in PowerApps

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, 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.

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

Scenario:

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.

Problem:

Assuming the data is already available in a context variable, an object called Session, here is a sample email template with HTML tags and application data embedded. Let’s call it as Template1.

Template 1:

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.

Solution approach:

Let’s store placeholders inline in the HTML template instead of hardcoded application data values. The placeholders will be in the format of {i}, where ‘i’ refers to index of the placeholder being replaced. Let’s call this as Template2.

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.

Template 2:

Implementation:

First, let’s 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’s call this Settings.

Let’s assume you also have another source holding your actual conference data. Let’s call it Sessions

Steps:

On the OnVisible event of Confirmation Screen:

Create a collection SessionInfo using values from the selected session.

Collect the Settings into a local collection called AppSettings. We don’t want to modify the original template and hence storing it locally.

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, for each index, find its placeholder within the template, and replace that placeholder index with its associated Value.

 

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.

Benefits with the new approach:

• With this approach, you are avoiding hardcoding of your application data inline.
• Easier to store data and make modifications as there is separation between data and the template.
• Cleaner and more elegant way to view your template, and easy to debug.

Check out the sample app here