Creating Printable PDF’s of PowerAPPs screen which contain Pen-controls.

I have been working with PowerAPPS for quite some time and to be honest initially I was not comfortable using it, but slowly and steadily I am LIKING IT ❤ and yes, it seems to be the perfect product for the Mobile ERA.

However, one feature that it lacks is converting the screens into Printable PDF formats.

Thanks to Muhimbi it all seems to possible 🙂.

So let’s take up a real world scenario:

My client had a requirement. i.e. they needed Functionality in PowerAPPS which get the Pencontrol(Signature) and the data
capture in PowerAPPs to be exported as PDF report and send it as an email attachment.

Before we begin:

• You need to have an Office 365 subscription with access to  SharePoint Online, Azure Subscription or access to Azure BLOB storage, PowerApps, and Flow.
Muhimbi PDF Converter Services Online full or trial subscription (Start trial)
• The appropriate privileges to create PowerApps and Flows.

I expect the reader to have Basic knowledge of all the above technologies.

Once you have the above requirements in place you should be good to Start, your PowerAPP development. I would request you to first keep the naming conventions’ similar to mine and after you get the basic demo working you can mold your APP as per your requirement.


Getting Started with PowerAPP

Open PowerApps Studio in your browser, click or tap New on the File menu (near the left edge of the screen) Click on New option  File menu.

Click on the Blank app tile, click or tap Phone layout.

You should now be able to see a blank PowerApp, with a single screen.

Setting up SharePoint List and adding it as a data-source in PowerApp:

  1. Create a SharePoint List with Name(PowerApps).
  2. Add a Column Single Line of Text, Column name (ImageName).
  3. Now let’s, add the SharePoint List as a Data-Source in PowerApp. On the PowerApp ribbon.
  4. Click on View DataSource, SharePoint
  5. Select the “PowerAPP’ SharePoint List.

Setting up Azure Blob storage:

Let’s create a PowerAPP and add the Data-sources to it.

  • Login to PowerAPPs
  • In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).
  • Click on New option, File menu.
  • Click on the Blank app tile, click or tap Phone layout.
    Click on the PowerAPP View Tab, “Data source”.
  • Add the “Azure-Blob-Storage” source and select the Excel File.
    Note: You need to add the specify the Azure Access Key to connect to data source.
  • Similarly, add the SharePoint List as a Data Source.

Your Data-sources should look like this:

Datasource.png

Setting up our PowerAPP

  1. Add a Pen-Control to PowerAPP and a TextBox to your PowerAPP screen.
  2. Add a Button to the PowerAPP Screen.

Your PowerAPP will look like this:

PowerAPP.png

Configure the Button (Pencontrol)

In the OnSelect property of the button, add the following:

“Patch(Imagename,Defaults(Imagename),{Image:PenInput1.Image});ClearCollect(Pencontrol,Imagename.Image);Patch(PowerAPP,Defaults(PowerAPP),{Title:TextInput1.Text,ImageName:Right(Last(Imagename).Image,36)})”

Formula.png

So let’s break the above formula:

  • “Patch(Imagename,Defaults(Imagename),{Image:PenInput1.Image})”
  •  Patch the PenInput1 to the Excel File. Imagename is the name of the “Azure BLOB Storage Data-Connection which has the Excel File”.
  • ClearCollect(Pencontrol,Imagename.Image)
  • I’m using ClearCollect, the collection will always be cleared first, having one image only in the collection and then Storing the Azure Blob File Path.
  • Patch(PowerAPP,Defaults(PowerAPP),{Title:TextInput1.Text,ImageName:Right(Last(Imagename).Image,36)}) 

Patch the SharePoint List Columns i.e.
Title : TextInput1.Text
ImageName: Last value in the “Draw” Collection However we are interested in online the Last 36 characters as it contains the Image GUID.

For details on Patch Functionality, see: https://powerapps.microsoft.com/en-us/tutorials/function-patch/

PowerAPPscreen.png

Now time to Test our App in action. Press F5 or select Preview and test the APP.

Navigate back to your SharePoint List, you should see the File name(or at-least the GUID Filename).

SPLIST.png

Now that we have the item name GUID (In our case the GUID is the item name).

However, the GUID is of no use without an entire BLOB URL.

Steps to get the Item URL from Azure Portal.

  1. Login to Azure Subscription.
  2. Navigate to the resource group, Storage account.
  3. The Container(Folder) containing our Blobs.
  4. Click on the (…) ellipse and Copy the URL.
  5. If we append the GUID to our URL we should be able to access to the URL anonymously.
    My sample Blob URL https://xxxxxxxx.blob.core.windows.net/powerimage/PowerAPPS_images/test .pngAzureURLpng

Now, this is where the ⭐ Real magic ⭐ Happens, Yes, we will Convert our PowerApp to PDF using Muhimbi and Microsoft FLOW.

FLOW.png

Let’s see each of the above steps in details:

Step 1: “When the Item is created” You need to add your Site Address and the List Name(the name of the List where you patched the PowerApps details).FLOW1
Step 2: Add the Muhimbi “Convert to HTML” Action and create a raw HTML and look up the value from the SharePoint List.

FLOW2
Step 3: Send it as an Email. You need to fill in all the details in the Attachment Content section and use the “Processed file Content” Output of Muhimibi action to the Attachment Content section.FLOW3

So now let’s, log into PowerApps on the web or mobile device(I have tested the Powerapp with iPhone, Android device), open your app fill in the details and hit the Submit button.

  • The details with patched to SharePoint List.
  • The FLOW will run.
  • You will get the converted PowerApps screen as a PDF in your inbox.

Outlook

Thanks to Muhimbi PDF converter’s we can finally convert the PowerAPPs screens in printable formats, and now I am sure most of you will agree PowerAPPs is for sure the NEXT Big thing and the successor of InfoPath.

Advertisements

4 thoughts on “Creating Printable PDF’s of PowerAPPs screen which contain Pen-controls.

  1. Hi Clavin, Loved your blog, especially the flow of the blog, out of curiosity i have one question.. here in this blog we are converting image to pdf, means we are converting pen image to the PDF format using muhimbi PDF not entire screenshot of the PowerApps (which i thought initially), please do elaborate

    Like

    1. Hi Sarang,

      I am Glad that you liked the Blog. You are right. this article is NOT about converting the layout of the PowerApp screen to PDF( Due to architectural difficulties, that is currently not possible).
      However, you can recreate the layout with some HTML magic in Muhimbi HTML action and pass the Data(Pen-Control image, Textbox data etc) and Convert it to PDF.

      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