How To Implement Print Functionality In PowerApp Form

Introduction

In this article, we will learn how can we achieve the requirement of print functionality in a PowerApp form.

Approach

We will create a Flow for generating a PDF. We will call the Flow when the user clicks on the Print button and passes HTML to Flow. Flow will generate a PDF file and store in OneDrive or SharePoint document library and return back the generated PDF file's URL to Power App form.

Setup Flow to generate PDF

Step 1. Go to here.

Step 2. Select My Flows from the left panel. Now from the top ribbon, click on New Flow and select the Template option as shown in the below screenshot.

Step 3. Now search for Power Apps in the search box and select the Power Apps button from the template options.

Step 4. Now add a new step for creating the file. First, we will create an HTML file from the HTML content we got from the Power App form.

Step 5. Now in the Site Address field, select the site collection. And in Folder Path select the document library.

Step 6. In a File Name field, type the name of the HTML file you want in the document library. Here I have given the name ‘HTMLPrint.html’.

Step 7. In a File Content field, select the Createfile_FileContent from Dynamic content as shown in the below screenshot.

Step 8. Now add a new step for getting file properties.

Step 9. In the Site Address field, select Site Collection and in Library Name select Document Library. Please select the site collection and document library that you selected in the Create file step.

Step 10. In the Id field, select the ItemId of the Create file step as shown in the below screenshot.

Step 11. Now we will create a file In OneDrive. Because to convert an HTML file into a PDF, we will need an HTML file to be available on OneDrive. In a flow there is an action available to convert file type for OneDrive only, we cannot convert HTML files to PDF directly from the SharePoint document library.

Step 12. Now in this Create file step, in a Folder Path select Root folder. In a File Name field, select File name with extension from the Get file properties action as shown in the below screenshot.

Step 13. In a File Content field, select Createfile_FileContent from the PowerApps action as shown in the below screenshot.

Step 14. Now add a new step for Converting files using the path.

Step 15. In the convert file using the path step, in File Path select Path from the Create file action and select Target type as PDF.

Step 16. Now add a new step for initializing the variable.

Step 17. In a Name field give a variable name as CurrentDateTime, select Type as string, and select Value as utcnow() from Expression.

Step 18. Now again add a new step for creating a file in SharePoint. We will create a converted PDF file in the SharePoint document library.

Step 19. In a Site Address field, select site collection, and in a File Name field select the below expression.

concat('HTMLPrint',variables('CurrentDateTime'),'.pdf')

Step 20. In a File Content field, select the File content from the Convert file using the path action in Dynamic content as shown in the below screenshot.

Step 21. Now again add a new step for getting file properties.

Step 22. In a Site Address select site collection and select document library in the Library Name field. In the field, select Itemid from the Create file action from the Dynamic content section.

Step 23. Now we will send a response back to Power App. So, add a new step for responding to a PowerApp or flow.

Step 24. Now click on Add an Output and select Text.

Step 25. Now in a title type PDFUrl and in value select the Link to an item from the Get file properties step as shown in the below screenshot.

Step 26. Now flow setup is done. Note the flow name and save your flow. Here I have given the flow name “PowerAppPrintPDF”.

Setup Print button in Power App form

Step 1. Now go to your Power App form add a button from the Insert menu and update its text as Print.

Step 2. Now select the button and click on the Power Automate option from the Action menu as shown in the below screenshot.

Step 3. On clicking Power Automate, it will open a panel with a list of flows. Now select the flow which we have created. On clicking flow, it will take a few seconds to add it into your power app form.

Step 4. Now replace the code of the OnSelect event of the Print button with the below code.

Set(
    HTMLToPrint,
    Concatenate(
        "<html><head>",
        "<style>table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; }",
        "td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; }</style>",
        "</head><body>",
        "<table style='width:100%'>",
        "<tr>",
        "<th>First Name</th>",
        "<td>", DataCardValue1.Text, "</td>",
        "</tr>",
        "<tr>",
        "<th>Last Name</th>",
        "<td>", DataCardValue2.Text, "</td>",
        "</tr>",
        "<tr>",
        "<th>Email Address</th>",
        "<td>", DataCardValue3.Text, "</td>",
        "</tr>",
        "</table>",
        "</body></html>"
    )
);

Concurrent(
    Set('PowerAppPrintPDF', 'PowerAppPrintPDF'.Run(HTMLToPrint)),
    Notify("Generating PDF File for your PowerApps screen")
);

Launch('PowerAppPrintPDF'.pdfurl);

Step 5. Now save and publish the form.

Step 6. Go to the list. Click on New item, type the values in the fields, and click on Print.

Step 7. On clicking the Print button, it will call the flow and flow will return the generated PDF file’s URL to the power app form and it will open a PDF file in a new tab of the browser. If the popup is blocked in your browser, then you need to allow a popup for your site to open a PDF file.

Step 8. The PDF file will be as shown in the below screenshot.

Summary

So, this is how we can implement the functionality of print in power app forms. Hope this article will be helpful for you!