MVP Article – SharePoint Column Formatting – Show Map in Rich Text Field

SharePoint team

If you haven’t taken a look at the new Column Formatting capabilities in modern SharePoint you are missing out.  I wrote a blog post a while back on how to use Column Formatting to manually execute a Flow. There are a lot of other similar examples out on Github which you can find here: https://github.com/SharePoint/sp-dev-list-formatting.

Use Case

I had a particular use case that I didn’t see an example for on GitHub.  I have a SharePoint List which contains a list of Office Locations.  In the list is a field called Address which is a multi-line of text field that contains the full address for the location.  I want to display the address text and a map of the location above it in my SharePoint view.

While there were some examples of transforming your entire list view and showing a map using Longitude and Latitude points, there were no examples showing how to only apply the formatting to a column with an address.  So if you have a similar need then this blog post is for you.

Column Formatting Basics

If you’ve used column formatting before you know that to apply it you can click the dropdown next to the column you want to format and select the “Format Column” option as seen in the screenshot below:

Figure 1 – Column Formatting Option Showing in Single Line of Text Field
Figure 1 – Column Formatting Option Showing in Single Line of Text Field

You might have noticed, however, that this option is missing for your Multi-line of Text fields as you see here:

Figure 2 – Column Formatting Option Missing in Multi-line of Text Field
Figure 2 – Column Formatting Option Missing in Multi-line of Text Field

This doesn’t mean that you can’t apply column formatting to Multi-line of Text fields, you just have to take some extra steps to apply it.

Getting the Map Set Up

Before we show how to apply Column Formatting to your multi-line of text field, we need to do some set up so that we can display the map on our list.

For the map functionality, I’m going to be utilizing the Bing Maps API.  I like Bing because it’s easy to setup and configure and it’s free to start using.  To use the API, you’ll need to create a Bing Maps account and get your API key.  You can do that by going to the Bing Maps site:  https://docs.microsoft.com/en-us/bingmaps

Applying the Column Formatting

To get into the screen to apply Column Formatting,  click the Gear and List Settings to get into the settings screen:

Figure 3 – List Settings
Figure 3 – List Settings

Next, find your multi-line of text field in the list of columns and select it:

Figure 4 – SharePoint List Columns
Figure 4 – SharePoint List Columns

Take a look at the column settings and make sure that your column is set to PLAIN TEXT.  Column Formatting will only work correctly on multi-line of text fields if they are set to plain text!

Figure 5 – Ensure Column Settings are Configured Correctly
Figure 5 – Ensure Column Settings are Configured Correctly

At the bottom of the screen, you’ll see a text box for Column Formatting.  Paste the following block of code into the text box.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
    "class": " ms-borderColor-neutralLighter",
    "src": "='https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/'+[$Address]+'?mapSize=280,215&key=[Insert Your Bing Map API Key Here]' "
  },
  "txtContent": "[$Address]" 
}

Make sure to input your Bing Maps API key where it says “insert here”.  If your column name is different than Address, replace the references of that to your column name.

Your screen should look like this after you’ve pasted in the code:

Figure 6 – Insert Code Block Here
Figure 6 – Insert Code Block Here

Click OK on this screen and navigate back to your list view to see the results!

The End Result

Figure 7 – Desired look

About the Author

April Dunnam is a Business Applications MVP and owner of ThriveFast.  She is a Process Automation Princess, SharePoint Siren, Karaoke Queen. A woman who codes, but teaches others to build apps and automation with zero code.  April is president of the Oklahoma PowerApps & Flow User Group and regularly speaks at events across the country.

April maintains a blog with SharePoint, PowerApps & Flow related topics that you can find at https://www.sharepointsiren.com.  You can follow her on twitter https://twitter.com/aprildunnam and find her on GitHub at https://github.com/aprildunnam

 

What is the MVP article series?

We have opened up our SharePoint developer blog also for the Microsoft MVPs who would like to share their articles around SharePoint development topics also through this channel. All articles written by MVPs are clearly indicated by using the “MVP article” prefix in the title of the blog post. If you are an MVP and would like to get some additional exposure, please send your suggestions around the article to spdevblogcommunity@microsoft.com email address and we can start a discussion on the suggestion and possible publishing schedule.

You can absolutely also do cross-posting of the article through your own blog, but we would prefer the material which is submitted as a suggestion, to be fresh and new, rather than something which has been released months ago. We will use both SharePoint and OfficeDev social media channels to promote these articles, so it’s a nice way to get you additional exposure for the community around the work you do.

 


SharePoint Team, Microsoft – 14th of February 2019

Feedback usabilla icon