{"id":13387,"date":"2016-12-01T00:00:00","date_gmt":"2016-12-01T06:00:00","guid":{"rendered":"https:\/\/centricconsulting.com\/post\/office-365-powerapps-deepish-dive-part-5\/"},"modified":"2021-12-15T00:13:27","modified_gmt":"2021-12-15T05:13:27","slug":"office-365-powerapps-deepish-dive-part-5","status":"publish","type":"post","link":"https:\/\/centricconsulting.com\/blog\/office-365-powerapps-deepish-dive-part-5\/","title":{"rendered":"Office 365 PowerApps Deep(ish) Dive \u2013 Part 5"},"content":{"rendered":"

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.<\/h2>\n

Instead of listing the functionalities, we help you build a PowerApp.<\/p>\n

Part five of a series<\/a>.<\/em><\/p>\n

In Parts 1<\/a>, 2<\/a>,\u00a03<\/a>, and 4<\/a> 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.<\/p>\n

Using an External API<\/h2>\n
\n
\n

To do this, we will use\u00a0the 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<\/a>.<\/p>\n

Make a note of the API key, as we will need it later on.<\/p>\n

On the SharePoint site, you will need to create a new list called \u2018Locations.’ \u00a0The columns will correspond to each element of a street address as shown here. Once created, populate the list with some sample addresses:<\/p>\n

\"SharePoint\"<\/p>\n

Next, we will need to\u00a0add a new screen as we did in part two<\/a>\u00a0of this series. This new screen will be named \u2018Locations.\u2019 Change the layout to match the ‘Edit’ screen.<\/p>\n

We will be adding two controls to this screen, a ‘Vertical Gallery,’ and an ‘Image.’ \u00a0Position both of the controls as shown below:<\/p>\n

\"padd5-1\"<\/p>\n

SharePoint and PowerApps<\/h2>\n

For the gallery, we will want to connect it to the locations list in SharePoint. Add \u2018Locations\u2019 as a data source, as outlined in part one<\/a>, and then change the ‘Items Property’ of the ‘Gallery’ in the ‘Formula’ bar to:\u00a0Locations_1<\/strong><\/p>\n

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.<\/p>\n

\"padd5-2\"<\/p>\n

The next step will be to connect the \u2018Image\u2019 property of the image control to the gallery. \u00a0The URL that Google uses for its API separates\u00a0each element of the address with a \u2018+\u2019 sign, so we will use Concatenate<\/strong> to construct this string:\"PowerApps\"<\/a><\/p>\n

\"PowerApps\"<\/p>\n

Change the YOURKEYHERE<\/strong>\u00a0in the formula to the API key you signed up for with the Google API. \u00a0Now, when you click on each address, you will notice it changes the map image to the corresponding location.<\/p>\n

You can\u00a0also add a \u2018Back\u2019 button the screen, a well as adding a new button on the home screen so that users can navigate to the locations\u00a0screen. Users now have a way to view the locations of all of the restaurants!<\/p>\n

\n

I hope you’ve enjoyed this series, and found some useful tips for getting more out of PowerApps. If you\u2019re interested in learning more about PowerApps, SharePoint Online, or Office 365<\/strong>, I’m happy to help.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Part five of the series on getting the most out of Microsoft Office 365 PowerApps explores using External APIs on your SharePoint site.<\/p>\n","protected":false},"author":86,"featured_media":22939,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_oasis_is_in_workflow":0,"_oasis_original":0,"_oasis_task_priority":"","_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","footnotes":""},"categories":[1],"tags":[],"coauthors":[],"acf":[],"publishpress_future_action":{"enabled":false,"date":"2024-07-21 19:20:22","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category"},"_links":{"self":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts\/13387"}],"collection":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/comments?post=13387"}],"version-history":[{"count":0,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts\/13387\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/media\/22939"}],"wp:attachment":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/media?parent=13387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/categories?post=13387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/tags?post=13387"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/coauthors?post=13387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}