How to Print a Form in PowerApps (redux)

Back in 2018, I wrote a blog post on how to print a form in PowerApps, which essentially involved creating an HTML report and then dumping that out to an email to be printed. While it wasn’t very pretty, it got the job done since there was no native printing support in Power Apps. Well since then, Microsoft has finally added the Print ability so many people wanted. So how does it work?

Print()

That’s it! It’s a very simple command that takes no parameters, and sends the screen off to the printer of your Choice. In the screenshots below, I spun up a Template of an App, added a “Print” button, and set the On Select Formula of the button to Print():

Now, when I click that button, I get presented with a Print preview of the Screen where the button is located.

While that’s not very Print friendly, there are also some options to allow you to customize a printable view. For instance, you could add a new Screen using the built-in Print layouts (Portrait or Horizontal) and then build a Printable report from there:

By default, these screen come with a “Print” button with the Print() command already defined. From here you can format the Printed report to anything you want!

While this does provide some much needed functionality, there are some caveats to using the print button. i’m hopeful that Microsoft will eventually plug these gaps in the product, as some a fairly glaring, especially the “No Printing support from mobile devices” limitation.

How can I get around those limitations?

Well, even with those limitations, there is still the option I previously wrote about. Here’s what you need to do:

So, I have a simple 2 Screen for in a PowerApp I have built, and I want users to be able to print the form after it has been submitted.  Here is what my form looks like:

print1
print2

It’s a pretty standard Form for a Badge Request.  So now, how do we get it to Print?  The answer lies with HTML and Microsoft Flow.

My First Step is to add a ‘Print Form’ button on the First Item in my Requests Gallery.  I used a simple Icon for my “Button”.(Make sure you insert it into this box, so the icon ties itself to each Item in the gallery)

print3

Next, you will need to generate a Printable view of your Form from HTML.  You can use any HTML tool to do this (You can even copy and paste the HTML Code from InfoPath if you are migrating a form, and you had a printable view in there).  For this example, I created a simple 2 Column HTML Table, and replaced the 1st column with all of my Display Names for my Form.  We will be adding the Values for the Right column in the next step.  (Special Thanks to html-online.com for the easy and free HTML Generator)

print4

Back in your PowerApp, Insert an HTMLText Input box into the first Item of your Gallery, and change the Visible Property to false.  For the HTMLText Property, copy and Paste your HTML Code between the “”  (NOTE:  If your HTML Code uses double quotes, do a find/replace and replace double quotes with Single quotes).  We can now insert the values of the form into the second column.  For Example:

<td style=’width: 230px;’><strong>Request Type</strong></td>
<td>”&ThisItem.Request_x0020_Type.Value &”</td>

Notice, I am coming out of the closed quotes, and then appending the current items’ Request Type Value, and then appending the other HTML Again.

print5

Now, I have my HTML Form which will have all of my values.  Next I will create a flow for this Icon, but selecting the Icon, and clicking the ‘Flows’ button on the top Toolbar.  I will create a New Flow for this Button.

print6

I have named my Button ‘Send Printable Form, and I will be sending the HTML in an email.  Add the Outlook 365 ‘Send an Email’ action, and fill out the settings.  The two most important things here are to make sure you use the ‘Ask in PowerApps’ for the Body, and Change the ‘Is HTML’ to “Yes”

print7

Click Create Flow, and switch Back to your PowerApp, and then click the New Flow you just created to assign it to that button:

print8

In the Formula Bar, pass any of the Variables you defined in Flow.  In my Case, I will be sending the First Name (Which will be added to the Subject), and HTMLText2.HTMLText (Which is my HTML Text Box, and the HTMLText Property of that Box).

print9

Now just Preview the App, and Click your Print button.  You (or whomever was in the To: field of your Flow), will receive an email with a filled out Form which you can print!

print10

NOTE:  Because this is HTML, you can customize the look and feel as much as you want.

BONUS:  If you hate printing out of your Email Client:

You can also take that HTML content and Just add it to an HTML File!  In my Case I saved all of the content out to an HTML File in my One Drive For Business by adding an extra Step to the Flow:  print14

Now when the flow runs, I can simply download and open the HTML File from my Browser and print it from there: print12print13

In Conclusion

I hope this is something you may find useful, especially if you have a strong need to print.  Please check out some of my other articles to take a deeper dive into the product, and as always, please feel free to reach out to me at jo.karnes@centricconsulting.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s