Convert All images from PowerApps Gallery control to HTML\PDF using JSON Function

In this article, we use the newly released JSON for canvas apps function and export all the images in a PowerApps Gallery to an HTML file and then convert that HTML file to a PDF file using the Muhimbi PDF Converter.

To reduce the complexity, we will divide the article in three parts:

1. Design a canvas app that will capture Multiple Camera Clicks and show them in the Gallery control.
2. Create a Flow, which exports all the images to HTML.
3. Convert the HTML file to a PDF file.

Prerequisites:

Before you begin, please make sure the following prerequisites are in place:

• An Office 365 subscription with access to PowerApps and Flow.
• Muhimbi PDF Converter Services Online full, free or trial subscription (Start trial)
• The appropriate privileges to create PowerApps and Flows.
• Working knowledge of both PowerApps and Flow.

Now, let’s start with building the Canvas APP portion of your  PowerApp.

Step 1:  Go to web.powerapps.com, sign in with your work or school account, click on the Apps menu in the left navigation bar, and then click on ‘+Create’ and Select Canvas app from blank.

Specify the Name and the Format of the APP and Click on ‘Create’.

Step 2: You’ll now get a blank screen. Insert a Gallery control on the page. (For this example I have selected the vertical gallery layout as shown below).

Step 3: Add a Camera control and collect the clicked images in a collection. Add a Camera control and put this beside the gallery.

Step 4: Add two Buttons to the Canvas.

Button 1– Modify the Text Formula to ‘Add image to Collection’.

Button 2– Modify the Text Formula to ‘Trigger a Flow to create an HTML’.

Step 5: Add a Label and Text field, to the Canvas.

Now that we have our PowerApps ready, lets wire up our Buttons to some formulas.

Step 6: Lets start with ‘Add image to collection and add JSON’. The final formula would be.

Formula Part 1:

To break down the complexity, lets break down the formula in to two parts.

Collect(
    Imagecollection,
    {
        Name: TextInput1.Text,
        Imagename: Concatenate(
            "Image",
            Text(Today()),
            "-",
            Text(CountRows(Imagecollection)),
            ".png"
        ),
        Image: Camera1.Photo
    }
);

In the above formula we are using the collect function, which updates the ‘ImageCollection’ collection with the unique file name with the encoded string of the photo taken from the camera control. The name of the file is a concatenated with text input string to Today’s date with an Index of the photos in the gallery control and finally it has the extension ‘.png’ added.

Set(
    JSONSample,
    JSON(
        Imagecollection,
        JSONFormat.IncludeBinaryData
    )
);

In the second part we will set the variable ‘JSONSample’, to the JSON function converts the image file URL to binary data.

Formula Part 2:  Now let’s configure the “Trigger a Flow to create an HTML” button, but before we configure a button we need to add a Flow.  Click on the ‘Action’ menu and click on the ‘Flows’ button.

On the right corner of the screen the Flows fly-out menu should open, click on ‘+ Create a new Flow’.

• It should redirect to the Flow designer.
• Give you Flow a meaningful name(I named it ‘my Json-Flow’)
• Add the Initialize variable action, set the parameters with reference to screenshot below and Save your Flow.

Now that we have our Flow ready, let’s get back to our PowerApps and add the formula to  ‘Trigger a Flow to create an HTML’ button.

For the button ‘OnSelect’ function add the Microsoft Flow and set the variable JSONSample. Then Clear the collection using the Clear Function.

Now that we have configured the PowerApps, lets continue building our Flow

In this Flow, we will create the HTML file which includes all Images in the gallery control and Input entered by the user in the Text Field.

From a high-level, our Flow would look like the screenshot below:

Step 1: The ‘Initialize a variable’ is used in our PowerApps(Run) Function and it  accommodates the input coming from the canvas app.

Step 2: Add the Parse JSON action

• Content: Pass the JSONRequest variable.
• Schema: This is the tricky part but, the folks at Microsoft have made it extremely easy for us to use.  We just need to use the “Use sample payload to generate schema” option. Though that does leave a question- where will we get the sample payload?

To get the sample payload, we need to navigate back to our PowerApps, add a label to the PowerApps Canvas and set it to the ‘JSONSample’ variable and copy the label content to the clipboard.

Once the label content is copied to the clipboard, delete the label from the PowerApps Canvas and get back to our Flow.

In the ‘Parse JSON’ action, click on ‘use sample payload to generate schema’, it should open a Modal dialog box, where you then paste the content from the Clipboard in the Textbox and click on Done.

Step 3: Initialize the variables with reference to the screenshot below:

Note: I have used this convoluted approach with 3 variables as – at the time of writing – Flow does not allow ‘self-referencing’ when setting the value of a variable. Please vote for this Flow Idea.

Step 4: Add the Apply to each loop and set it to the ‘value’ field, output of the Parse (properties only) action.

Note: Steps 5, 6, 7 and 8 all need to be inserted inside the ‘Apply to each’ loop.

Step 5: Add the Compose action to flow designer and add the formula.

concat('<img src="',item()['image'], '" />')

Step 6: In this Step, we will create the HTML String.

Then, set variables HTML String variable with reference to the screenshot below.

Step 7: In this Step, we will create the Merge String.  So, on each loop it will concatenate the Temporary String with our HTML.

Then set variables Merge String variable with reference to the screenshot below.

Step 8: Set the variable Temporary String to MergeHTML variable with reference to the screenshot below..

Step 9: Use the “Create file” SharePoint action to write the PDF document to the SharePoint document library.

• File name: Add the formula concat(‘HTMLGeneratedon’,utcNow(),’.html’).
• File content: Pass the “Merge HTML” variable as the File Content..

Convert the HTML file to PDF

Now that we have the HTML ready, you just need to create a new Flow and Pass the HTML Content to the Muhimbi HTML action.

Now you all might have a question-  Why is Clavin creating another Flow to just “Convert the HTML to PDF”, can’t we just add the action and pass the HTML?

The answer is yes, but on deployment to end users, each user needs their own account in Muhimbi system (to authenticate with The Muhimbi Flow Connector), or they all need to enter a shared account.

Sharing credentials is not a best practice and Muhimbi is not in control of this aspect of the way Flow works. May I ask for 1 minute of your time to vote for this Flow idea.

The workaround would be to use the indirect approach mentioned here. 

Reference articles:

• JSON function in PowerApps
• Microsoft Flow – Core concepts used by the PDF Converter

Subscribe to this blog for the latest updates about SharePoint Online, Microsoft Flow, Power Apps and document conversion and manipulation.