cancel
Showing results for 
Search instead for 
Did you mean: 

Using JSON Function

In this article, we will use JSON for canvas apps function and export all the images in a PowerApps Gallery to an HTML file and then convert that HTML\PDF file using the Microsoft Flow.

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 Gallery control.
  2. Create a Flow, which exports all the images to HTML.
  3. Convert the HTML file to PDF file.

Prerequisites:

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

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 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 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 my Json-Flow)
  • Add the Initialize variable action, set the parameters with reference to screenshot below and Save you 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 is 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’ was the used in our PowerApps(Run) Function and it  accommodates the input coming from the canvas app.

Step 2: Add the Parse JSON action

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 Flows work . 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:

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

Meet Our Blog Authors
  • Working daily with Microsoft Cloud to deliver the needs of my company, my customers and various Microsoft communities and forums. | Office 365 | Flow | PowerShell | PowerApps | SharePoint |
  • Co-founder of https://plumsail.com, Office 365 and SharePoint expert. Passionate about design and development of easy to use, convenient and flexible products.
  • Microsoft Business Apps MVP. Owner of ThriveFast, an Office 365 consulting company.
  • 7x Microsoft Business Solutions MVP (CRM)
  • I'm keen in MS technologies, SharePoint, Office 365 and development for them
  • Daniel is a Business Productivity Consultant & Microsoft Business Solutions MVP who is very enthusiastic about all things Office 365, Microsoft Flow, PowerApps, Azure & SharePoint (Online). Since the preview, Daniel has been working with Microsoft Flow and later on with Microsoft PowerApps. That led to him being awarded an MVP Award for Business Solutions. He loves to blog, present and evangelize about improving productivity in the modern workspace with these amazing tools!
  • Michelle is an Office 365 solution architect in Twin Cities, MN. She has been delivering business collaboration solutions for years with her focus on SharePoint and Office 365. Michelle is a recent board member of the Minnesota Office 365 User Group and has been a member of the SharePoint community since 2009. She is a frequent speaker at MNSPUG and SharePoint Saturday and co-chaired the Legal SharePoint User Group for 4 years. Her most frequent projects have involved rolling out a large deployment of Office 365, SharePoint Online intranet, build of a "CHAMPS" Office 365 user adoption program and most recently, SharePoint On-Premise to Online Migration. Michelle is very excited about cloud technology as it is shifting her IT Pro focus to collaboration strategy and technical adoption.
  • I'm a Microsoft Office Servers and Services MVP with a special interest in SharePoint, Office 365, Microsoft Flow, Microsoft Teams and PowerApps. I work at Triad Group Plc ( https://triad.co.uk)
  • Passionate #Programmer #SharePoint #SPFx #Office365 #MSFlow | C-sharpCorner MVP | SharePoint StackOverflow, Github, PnP contributor