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.

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>
paste in code

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

Print Button

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.

Print Preview

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!

5 thoughts on “Adding a Print Button to a Power Apps Portal Page

  1. Nice! Here is a variation we used to add the print button next to the ‘Next’ button on a Web Form

    function addPrintButton() {
    var ctl = $(“#NextButton”);
    var button = $(”);
    ctl.parent().after(button);
    };

    Like

  2. ha! well, the HTML was escaped … see if this works

    var ctl = $(“#NextButton”);
    var button = $(‘<input type=”button” onclick=”window.print()” class=”btn btn-primary button next submit-btn” value=”Print” />’);
    ctl.parent().after(button);

    Like

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