Canvas Apps
How to Print Scrollable Screen to PDF in PowerApps

How to Print Scrollable Screen to PDF in PowerApps

One of the common requirements in any application is to print the data either to save the form as PDF or print the form. PowerApps provides Print() function to print the screen in a printable format, but the limitation is the screen height cannot be greater than 2164px.

If a Scrollable screen is used for displaying a very large form or gallery is used to show dynamic data where the screen height cannot be predicted, in such cases we have to rely on HTML form, with the help of Power Automate a pdf can be generated which can be used for printing.

One of the limitations is some of the HTML tags and CSS styles will not work in the “Convert file” action in Onedrive. For Eg: CSS “Display” property will not work properly.

On Print Button Click:

UpdateContext({locHtml:"<html><!--Your HTML--></html>"});
UpdateContext({locHtmlurl:PrinfForm.Run(locHtml)});
Launch(locHtmlurl.pdfurl)

In the HTML to add the form data we have to use string concatenation like below:

Dynamic Data
Dynamic Data

To Display the gallery or Datatable data we have to use the Concat function:

To Display Gallery data

To Display gallery data

Concat(gal.AllItems,"<tr><td>"&galLabel1.Text&"</td><td>"&galLabel1.Text&"</td></td>")

All we are doing is recreating the form structure in HTML and passing the HTML to PowerAutomate, In PowerAutomate using One Drive connector an HTML file is created and it is converted to PDF as simple as that.

One Drive connector alone is enough to complete the operation but the file will be created in the user account for whoever using the app and it can be shared with the whole organization.

Here we are using SharePoint to store all the PDF files as it acts as a centralized repository where all users can easily find the files.

In the above process, we are checking whether the folder is present if not a new folder will be created and if the file is already there then it will be deleted and a new file will be created.

Respond to PowerApps

The temporary files created in OneDrive will be deleted and the SharePoint file path will be sent to PowerApps if One Drive is used then its URL should be passed as Output.

Sample PDF

The above picture is a sample output, where a dynamic gallery is used, and as you see it is a total of 10 pages right even though it worked like a charm.

Suppose if there are more data in the gallery which exceeds the delegation limit it may be handled using pagination in Power Apps and we cannot pass all the data from power apps. In such cases, we can construct HTML in Power Automate itself.

Assume if the table part comes in the middle of a form, In that case we can send the top HTML portion and bottom HTML portion from Power Apps. Later those can be concatenated and we can continue from the “Create HTML file ” part.

Set the top portion variable

Query the data and construct HTML

Construct HTML

Concatenate all the variables and pass them to the “Create file” action.

concat(variables('toppdf'),variables('middlepdf'),variables('lowerpdf'))

Please post your queries in the comments. Happy Building šŸ™‚

4

4 thoughts on “How to Print Scrollable Screen to PDF in PowerApps

    • Author gravatarAuthor gravatar

      Entirely unlikely you’ll see this – but you don’t happen to have access to the boilerplate HTML used for the dynamic gallery still? Would love to try working this out with decent formatting!

    • Author gravatarAuthor gravatar

      you are the only one who comes close to a walk around on the printing a scrollable screen but your solution is not helpful because we can barely see the formulars and steps used in achieving this.

      • Author gravatarAuthor gravatar

        Hi Tee, Sorry for the inconvinience.
        You have to form the html dynamically and pass the dynamic contents along with it. In the example we formed the html using table tags like below

        <table>
           <tr>
              <td>
                 <label for="name">
                 Name
                 </label>
              </td>
              <td>label1.Text
              </td>
           </tr>
           <tr>
              <td><label for="email">
                 Email
                 </label>
              </td>
              <td>label2.Text
              </td>
           </tr>
           <tr>
              <td><label for="telnum">
                 Tel No.
                 </label>
              </td>
              <td>label3.Text
              </td>
           </tr>
           <tr>
              <td><label for="Roll No.">
                 Roll No.
                 </label>
              </td>
              <td>label4.Text
              </td>
           </tr>
        </table>
        

        Similarly for gallery control form html like below

        Concatenate("<table>",
        
        Concat(gal.AllItems,"<tr><td>"&galLabel1.Text&"</td><td>"&galLabel1.Text&"</td></td>"),
        
        "</table>")
        

Leave a Reply

%d bloggers like this: