In this series of blogs, we explore the key capabilities in Office 365 and SharePoint to create business solutions, with a primary focus on PowerApps.
Instead of listing the functionalities, we help you build a PowerApp.
Part five of a series. 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.Using an External API
To do this, we will use 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 two of this series. This new screen will be named ‘Locations.’ Change the layout to match the 'Edit' screen.
We will be adding two controls to this screen, a 'Vertical Gallery,' and an 'Image.' Position both of the controls as shown below:
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 this 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.
You can also add a ‘Back’ button the screen, a well as adding 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!
Next, we will need to add a new screen as we did in part two of this series. This new screen will be named ‘Locations.’ Change the layout to match the 'Edit' screen.
We will be adding two controls to this screen, a 'Vertical Gallery,' and an 'Image.' Position both of the controls as shown below:
SharePoint and PowerApps
For the gallery, we will want to connect it to the locations list in SharePoint. Add ‘Locations’ as a data source, as outlined in part one, 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.
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 this 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.
You can also add a ‘Back’ button the screen, a well as adding 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've enjoyed this series, and found some useful tips for getting more out of PowerApps. If you’re interested in learning more about PowerApps, SharePoint Online, or Office 365, I'm happy to help.
