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 user clicks on Print button and passes HTML to Flow. And 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 Template option as shown in the below screenshot.
 
 
Step 3
 
Now search for Power Apps in the search box and select Power Apps button from template options.
 
 
Step 4
 
Now add a new step for creating file. First, we will create HTML file from HTML content we got from the Power App form.
 
 
Step 5
 
Now in a 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 document library. Here I have given the name as ‘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 a Site Address field, select site collection and in Library Name select document library. Please select site collection and document library which you selected in the Create file step.
 
Step 10
 
In the  Id field, select the ItemId of Create file step as shown in the below screenshot.
 
 
Step 11
 
Now we will create a file In OneDrive. Because to convert HTML file into 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 file to PDF directly from 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 Get file properties action as shown in the below screenshot.
 
 
Step 13
 
In a File Content field, select Createfile_FileContent from PowerApps action as shown in the below screenshot.
 
 
Step 14
 
Now add a new step for Converting file using path.
 
 
Step 15
 
In convert file using 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 variable.
 
 
Step 17
 
In a Name field give 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 file in SharePoint. We will create a converted PDF file in SharePoint document library.
 
Step 19
 
In a Site Address field, select site collection and in a File Name field select the below expression,
  1. concat('HTMLPrint',variables('CurrentDateTime'),'.pdf')
 
Step 20
 
In a File Content field, select the File content from Convert file using 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 Library Name field. In Id field, select Itemid from the Create file action from 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 as “PowerAppPrintPDF”.
 
 

Setup Print button in Power App form

 
Step 1
 
Now go to your Power App form and add a button from the Insert menu and update its text as Print.
 
 
Step 2
 
Now select the button and click on Power Automate option from 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 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,
  1. Set(HTMLToPrint,Concatenate("<html><head>  
  2.         <style>table {  font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}td, th {border: 1px solid #dddddd;text-align: left;  padding: 8px;}</style>  
  3.     </head>  
  4.     <body>  
  5.         <table style=""width:100%"">  
  6.         <tr>  
  7.             <th>First Name</th>  
  8.             <td>",DataCardValue1.Text,"</td>  
  9.         </tr>  
  10.         <tr>  
  11.             <th>Last Number</th>      
  12.             <td>",DataCardValue2.Text,"</td>  
  13.         </tr>  
  14.         <tr>  
  15.             <th>Email Address</th>      
  16.             <td>",DataCardValue3.Text,"</td>   
  17.         </tr>   
  18.     </table>  
  19. </body></html>"));  
  20. Concurrent(Set('PowerAppPrintPDF','PowerAppPrintPDF'.Run(HTMLToPrint)),Notify("Generating PDF File for your power apps screen"));  
  21. 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
 
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!