PowerApps – Create Beautiful HTML/PDF Reports

Today we are back again…. Turning our boring HTML Table from PowerApps into a beautiful CSS Table with embedded images and with my limited HTML and CSS knowledge make it…. customer friendly

 

Do you know the initial setup?

If not please find my previous blog post below:
Create HTML/PDF Reports from PowerApps

Updating our previous flow:

The very first thing we are going to need to do is add a new string variable with a name we can remember!

PowerApps - initialise variable header content

Now we have our empty string… Lets do some HTML!

WAIT… But Ben… I dont know HTML….

Have no fear! W3 Schools is here! HTML Tutorial

< !DOCTYPE html >
< html >
< head >
< title > HTML Report < /title >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1″ >

Now if I can say anything…. Please do NOT copy the code below and expect it to work… The reason for this…. Bloody Quotations!
This is a quotation that wont work
This is a quotation that will work "

Special thanks to Reddit User ‘u/Knovar’ for experiencing this little bug so we can add it to the blog steps 🙂

Just make sure your quotes, symbols and special characters are on point as sometimes HTML and Website text editors like to just change things!

Now you will notice I am not adding the < style > tag here. This is for two reasons:

1. I am going to add quite a bit of CSS here… (Don’t know CSS? W3 Schools to the rescue! CSS Tutorial) The one thing variables in PowerAutomate does not like is lines and lines of visible text.

2. I don’t want to have to scroll or search 17 times looking for the once piece of HTML or CSS that I am trying to edit or change!

Next we are going to create another empty string variable.. This time instead of header content… you guessed it… var_HTMLStyle.

< style >
/*Set the Page size*/
@page {
size: A4;
}

/* Style the body */
body {
font-family: Arial;
margin: 0;
}
#limit {
max-width: 550px;
word-wrap: break-word;
}

/* Page Content */
.content {padding:20px;}

#customers {
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #264c79;
color: white;
}
< /style >
< /head >

The above code sets some CSS Styles for my tables and my body content as well as a very important step…

It sets the page size as ‘A4’
If you intend on exporting this to PDF… You will love this little gem..

Okay home stretch we are going to replicate the above two steps..

But we are going to create a var_HTMLBody this will include
thetag as well as some text if you desire

for us it will just be < body >

Then we are going to create a var_HTMLTable

This is the fun bit… The below piece of code (which will be the content of our var_HTMLTable String variable) Defines the tables Header, the tables CSS Style and the table header columns. Notice we do not yet close the table HTML

< h2 > Ben’s Money Breakdown < /h2 >
< table id=”customers” >
< tr >
< th > Name < /th >
< th > Cost < /th >
< /tr >

We are now going to create an apply to each loop from our previous ParseJSON and do a little Append to string magic 🙂

At this stage you can delete the previous Create HTML Table control as we are about to be replacing this.

First Create the apply to each and give it the ‘body’ content from the ParseJSON Response from earlier.

apply to each & append

As you can see above we have added an Append to string variable action… Now the magic…

< tr >
< td > @{items(‘Apply_to_each’)[‘description’]} < /td >
< td > @{items(‘Apply_to_each’)[‘purchase’]} < /td >
< /tr >

This builds our table row… One at a time… in the correct order…. 🙂

It should look like this:

apply to each filled out

Now after our apply to each we have to add some important steps.
It joins all our string variables together to make our finished HTML

The steps are as follows:
1. Close our Table with < /table >
2. Close our body with var_HTMLTable < /body >
3. Close our HTML Header with var_HTMLStyle var_HTMLBody < /HTML >

It should look something like below:
finish HTML

Finally use the var_HTMLHeader as the file content for your Create File action from the first Blog

create file

Now lets run this with content from before:

new table with css

Old Table for comparison:

old table without css

Hope this helps!

Taking your PowerApps and PowerAutomate Skills the NextStep

Ben Signing off!

Leave a Reply

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