Wednesday, February 5, 2020

Canvas APP printing usng HTML control

I think one of the biggest roadblocks for users converting from InfoPath to PowerApps has been the lack of any Printing support inside of Powerapps.  While I believe the support is in the Pipeline for PowerApps, it is possible to create Printable Forms in Powerapps today!

It’s not the cleanest path to Print, so bear with me

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:
print1print2
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.

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

Original post: https://office365daysayear.com/2017/09/21/print-a-form-in-powerapps/

No comments:

Post a Comment