Welcome back readers. As part of our previous post we have created the Azure Maps service which we are going to use in a PowerApps for quick search/validation of address. As part of this blog we are going to create a simple PowerApp which uses the Azure Maps Search API to quickly search for an address. Lets look at the steps to create a Canvas PowerApp.

Login into https://web.powerapps.com using valid credentials

Once logged-in click to create a Canvas app. On successfully creation, drag three controls a

1. Textbox – used to enter the address for search.

2. Button – used to initiate the address search using azure maps search API.

3. ListBox – used to display the search results.

Lets add a Microsoft Flow workflow on the button click. This flow can be used to send an request to the Azure Maps service . Lets go through the steps to create the Flow for PowerApp. Click the button and navigate to Action menu to add a Flow

Click to create a new Flow

Once the Flow Editor is opened, the PowerApps step is already added as a first step. As part of our example we need to pass the address search string as a parameter to the flow. For that we need use the “Ask in PowerApps” variable which will act as a required parameter which holds the address search string. I have initiated a variable and passed the “Ask in PowerApps” as the default value.

In the next step I have initialized a second variable called “AddressResults” of type Array to store the search results.

The next step is to send in a request to the Azure Maps service to search for the address. Using a HTTP step add the required information as shown below. Pass the “AddressText” variable value as a Query parameter value.

As the results are in JSON format, I am trying to parse the JSON so that it will be easy to extract the data. So I have added the “Parse Json” step to parse the response body. You can build the schema by using “Use sample payload to generate schema” option and Perform a quick query in your browser and past the results to generate the schema. The details are provided in our previous post. Once the schema is generated move onto the next step.

The next step is to extract the results. As response is an array of address matches, we have to use a loop step. Add the “Apply to Each” step and parse the results. As defined in my previous post, the response has results—>address—>freeformAddress within the JSON. So instead of sending the entire results response, I am extracting only the address information and formatting it into a JSON object to pass it on to the PowerApps. The weird part is PowerApps only supports responses in JSON format. Which is strange. I will try to dig deeper into this, but for now lets stick to the logic to send the required response as JSON. As shown below I am storing the result addresses to the “AddressResults” array variable.

The next step is format the output as a JSON object and send in the Response as shown below

Now our Flow is ready to perform a search using Azure Maps search API

Once done add the newly created flow to the “OnSelect” event of the button.

Call the flow on click of the button and capture the response within a Global Variable as shown below

Set the ListBox source to the global variable as shown below

and we are all set to do a final test.