Print A Form In Power Apps

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/print-a-form-in-power-apps/. Author: Matthew Devaney.

Print A Form In Power Apps Posted by - Matthew Devaney on - March 28, 2021 27 Comments

The ability to print in Power Apps canvas apps appeared in my tenant this week. Printing has been one of the most requested features for a long time. Though no official announcement was made I have been able to figure out how to use the new printing capabilities and I would like to share that knowledge with you. In this article I will show you how to print a form in Power Apps. Table of Contents Introduction: The Work Order App

Create A Printable Screen & The Print Function Setting The Paper Size Print The Power Apps Form Using The Printing Property Final Thoughts Introduction: The Work Order App

The Work Order App is used by the employees of a plumbing services company to view details about the jobs they are assigned to. Employees want the ability to print out paper copies of the work order.

Create a new SharePoint list called Work Orders with the following data: WorkOrder AppointmentStart CustomerName Location IssueReported MaterialsRequired 1002 03/28/2021 9:00PM Jessica Jones

67 River Road, Winnipeg, Manitoba, R0G 0B0 Water is drippping…

5 – PVC Pipes 1 – Tube Of Selant 10 – Screws

Open Power Apps Studio and create a new app from blank. Rename Screen1 as Work Order Screen . Insert an Edit Form called frm_WorkOrder onto the screen with Work Orders as the datasource. Then change the Item property to this code. First(' < em > Work Orders </ em > ') Code language: HTML, XML ( xml )

The Work Order form will now show the first record in the SharePoint list. In a full version of this app the form would be required to display any record in the list. But since this is an only example for the purposes of explaining printing we will leave it that.

Create A Printable Screen & The Print Function

Employees of the plumbing company want to print out a paper copy of the form. The printed form must be easily readable in black & white so we will make a new screen with a printable copy of the form.

Insert a new Portrait Print Screen and rename it Print Screen .

The new screen will appear blank with a Print button in the top-right corner.

If you look at the OnSelect property of the Print button it will show the Print function. This function makes the print page dialog appear when the button is clicked. Print () Code language: PHP ( php )

Go back to the Work Order Screen and add a Print icon to the navigation bar.

When an employee clicks the Print icon it will take them the Print

Screen . Use this code in the OnSelect property of the Print icon. Navigate( 'Print Screen' ) Code language: JavaScript ( javascript ) Setting The Paper Size

The printed form must fit on a letter size paper sheet (8.5″x11″) and be visible in black and white. Start by changing the Fill of the Print Screen to White…

…then make the screen Height = 1056 and the screen Width = 816. These dimensions will ensure the screen has the same aspect ratio as letter-sized paper. Printers display 96 dots-per-inch so we must scale down from 1100 x 850. Print The Power Apps Form

Now copy + paste the form frm_WorkOrder from the Work Order Screen onto the Print Screen . Place it in the center of the page and add an additional label with the words “Work Order” at the top.

Put the app into Preview Mode by clicking the Play icon in Power Apps Studio. Then click the Print button. A print dialog will appear on the screen showing the Work Order form. Ensure the paper size is Letter, the layout is Portrait and the scale is Default.

Alternatively, we can remove the borders from the form’s input fields by changing the DefaultMode to FormMode.View .

This version of the printed form looks much cleaner (although the appointment start time could use some work). Using The Printing Property

When the page is printing the “Print” button will disappears. This behavior is driven by a screen property called Printing .

To hide a control when a screen is being printed use this code. Not( 'Screen Name' .Printing) Code language: JavaScript ( javascript ) Final Thoughts

The printing features I just shared are only phase one in a series of updates. Per Emma Cooper, Senior Program Manager at Microsoft:

"The second phase of this work will be to introduce a function that enables saving a screen as a PDF in the app. This will allow compatibility to leverage Power Automate flows to do many of the events such as saving it somewhere, sending an email and other common actions. This is currently still in progress, and we can provide an update in the next few weeks." - Emma Cooper Code language: JavaScript ( javascript )

Printing in Power Apps has clearly taken a huge leap-forward but there is still much to be desired. In the future I would like to see: Printable forms with multiple pages

Printable galleries and data tables with multiple pages Did You Enjoy This Article?

Subscribe at the bottom of this page to have new articles sent directly to your inbox the moment I post them. Questions?

If you have any questions or feedback about Print A Form In Power Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps