Adding a Print Button to a Power Apps Portal Page

Sometimes you just need to print.

Adding a print button to a Power Apps Portals page is pretty simple.

In the portal studio on the page where you want to add the print button, open up the source code editor.

This will open the source code editor where you can add your own HTML, CSS, Liquid, JavaScript, etc.

Paste in the following code:

<button onclick="PrintFunction()">Print</button>

<script>
  function PrintFunction() {
    window.print();
  }
</script>

Click Save, you should then see the Print button rendered on your canvas. Browse to the website to view your page.

You will see the print button rendered on the page.

Printing will show a preview, note that some components like entity lists may affect how the actual print out looks.

I had a question from a student, asking how to remove page header and footer while printing. I figured out that you can manipulate the @page object CSS and reduced the upper and lower margin to remove the header and footer.

@page {
    margin-top: 0cm;
    margin-bottom : 0cm;
}

Summary

In a real project might want to add some CSS to make the button a bit prettier. This concept is not to produce a pixel perfect, rendered document, but a quick and easy way to add a print button for your portal users.

Cover Photo by Museums Victoria on Unsplash

Nick Doelman is a Microsoft Business Applications MVP who still uses a paper notebook and every so often will print a document. Follow Nick on Twitter @ReadyXRM

Interested in learning about Power Apps Portals? Sign-up for the Power Apps Portals Fundamentals class today!