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.
Hi Ravi. Great article. I have tried following the instructions. But when I get to last step “Set the ListBox source to the global variable as shown below” if I try and set Items to “SearchResults.address” in PowerApps I get a invalid use of ‘.’ error. Also when I view variables in the Apps SearchResults is showing as a Boolean with No Value. Any help on this topic much appreciated.
Hi Peter, I did face similar issue when I have tried building the PowerApp. Generally when we declare a variable in PowerApp we either need to assign default value or set the value during runtime. In our scenario we are setting the value as a list during runtime and somehow PowerApp doesn’t recognize the datatype and associated properties unless we execute the PowerApp atleast once. The best way is to click the “Search” button in the PowerApp to populate the results in the “SearchResults” list global variable so that the associated properties will be available. Before that make sure all the previous steps are defined as I have highlighted in this post.
I have tried clicking the search button both within the PowerApps development environment and also having published the App and running it live on my mobile phone. In both cases when I then view Global Variables for SearchResults it shows as a Boolean with No Value. Any other ideas as to what I might be doing wrong?