How to send JSON data to Canvas Apps

We’re going to explain how to send a JSON response from Power Automate to Canvas app and how to convert the response into Collection format in Canvas app.

To illustrate, we have explained a small app as example. As First step, create a new Instant flow that can be triggered from canvas application and that sends specific columns to canvas application as below. In our example, we’re getting the list of cities from SP list using Get list items and output of the action is in JSON format. Next step is to get only the required columns using ‘Select‘ Action and we convert the JSON output into string using ‘Join‘ action since Power Automate can not send JSON data directly to power apps.

Use ‘Join’ output in Respond to a PowerApp or flow action to send the response to the canvas application.

In PowerApps, Call this flow from a button OnSelect event and split the response using Separator ‘;’. And loop through the split result to get the each column values of all rows and add it to Collection variable using following lines of expressions.

Clear(cityCollection); // Clear the values in the collection variable

Set(varResponse,Split(SendResponsetoApp.Run().citylist, ";")); // Run the flow to get the response.

// Loop through the result to get all rows in collection variable
ForAll(varResponse.Result,
    Collect(cityCollection,
        {
          ID:Last(FirstN(Split(Last(FirstN(Split(Result,",").Result,1).Result).Result,":").Result,2).Result).Result,
            City:Last(FirstN(Split(Last(FirstN(Split(Result,",").Result,2).Result).Result,":").Result,2).Result).Result,

State:Left(
                    Last(FirstN(Split(Last(FirstN(Split(Result,",").Result,3).Result).Result,":").Result,2).Result).Result,
                    Len(Last(FirstN(Split(Last(FirstN(Split(Result,",").Result,3).Result).Result,":").Result,2).Result).Result)-1
            )
        }
    )
);

Finally the string is converted to Collection of rows and stored in collection variable. Add a new blank gallery and use ‘cityCollection’ as datasource.

Please post your queries in the comments section. Happy Building 🙂