{"id":2518,"date":"2019-02-14T11:02:04","date_gmt":"2019-02-14T19:02:04","guid":{"rendered":"https:\/\/developer.microsoft.com\/en-us\/office\/blogs\/?p=2518"},"modified":"2021-10-18T11:17:19","modified_gmt":"2021-10-18T18:17:19","slug":"mvp-article-sharepoint-column-formatting-show-map-in-rich-text-field","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/mvp-article-sharepoint-column-formatting-show-map-in-rich-text-field\/","title":{"rendered":"MVP Article – SharePoint Column Formatting \u2013 Show Map in Rich Text Field"},"content":{"rendered":"

If you haven\u2019t taken a look at the new Column Formatting capabilities in modern SharePoint you are missing out.\u00a0 I wrote a blog post a while back on how to\u00a0use Column Formatting to manually execute a Flow<\/a>. There are a lot of other similar examples out on Github which you can find here:\u00a0https:\/\/github.com\/SharePoint\/sp-dev-list-formatting.<\/a><\/p>\n

Use Case<\/h2>\n

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

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.\u00a0 So if you have a similar need then this blog post is for you.<\/p>\n

Column Formatting Basics<\/h2>\n

If you\u2019ve 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 \u201cFormat Column\u201d option as seen in the screenshot below:<\/p>\n

\"Figure
Figure 1 \u2013 Column Formatting Option Showing in Single Line of Text Field<\/figcaption><\/figure><\/p>\n

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

\"Figure
Figure 2 \u2013 Column Formatting Option Missing in Multi-line of Text Field<\/figcaption><\/figure><\/p>\n

This doesn\u2019t mean that you can\u2019t apply column formatting to Multi-line of Text fields, you just have to take some extra steps to apply it.<\/p>\n

Getting the Map Set Up<\/h2>\n

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

For the map functionality, I\u2019m going to be utilizing the Bing Maps API.\u00a0 I like Bing because it\u2019s easy to setup and configure and it\u2019s free to start using.\u00a0 To use the API, you\u2019ll need to create a Bing Maps account and get your API key.\u00a0 You can do that by going to the Bing Maps site:\u00a0\u00a0https:\/\/docs.microsoft.com\/en-us\/bingmaps<\/a><\/p>\n

Applying the Column Formatting<\/h2>\n

To get into the screen to apply Column Formatting,\u00a0 click the Gear and List Settings to get into the settings screen:<\/p>\n

\"Figure
Figure 3 \u2013 List Settings<\/figcaption><\/figure><\/p>\n

Next, find your multi-line of text field in the list of columns and select it:<\/p>\n

\"Figure
Figure 4 \u2013 SharePoint List Columns<\/figcaption><\/figure><\/p>\n

Take a look at the column settings and make sure that your column is set to PLAIN TEXT.\u00a0\u00a0Column Formatting will only work correctly on multi-line of text fields if they are set to plain text!<\/em><\/strong><\/p>\n

\"Figure
Figure 5 \u2013 Ensure Column Settings are Configured Correctly<\/figcaption><\/figure><\/p>\n

At the bottom of the screen, you\u2019ll see a text box for Column Formatting.\u00a0 Paste the following block of code into the text box.<\/p>\n

<\/p>\n

\n
{\n  \"$schema\": \"https:\/\/developer.microsoft.com\/json-schemas\/sp\/column-formatting.schema.json\"<\/span>,\n  \"elmType\": \"img\"<\/span>,\n  \"attributes\": {\n    \"class\": \" ms-borderColor-neutralLighter\"<\/span>,\n    \"src\": \"='https:\/\/dev.virtualearth.net\/REST\/v1\/Imagery\/Map\/Road\/'+[$Address]+'?mapSize=280,215&key=[Insert Your Bing Map API Key Here]' \"<\/span>\n  },\n  \"txtContent\": \"[$Address]\"<\/span> \n}\n<\/pre>\n<\/div>\n
Make sure to input your Bing Maps API key where it says \u201cinsert here<\/em>\u201d.\u00a0 If your column name is different than Address, replace the references of that to your column name.<\/p>\n
Your screen should look like this after you\u2019ve pasted in the code:<\/p>\n
\"Figure
Figure 6 \u2013 Insert Code Block Here<\/figcaption><\/figure><\/p>\n
Click OK on this screen and navigate back to your list view to see the results!<\/p>\n
The End Result<\/h2>\n
\"\"
Figure 7 \u2013 Desired look<\/figcaption><\/figure><\/p>\n
About the Author<\/h2>\n
\"\"<\/p>\n
April Dunnam<\/a> is a Business Applications MVP and owner of ThriveFast<\/a>.\u00a0 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.\u00a0 April is president of the Oklahoma PowerApps & Flow User Group and regularly speaks at events across the country.<\/p>\n
April maintains a blog with SharePoint, PowerApps & Flow related topics that you can find at https:\/\/www.sharepointsiren.com<\/a>.\u00a0 You can follow her on twitter https:\/\/twitter.com\/aprildunnam<\/a> and find her on GitHub at https:\/\/github.com\/aprildunnam<\/a><\/p>\n
 <\/p>\n
What is the MVP article series?<\/h2>\n
We have opened up our SharePoint developer blog<\/a> 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<\/em><\/a>\u00a0email address and we can start a discussion on the suggestion and possible publishing schedule.<\/p>\n
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\u00a0has been released months ago. We will use both SharePoint<\/em><\/a> and OfficeDev<\/a><\/em> 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.<\/p>\n
 <\/p>\n
\n
SharePoint Team, Microsoft – 14th of February 2019<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"
MVP Article – Step by step guidance on how to show a map based on location information in SharePoint lists with a no-code approach using just SharePoint Column Formatting capability. <\/p>\n","protected":false},"author":69078,"featured_media":2541,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[78],"class_list":["post-2518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-developer","tag-data-visualizations"],"acf":[],"blog_post_summary":"
MVP Article – Step by step guidance on how to show a map based on location information in SharePoint lists with a no-code approach using just SharePoint Column Formatting capability. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/2518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69078"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=2518"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/2518\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/2541"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=2518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=2518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=2518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}