How to convert JSON array from Power Automate into a collection in PowerApps Canvas app

So I am back with another blog on PowerApps and this one is rather interesting. This is about a requirement which time and again come up in almost every requirement.

Did you ever had the following requirements?

• Bind JSON array from flow to a Gallery or DataTable in PowerApps canvas app
• Convert a JSON array to a collection in PowerApps Canvas app.

While it seems fairly easy, it’s actually quite tricky because canvas apps language (Power Fx) does not have any inbuilt function to convert a JSON array into collection which you bind it to a data table or canvas app.

Let’s start with a simple example here.

In the above screenshot, you can see the JSON array poLines which I want to parse and bind the array to gallery inside canvas app.

Since this will be called from inside Canvas app, the first action is obviously “PowerApps” trigger.

I have used the ParseJSON step post that. No brainer till this point.

Quite obviously I need to send the response back to PowerApps. And for that we have the most obvious action from PowerApps.

I add the flow to my canvas app.

And here in comes the real problem. You can see the return type if of type text. So even though you are returning the JSON array, canvas app is treating it as text.

The regular way didn’t work. Let’s take an innovative route. This time after the ParseJSON action, I am using the Select action.

Using the Select action I am creating an array with just the properties I need. The From value I have set to poLines property of JSON object which represent the array.

Basically I am selecting properties from the JSON array and then mapping them to my custom properties. The final array is what I will send back to PowerApps.

And here-in comes the most important step. Instead of using the obvious ‘Respond to PowerApp or a flow’, we use the HttpResponse action.

The custom array that I created in the earlier step is now set in the Body of the response.

But wait, what if I say we are still to complete the most important step and that is setting the ‘Response body JSON Schema‘ field of the response action.

Click on ‘Generate from sample‘ and then paste the sample json that you are returning in the sample JSON payload.

If you are not sure how to get the sample JSON, run the flow once and then get the sample output.

Your final action should look like below.

I go ahead and update my canvas app to re-add the updated flow. And now when I check the return type of the flow, it is of type DataTable.

Exactly as I wanted. You can now go ahead and bind it to a DataTable or Gallery or put it in a collection for later use.

I hope this helped!

Debajit Dutta
Business Solutions MVP