PowerApps – Create HTML/PDF Reports

Do you get shivers every time your client or boss asks for a report of that beautiful PowerApps Gallery you built for them?
This post will give you the tools you need to create beautiful PDF reports with and without images using our wonderful PowerPlatform and a little code magic.

The very first thing you are going to want to do is setup a Gallery or Collection in PowerApps <– This is what we will be using as our base for our report.
Lets take a look at my very basic app that tells some real truths:

Items

As you can see we have three columns – Description, Purchase and Notes
We are going to export the 4 rows of a snapshot of my life (dont tell my wife) to PowerAutomate where we will formulate our amazing HTML.
The code to do this is quite simple – but first we need to create our flow.

Items

Above you see two things:
1. The first is our PowerApps trigger. This is what allows us to call and send data to the PowerAutomate Workflows (Flows).
2. The second is an Initailise Variable step with Type Array and a nice name. We at NSC use var_ to start our variables so they are all the same scheme.

The beautiful thing about the PowerApps Connector is that it also does something else for us. As you can see it lets us Ask in PowerApps as a dynamic value option. This creates a PowerApps Variable with the name of the control:

Items

Notice the name of the variable varitemsFromPA_Value and look at the name of the initialise variable step: var_itemsFromPA_ <– take note of this.. when you are dealing with 100’s of these, your naming scheme will save your headache!

So quickly recapping… We have a PowerApp with Data and a Workflow with a setup ready to receive it… Lets join them.

Items

I have added a button to my PowerApp > I have clicked on my button > I have clicked actions in the top header > I have clicked Power Automate and Now I simply have to select my requested flow.

Items

I have now selected createReportDemo (My Workflow’s name and its adding to my button)

Items

Oh No! It failed to register… This is something you WILL run into when you are playing with Flow and PowerApps… The trick here. PowerApps can accept and receive only one thing… Text (strings, words, characters, bits) it only deals with Text…

So when we created our variable as type array that puts a request to PowerApps to send an Array reponse. It cannot complete this action so it FAILS! Don’t fear though. This isn’t a stopping point; we just have to change our functions slightly

To Remove a PowerApps Variable you have to remove the Trigger from the Flow:

Items

ItemsItems

Okay we have cleared that Variable… Now lets change the variable type:

Items

Now lets re-request our PowerApps Variable:

Items

Okay now we are ready to head back to the PowerApp.


BOOM!

Items

We are now ready to start adding our code to the no code solution! 🙂

In the function bar at the top of the PowerApp if you select this…

Items

It shows you your beautiful NAMED variable that it is asking for

These are mandatory. If you ask for two you must provide both responses. Hence why I showed you how to delete incorrect variables above… cause god dammit man we are only human!

The function layout is as follows:

`createReportDemo.Run(JSON(expenses, JSONFormat.IgnoreUnsupportedTypes))`

My collection here is called expenses (which contains all the columns and data)

We are using Ignore Unsupported Types because I dont want to deal with NULL value checking today you can read more about this here:
JSON Functions
We will cover JSON in more depth in blog posts to come!

Items

So we now have a button that will send all our data from PowerApps to PowerAutomate in a JSON format and a PowerAutomate Workflow that will grab that response and put it into a string variable for us… GREAT!

Time for the HTML…. WRONG we have to do some dumb stuff first…

Your beautiful button you created earlier… Press it.. Press it now!

Hopefully it will run your flow and you will get a succeeded response like below:

Items

We are now going to open that response:

See that beautiful Value there… right now it contains [{BLAH BLAH BLAH

This is our JSON code and what we need to copy for this step:

[
{“Notes”:””,”URI”:””,”description”:”Cat”,”editValue”:”false”,”purchase”:133},
{“Notes”:””,”URI”:””,”description”:”Wife”,”editValue”:”false”,”purchase”:999},
{“Notes”:””,”URI”:””,”description”:”Baby”,”editValue”:”false”,”purchase”:200},
{“Notes”:””,”URI”:””,”description”:”Ben”,”editValue”:”false”,”purchase”:1}
]

Okay now we have our sample code lets jump into the Workflow’s edit mode:

Insert a _Parse JSON_ action and provide the content as the var_ variable we defined earlier

Items

Now see that Schema is required … SMASH Generate from Sample and dump our copied notes from our succesful run in there

Items

Then click done!

Items

Now our JSON is entered we can continue

Add a new step – Create HTML Table

The Content for this is the Dynamic Body of our Parse JSON

I have added a comment so you can see the real expression (if you care)

Items

Okay home stretch…

This Create OneDrive for Business connector might cause you some grief… its not you… its Power Automate…

There are two solutions to resolve this error:
onedrive error

  1. Export your flow… then simply re-import your flow….. Yup…
    OR
  2. Delete your flow…. then delete your OneDrive for Business Connector from the connectors screen on the left…. Create the OneDrive for Business Connector again and finally recreate your flow

Add a Create OneDrive for Business File:

Items

The Filename MUST contain .HTML here

The File Content is the body response of our Create HTML Table

Next Add a Convert File (Preview) Action:

Here our *File: is the ID of the above created File and Type is as you request. However as the title suggests this is to PDF!

Items

Finally…

Add a Create File action… 

Here we are going to just play match the names and use the File Name and File Content of our Convert File action:

Items

And Thats it…

This final step will create our PDF and save it to the defined location. You can fancy this up but that will be part two of this post 🙂

Here is the output of this basic PowerApp and PowerAutomate Workflow:

Items
Items

Hope this helps! Read the next step here: PowerApps – Create Beautiful HTML/PDF Reports

Taking your PowerApps and PowerAutomate Skills the NextStep

Ben is now in trouble… Signing off!

One thought on “PowerApps – Create HTML/PDF Reports”

Leave a Reply

Your email address will not be published. Required fields are marked *