In Parts 1, 2, 3, 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:
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:
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:
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:
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.
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:
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 email@example.com