Category Archives: PowerApps

Maps in PowerApps

This post outlines how to render address information on a map using PowerApps.  We will utilize SharePoint Online as the data source. However, keep in mind that you could opt for other (growing number of) sources, e.g.: Salesforce, Dynamics CRM Online, etc.

Quick Disclaimer –  At the time of writing this post, PowerApps is in Public Preview, so PowerApps’ features and accuracy of this post are subject to change.

Prep Work:

  1. Find a REST service to render your map. For this post, we’ll leverage Bing Maps:
    • Documentation and Requirements:
    • There are tons of options you could explore with Bings. To keep it simple and use plain address fields, let’s use this service:
      https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/
      [YourAddressSpaceDelimited]?key=[YourBingMapKey]
    • Confirm your REST endpoint by going to the URL using a web browser
  2. Get the data source ready
    • Since SharePoint Online serves the underlying data for this example, I have created a plain-vanilla-custom-list, then added out-of-box address-related site columns.
    • Record the internal field names for all of your Address Fields

Steps in PowerApps Studio

  1. Open PowerApps Studio (currently available only for Windows 10 & 8.1)
  2. Create a New app and connect to your data source
  3. If you have connected to the data source correctly, some of your content should surface immediately
  4. Click on DetailScreen1 on left navigation pane, to display a single record view
  5. Click “Add a custom card” in the form design
  6. Select the Insert Tab then click on “Image”
  7. At this point, you should see the landscape icon in your Form.  If so, we will now construct our Bing Map onto this image.
  8. Go to the function (fx) text box to replace “SampleImage” with the REST Endpoint URL combined with the SharePoint internal field names, using the PowerApps Concatenate function.
  9. If you have done it correctly, the map should render almost instantly in Design mode.  A few additional notes:
    • Since this REST method separates the address with space, we are constructing a ” ” in our formula
    • PowerApps auto-populates field names in the function text box so you could easily confirm if you have the correct SharePoint internal field names

And there you have it! Hopefully straightforward.  Please leave comments with your thoughts and feedback.

Very much looking forward to the exciting things coming out of the labs of the MS Product Team and the magic our community creates out of this very promising product.

Advertisements