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 🙂.

NOTE: Although the steps in this tutorial are correct, Microsoft has made changes and additions to how things work. We recommend you read this blog post / video instead.

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:

• Login to Azure Subscription.
• Create an Azure Storage> Create a Blob Container(powerimage).
• Set the Container Access Policy to “Container (Anonymous read access for Containers and blobs).

  

• Upload the Excel File attached or create a new Excel file with a table. One of your headers needs to have a name like Image[image].
• The important part of the name is [image]. The prefix does not matter.  For more details on how to create the excel file see: https://powerapps.microsoft.com/en-us/tutorials/add-images-pictures-audio-video/#upload-pen-drawings-to-the-cloud
• Upload the Excel file to your Azure Blob Container (powerimage).

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:

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:

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)})”

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/

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).

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 .png

   

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

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).
Step 2: Add the Muhimbi “Convert to HTML” Action and create a raw HTML and look up the value from the SharePoint List.

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.

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.

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.