Learn how to show different icons, and be introduced to CustomCardProps
In an earlier post I described how you could power up your SharePoint list by adding an icon to your list.
Here I will give you an example of how you can add different icons depending on what choice the user has selected.
The code
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"margin": "3px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondary ms-fontColor-neutralDark--hover ms-font-m"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if(@currentField == 'A', 'Archive', if(@currentField == 'B', 'ReminderTime', if(@currentField == 'C', 'People','People')))",
"class": "ms-font-l"
},
"style": {
"display": "=if(Number(@currentField) == 0, 'none', 'inline')"
}
},
{
"elmType": "span",
"txtContent": "@currentField",
"style": {
"margin-left": "6px"
}
}
]
}
]
}
When you are adding icons to a choice list, it also requires a bit more maintenance, because every time you add a new choice, you also have to consider adding a new icon. There is a “fall back” icon (People), so there will always be an icon
When you are adding an extra icon, remember to also place an ) in the end of code, here is an example with an extra icon
"iconName": "=if(@currentField == 'A', 'Archive', if(@currentField == 'B', 'ReminderTime', if(@currentField == 'C', '6PointStar', if(@currentField == 'D', 'AddTo','People'))))"
You can find all available icons on this page
Add an explanation to the choice
We can add a CustomCardprops to the code, to help the user a bit more.
An example could be confidentiality - so if the choice is “Confidential”, the user can hover over the choice and read more about what “that means”
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"margin": "3px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondary ms-fontColor-neutralDark--hover ms-font-m"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if(@currentField == 'AAAAAAA', 'Family', if(@currentField == 'B', 'PeopleAlert', if(@currentField == 'C', 'ReportWarning', if(@currentField == 'D', 'Warning', 'QandA'))))",
"class": "ms-font-l"
}
},
{
"elmType": "span",
"txtContent": "@currentField",
"style": {
"margin-left": "4px"
},
"customCardProps": {
"openOnEvent": "hover",
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"padding": "15px 45px 15px 15px"
},
"children": [
{
"elmType": "div",
"style": {
"margin-bottom": "10px"
},
"children": [
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "bold",
"text-align": "left"
},
"txtContent": "=if(@currentField == 'AAAAAAA', 'AAAAAAA TITLE', if(@currentField == 'B', 'B TITLE', if(@currentField == 'C', 'C TITLE', if(@currentField == 'D', 'D TITLE' 'Confidentiality'))))"
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"font-weight": "350",
"text-align": "left",
"margin-top": "10px"
},
"txtContent": "=if(@currentField == 'AAAAAAA', 'AAAAAAA TEXT', if(@currentField == 'B', 'B TEXT', if(@currentField == 'C', 'C TEXT', if(@currentField == 'D', 'D TEXT', ''))))"
}
]
}
]
}
]
},
"directionalHint": "bottomCenter",
"isBeakVisible": true,
"openOnEvent": "hover"
"beakStyle": {
"backgroundColor": "white"
}
}
}
]
}
]
}
Again this code requires you to update it if new choices is added to the column.
You need to update the code in 3 places (marked in bold)
First is the Icon, second is the Title of the CustomCardProps and the Third is the detailed text
The CustomCardProps does also have a few options, which we can change.
directionalHint decides how the card is shown, and there is quite a lot of options here
bottomLeftEdge
bottomCenter
bottomRightEdge
leftTopEdge
leftCenter
leftBottomEdge
rightTopEdge
rightCenter
rightBottomEdge
topLeftEdge
topCenter
topRightEdge
isBeakVisible is the small “triangle”, and it can be set to false. It can sometimes be used if you are creating an “if” statement - if the card should be visible or not (since the beak will always be shown)
openOnEvent can be changed to click so that the card is only shown if the user click on the text.
The CustomCardProps is very powerful and can be used in other cases. For example we can use it to show a thumbnail of an image or file, but we will cover that in another post.