PortiBlog

Building PowerApps using data from a Custom Connector

22 januari 2018

PowerApps (and Flow Buttons) have the possibility to use the GPS device on you phone or tablet to access your current location. This is quite nice, because it gives you the possibility to log your location. But coordinates are just numbers, Longitude and Latitude, and sometimes you would like to log a “meaningfull” location based on your coordinates. We can use the Google Places webservice to find known places within your proximity. 

In Flow you could access the service directly by using Actions, but PowerApps do not have that possibility by default, so we will be needing a Custom Connector. I would also like to show you how you can trigger the custom connector from within your PowerApp and use the data that is returned.

Google Places - OpenAPI

Creating a Custom Connector is actually pretty simple if you have the correct description of the service you are going to connect to. We are going to use the OpenAPI specifications to create this description of the Google Places webservice.

Consuming the Google Places webservice

Using the Google Places API is free. There is a Premium plan, but we do not need this for our application.

First you will need to create a Google Places API key, this key is needed to authenticate against the API. You will need a google account for this. Just browse to the Google Places API site (https://developers.google.com/places/web-service/get-api-key) and press the  button.

Now we are able to consume the service. The Google Places service uses the following format:

The first part https://maps.googleapis.com/maps/api/place/nearbysearch/ will always be the same. The output need to be replaces with either json or xml. We will use json, because we want the service to return a response in json format.

The parameters we are going to use are the minimal required parameters:

  • key – this is the application’s API key you generated
  • location – this is the location specified as “latitude,longitude”
  • radius – this is the distance in meters within which to return results

There are a lot more possibilities you could explore depending on the application you are building. These can be found on the Google Places webservice developers guide: https://developers.google.com/places/web-service/search

To test the service in our browser, replace the <APIKey> text with your API key:

https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=<APIKey>&location=52.0314208,5.1004413&radius=50

Check out the result, it should be a json file showing the locations that are known to google within 50 meters from the geometrical location 52.0314208,5.1004413. (and Portiva should be in there somewhere )

Generating the OpenAPI specification

We now have a working Google Places webservice URL. We are going to use this URL to generate a OpenAPI specification for the service. Fortunately we can get help doing this by using the OpenAPI generator from http://specgen.apistudio.io.

The steps are pretty easy, I will only go through the steps where you will probably change something:

First paste the URL we used to test the service in the browser in OpenAPI generator. We will need to use a GET operation.

Now click Next step until you reach API info. Change the Operation Id and Summary to your liking. These are the operations names you will be using in the Custom Connector.

Click Next Step until you reach Open API Spec look a the generated json file. You can download the spec to use it to create a Custom Connector.

 

There is a small problem with generating the OpenAPI spec file. The format is not always correct, so may you will need to edit the file after generating is. In my case it was missing some “type” definitions. I included a working OpenAPI specification for Google Places which you can use. If you compare the included specification with the generated one you will notice the differences.

Creating the Custom Connector

Now that we have the OpenAPI spec we can start creating the Custom Connector. Let’s walk through the steps.

Browse to https://web.powerapps.com and login with you credentials. On the left select Custom Connectors.

In the top right of the screen click on Create custom connector and choose Import an OpenAPI file.

Give your connector a name and choose the OpenAPI file included in this blog (or the one you created).

If the import is successful we can walk through the steps to do some configuration. You can leave the defaults on the General page, so click on Continue in the bottom of the page.

The second page is the Security page. We will be using a API key in the query string. For services requiring other types of authentication you can also choose: Username/Password or OAuth 2.0.

Now click on Continue to go to the Definition page. Make Shure the fields Summary, Description and Operation ID  are filled in.

Scroll down until you reach the Request settings. You can delete the key parameter here because we defined this in the security tab.

The connector is now ready to be created by clicking on Create connector.

Using the Custom Connector

Now that we have created a Custom Connector we will want to use it. It is actually quite simple and by using available connectors and services you can build really powerfull apps. I will not go into to much detail in how PowerApps work in this blog. I will demonstrate a simple way to use this connector within your PowerApps. I will leave it to your imagination how to apply this in your situation. A little bit of PowerApps experience could help, but you should be able to follow the steps without experience.

We still have our PowerApps environment opened in the browser. On the left choose App and in the top right click on Create an app.

We will start with a blank App in Phone layout.

First let’s put some controls on the screen. In the Ribbon select Insert and Button.

Give the button a text to your liking and move it to the bottom of the screen.

On the Insert tab in the Ribbon choose Gallery and select Blank vertical. This control will show the places we are going to retrieve in a list.

Resize the gallery control to almost fill up the screen.

To check if we are getting locations from the GPS device we will add a Label control below the Gallery control.On the Insert tab in the Ribbon select Label. Move the label to a position between the gallery control and the button.

We are now going to retrieve the location from the GPS device and display it in the Label control.

Select the Label control and in the formula bar type the following formula:

Substitute(Text(Location.Latitude),",",".") & "," & Substitute(Text(Location.Longitude),",",".")

Let’s explain what we are doing here: The location need to be in the “Latitude,Longitude” format. As I am located in the Netherlands the coordinates will be formatted as “50,123456”. Notice the comma! The webservice expects a dot in that location. The way decimals are divided defers based on location.

The formulas: Location.Latitude and Location.Longitude will get you the GPS coordinates of your device at that moment. With the Substitute function the “,”  will be replaced by a “.”. With the & operator we will create a string with the latitude and longitude as expected by the Google Places webservice: <latitude>,<longitude>.

It should now look like this:

Creating a new Data Source connection

We will want to retrieve the places and put the result in a variable which we can bind to the gallery control. First we will need to create a connection to our Google Places custom connector.

Click on View in the Ribbon and select Data sources.

A panel with all possible connections opens. Scroll the list of connectors until you will find your custom connector. Select the connector. You will be prompted for your Google Places API key. Paste it in the textbox and click Create. The connector will be added.

Query the Google Places webservice

We now have the controls in place and we have a connection to query the Google Places webservice. Let’s put the logic in the button to query the Google Places webservice and display the results in the Gallery control

Select the Button control and checkout the formula bar.

Make Shure the OnSelect property is selected. By default this will be set to false, which means it will do… nothing. Using a connection to a datasource is easy in PowerApps, let’s look at the command we will use.

We want to store the results in a context variable called places. To create and/or update a context variable we use the function UpdateContext({<variable_name>: <value>}).

The function GooglePlacesapi.GetPlaces(<location>, <radius>) initiates the connection to the Custom Connector to retrieve values from Google Places. Be aware that the function GooglePlacesapi might be different in your situation. 

Because we only want do use the results part from the json response from the webservice we will append .result to the function call.

Now the last thing we need to do is to bind the places variable to the gallery control and to make Shure each item in the gallery control shows the name of the Place.

Select the Gallery control. Now in the properties panel on the right select the Advanced tab. In the Data section under Items type in the variable name places. This will bind the variable wich will contain all result from the service to the Gallery control.

In the Data panel select a Layout. In this case I have chosen the layout that only shows a Title. We will want to bind the name property from the results to the Title.

If everything went as expected you should now be able to run the application by clicking the Preview app button or pressing <F5>.

Click on the Get Places button and checkout the result. In my case it show places within proximity of the Portiva main office. It also show the coordinates of the location where I am. If you do not see coordinates this may be because your computer does not allow it to share the location, you could build in some formula to use a fixed location if no location is available.

 

Save and publish the App

To test your app on you mobile device click on File -> Save and then Publish the app.

Start your PowerApps app on your device and login with your credentials. Your app should be available now… run it and test it .

Showing more information in the Gallery control

The webservice return more information than the name of the place. Currenty PowerApps also has the possibility in preview to view the contents of variables. To do this click on File -> Variables and Click on the little table icon.

Click on the table icon and you will see all columns available.

By changing the layout of the gallery control you can show more information about a place.

This is just a little demonstration of how you can use Custom Connections within PowerApps. PowerApps are very powerful and the way you can use external services with them opens up a huge amount of possibilities.

Sources

 

 

Submit a comment