Functional Flair: adding Pictures to a SharePoint List

Written by Stephen Wilson | May 05, 2021

The List you need to use this JSON formatting as-is

To achieve the same results as our posted video, you need a list with at least the 3 following columns:

Title of the type “Single line of text”

URL of the type “Hyperlink or Picture”

Icon of the type “Choice”

How to add the choices and JSON formatting

We are using the older SharePoint list settings because it is easier to paste all the require options into one place.

Click the gear Icon in the upper right-hand corner and choose List Settings

Choose the Icon column

Paste the following items into the Choice option window for the Icon column.

Internet

Idea

Link

Word Document

Excel Document

PowerPoint

File Library

PDF

News

To do

Event

Data

People

Libraries

Copy one of the two following block of JSON text into the Column Formatting window

If you want JUST Icon to show in the column like this:

Paste in this JSON text and click OK at the bottom of the page.

{

"$schema": https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json,

"elmType": "div",

"attributes": {

"iconName": "=if(@currentField =='Internet', 'Globe', if(@currentField =='Idea', 'lightbulb', if(@currentField =='Link', 'link',if(@currentField =='Word Document', 'worddocument',if(@currentField =='Excel Document', 'exceldocument',if(@currentField =='PowerPoint', 'powerpointdocument',if(@currentField =='File Library', 'doclibrary',if(@currentField =='PDF', 'pdf',if(@currentField =='News', 'news',if(@currentField =='To do', 'eventtodologo',if(@currentField =='Event', 'calendar',if(@currentField =='Data', 'exploredata',if(@currentField =='People', 'people', if(@currentField =='Libraries', 'Library', if(@currentField =='Search', 'search', if(@currentField =='Form Processing', 'FormProcessing', @currentField))",

"class": "ms-fontColor-black ms-fontSize-xxl "

}

If you want the Icon and the text you entered in the field to show like this:

Paste in this JSON text and click OK at the bottom of the page.

{

"$schema": https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json,

"elmType": "div",

"attributes": {

"class": "ms-fontColor-black ms-fontSize-xxl "

"children": [

{

"elmType": "div",

"attributes": {

"class": "ms-fontSize-s"

"style": {

"margin": "5px 0px 5px 10px",

"font-family": "sans-serif"

"txtContent": "@currentField"

}

]

}

View full post