Archive

Posts Tagged ‘ClearCollect’

Power Platform – Pass external API collection from Power Automate to Canvas App

February 9, 2020 1 comment

In this article, lets see how to pass an external API’s json collection from Power Automate(Formerly ‘Microsoft Flow’) to a Canvas application.

For this example, I am going to use ESRI  mapping service API, in my Power Automate Flow. Refer here to know more about ESRI. You may also use other APIs as per your convenience.

ESRI API is url based and returns the ‘Address Suggestions’ in json format.

Flow_Json_3

Before we start lets make sure to meet all the prerequisites.

Prerequisites:

  • Subscribe to 30 days trial and get Office 365 account.
  • Connect to Power Automate portal using Office 365 account to build Power Automate flow.
  • Connect to Power Apps maker portal using Office 365 account to build the Canvas App.
  • ESRI api URL – Refer my previous article on the usage of ESRI or you can simply use this url

Once all prerequisites are met, here is the high level design:

  • Create a new Power Automate flow and call ESRI API to fetch Address Suggestions.
    • You can take any open API which returns json collection.
  • Parse the ESRI API Response to json collection.
  • Create a new Canvas app
  • Trigger Power automate flow from Canvas App and read the collection.

Lets get started.

Steps to configure the Power Automate Flow:

  • Connect to Power Automate portal
  • Create a new ‘Instant flow’ by selecting the right Environment.

Flow_Json_1

  • Provide a name ‘GetAddressSuggestions’ and select trigger as ‘PowerApps’

Flow_Json_2

  • To call ESRI api, add a new ‘HTTP’ action.

Flow_Json_4

  • Choose Method as ‘GET’ and in URI paste the ESRI url as mentioned in prerequisite section.

Flow_Json_5

  • Next, we need to parse the response from ESRI api. As the ESRI results would be in json format, add ‘Parse JSON’ action.

Flow_Json_6

  • In ‘Parse JSON’ action,
    • set Content as ‘Body’ from HTTP action.
    • Next we need to provide the json schema of ESRI response. To do that, click on ‘Generate from sample’.
    • Flow_Json_9
    • Now copy the response from ESRI API (Copy the browser’s output using ctrl+a+copy)
    • Flow_Json_7
    • Paste in the ‘Insert a sample JSON Payload’ window and click ‘Done’.
    • Flow_Json_8
    • If no warnings, your ‘Parse JSON’ pane should look as below.
    • Flow_Json_10
  • As we completed the ESRI response capture and parsing to json, now we need to pass the captured json response to Power App.
  • To pass the json response to Power App, add a new ‘Response’ action.

Flow_Json_11

  • In the ‘Response’ pane,
    • Set the ‘Body’ to ‘Body’ from ‘Parse JSON’.
    • Flow_Json_12
    • Expand ‘Show advanced options’ and click on ‘Generate from sample’.
    • Copy the response from ESRI API and paste in the ‘Insert a sample JSON Payload’ window and click ‘Done’. (Same step like we did in ‘Parse JSON’ pane).
    • ‘Response’ pane should look as below with no warnings.
    • Flow_Json_13
  • Run the flow and make sure it ran successfully.

Flow_Json_18

Steps to configure the Canvas App:

As we completed the Power Auto Flow, now its time to consume the Power Automate flow response from Canvas App by following the steps below

  • Connect to Power Apps maker portal using the same Office 365 account.
  • Create a new Canvas App.
    • Note: Make sure the same Environment used for Power Automate is selected.
  • Add a new button.
  • Select the button, from the ribbon menu, click on ‘Action -> Power Automate’.
  • From the pane select the ‘GetAddressSuggestions’ Power app flow.

Flow_Json_14

  • After few seconds, you would see the Run() command auto populated as below.

Flow_Json_15

  • As we going to get json collection from flow, lets capture the json collection to a collection variable ‘collAddress’ using ‘ClearCollect()’. Refer article to know more about ‘ClearCollect()’.
  • With the ClearCollect() and Run() functions, the final ‘OnSelect’ statement should look as below.

Flow_Json_16

  • Lets run the App and click on the button. Application takes couple of minutes to complete the run.

Flow_Json_17

  • Post run, check the collection returned from flow by going to ‘File -> Collections’ tab.

Flow_Json_19

  • You can also add a ‘Data table’ control and display the results returned from flow as below

Flow_Json_20

🙂