Office 365 PowerApps Deep(ish) Dive – Part 5

In Parts 1, 23, and 4 of this series, we created a PowerApp that will allow you to retrieve and submit data from SharePoint for Menus, and view Menu Items  In this post we will create a View for users to see the locations of our restaurants on a map.

In this example, we will be using the Google Maps Static API to pinpoint our restaurant addresses on a map.  In order to query the API, you will need to first sign up for an API key here:

https://developers.google.com/maps/documentation/static-maps/intro

Make a note of the API key, as we will need it later on.

On the SharePoint site, you will need to create a new list called ‘Locations’.  The columns will correspond to each element of a street address as shown here.  Once created, populate the list with some sample addresses:

padd5-5

Next, we will need to add a new screen as we did in Part 2 of this series.  This new screen will be named ‘Locations’.  Change the layout to match the Edit screen.

We will be adding 2 controls to this screen, a Vertical Gallery, and an Image.  Position both of the controls as shown below:

padd5-1

For the Gallery, we will want to connect it to the Locations list in SharePoint.  Add ‘Locations’ as a Datasource, as outlined in Part 1 , and then change the Items Property of the Gallery in the Formula bar to:

Locations_1

Next, you will want to position each filed so that it shows an address in the proper format.  Choose all of the necessary fields (Number, Street Name, Street Suffix, City, State, Zip), and arrange them in the first card.

padd5-2

The next step will be to connect the ‘Image’ Property of the Image control to the Gallery.  The URL that google uses for its API separates each element of the address with a ‘+’ sign, so we will use Concatenate to construct the string:

Concatenate(“https://maps.googleapis.com/maps/api/staticmap?markers=”,Gallery4.Selected.Number,”+”,Gallery4.Selected.Street_x0020_Name,”+”,Gallery4.Selected.Street_x0020_Suffix,”+”,Gallery4.Selected.City,”+”,Gallery4.Selected.State,”+”,Gallery4.Selected.Zip,”&zoom=14&size=400×400&key=YOURKEYHERE”)

padd5-3padd5-4

Change the YOURKEYHERE in the formula to the API key you signed up for with the Google API.  Now, when you click on each Address, you will notice it changes the map image to the corresponding location.

Now you can also Add a ‘Back’ button the screen, a well as add a new Button on the home screen so that users can Navigate to the Locations screen.  Users now have a way to view the locations of all of the restaurants!

I hope you’re enjoyed this series, and have found useful tips for getting more out of PowerApps. If you’re interested in learning more about PowerApps, SharePoint Online, or Office 365, please feel free to reach out to me at joseph.karnes@centricconsulting.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: