Requirement: Add icons to the choice columns using JSON code
Create a SharePoint list as shown in below:
- Name: Single line text column
- Class: Number column
- Performance: Choice column [“Excellent”,”Good”,”Average”,”Bad”]
- Grade: Choice column [“Grade A”,”Grade B”,”Grade C”,”Grade D”]
- RollNo: Number column
Add items to the sharepoint list “Student Details”
Next go to the setting in that select List settings, select the choice column, at the bottom of the page format the JSON code as shown in below:
{
"$schema": "https://rishansolutions.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"attributes": {
"class": "=if(@currentField == 'Excellent', 'sp-field-severity--good', if(@currentField == 'Good', 'sp-field-severity--low', if(@currentField == 'Average', 'sp-field-severity--severewarning', if(@currentField == 'Bad','sp-field-severity-severeblocked', 'sp-field-severity--blocked')))) + ' ms-fontColor-black'"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == 'Excellent', 'CheckMark', if(@currentField == 'Good', 'Forward', if(@currentField == 'Average', 'Warning', if(@currentField == 'Bad', 'Error','ErrorBadge'))))"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
This JSON Code is for “Performance” choice column
{
"$schema": "https://rishansolution.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"attributes": {
"class": "=if(@currentField == 'Grade A', 'sp-field-severity--good', if(@currentField == 'Grade B', 'sp-field-severity--low', if(@currentField == 'Grade C', 'sp-field-severity--warning', if(@currentField == 'Grade D', 'sp-field-severity--severeError', 'sp-field-severity--blocked')))) + ' ms-fontColor-Black'"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == 'Grade A', 'CheckMark', if(@currentField == 'Grade B', 'Forward', if(@currentField == 'Grade C', 'Warning', if(@currentField == 'Grade D', 'Error', 'ErrorBadge'))))"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
This JSON code is for “Grade” column