powerapps

Creating Formatted Text Documents with Power Apps & HTML

By Samy Doreau, Data Visualisation & Power Platform Consultant
A version of this article originally appeared on Samy’s blog here.

In this article I will explain how to create a rather nicely formatted document from data stored in Power Apps collection, which can be directly pasted into a rich text editor with its formatting preserved.

Power Apps is a low code / no code platform developed by Microsoft with the aim of empowering business users to quickly create apps to capture data and interact with data bases. As a consultant I have been using Power Apps for about a year and have progressively moved from creating very simple apps to full featured, complex designs.

In a recent project, I was faced with the challenge of reproducing an existing report used by our client, which consisted of a large text document with up to 40 pages, with arbitrary numbers of subsections, as well as formatted data tables. Instead of populating the data by hand, our client would use our application but they in turn also expected the application to produce the same formatted document they previously used for further sharing beyond the app.

We initially explored using Power BI to produce the report however we found it wasn’t as well suited to display large amounts of unaggregated text data as it is to visualise large amounts of numeric data for example. We then turned to Power Apps and designed an interesting workaround based on creating a data driven HTML string from the data loaded into the App.

Creating source data

First of all, let’s create data we want to turn into a formatted text document – here we create 2 very simple tables, one with problem descriptions, which will be the document’s first section, then the solution to problems, which will be the document second section :

Creating source data with ClearCollect

Creating the HTML template

The second step is to create the HTML code that will render into our document. and that we will enrich with data from our collection. There are free tools online which allow you to create formatted text, and generate HTML code as you do that – google is your friend to find these. As you can see below, you can just type in and format, and you get the code on the right hand side.

Typing on the left side and viewing HTML code appear on the right !

Enriching with data from collection

We now have the skeleton of our code. In Power Apps, you can create an HTML text label, copy in the HTML code and you will get the formatted result that you typed in the left hand side. The next step here is to insert the data from the collection into the HTML code rather than use hard coded typed in values.

In order to do this, we will need to generate a single string which contains fata from both our collections. Working backwards one step from this, we will in fact create a string for each collection and append into one. And working backwards one more step, we will in fact create individual string for each row of each collection and append these into one string – I know it may not sound super clear but bear with me !

In the below picture, I have highlighted

  • the HTML string that represent one row of our collection – let’s call these payloads – highlighted below in purple
  • the bits which need to be appended to generate the full string – let’s call these prefixed and suffixes

So essentially, we need to append strings generated from data from the collections and throw in some other bits to create the full HTML string.But we still need to use data from the collection to build the payloads string.

In order to do that, the idea is to create an additional column in our collections, which contains the payload string from that row. This can be achieved with the code below :

Adding a column to our collection

Pretty isn’t it ? Let’s break it down ..

  • First of all, you will have noticed that the HTML code contains quotes characters, however Power Apps does not support escaping these characters but you can however paste a programmatic representation of the quote character into the string by using Char(34). So basically, in the HTML code, just replace all [“] by [“&Char(34)&”] to insert the quote character into the string without typing it
  • Second, you also need to replace placeholders by the column namne holding the actual data, so replace all [placeholder] by [“&ColumnName&”]
  • That’s it !

Wrapping it all together into a final string

Now that we have our prefixes, suffixes, payload strings, all we need is to append them all into a single string and displat this into an HTML text label ! This can be achieved using the concat function on the Payload collection columns as shown below :

Building the final string

Displaying the result …

Just create an HTML text label, and set it to display FullString .. et voila !

Full code

ClearCollect(
    Problems,
    Table(
        {Title : "A first problem"  ,Description : "The description of the first problem here"},
        {Title : "A second problem" ,Description : "The description of the second problem here"},
        {Title : "A final problem"  ,Description : "The description of the final problem here"}
    )
);

ClearCollect(
    Solutions,
    Table(
        {Title : "Solution to first problem",Description : "The solution to the first problem here"},
        {Title : "Solution to problem"      ,Description : "The solution to the second problem here"},
        {Title : "Solution to final problem",Description : "The solution to the final problem here"}
    )
);

ClearCollect(
    ProblemsWithPayloadString,
    AddColumns(
        Problems,
        "Payload","<p style="&Char(34)&"padding-left: 30px;"&Char(34)&">"&Title&"</p><p style="&Char(34)&"padding-left: 30px;"&Char(34)&">"&Description&"</p>"
    )
);
ClearCollect(
    SolutionsWithPayloadString,
    AddColumns(
        Solutions,
        "Payload","<p style="&Char(34)&"padding-left: 30px;"&Char(34)&">"&Title&"</p><p style="&Char(34)&"padding-left: 30px;"&Char(34)&">"&Description&"</p>"
    )
);

Set(Prefix,"<h1>1. Problems</h1>");Set(MiddleFix,"<h1>2. Solutions</h1>");Set(Suffix,"<p>&nbsp;</p>");

Set(
    FullString,
    Prefix & Concat(ProblemsWithPayloadString,Payload) & MiddleFix & Concat(SolutionsWithPayloadString,Payload) & Suffix
);