JSON Formatting : How to display image and trending based on choice column

Question

I tried to do some stuff using Sharepoint's documentation on JSON formatting. The problem is that, I don't really like the templates, and I would like to come up with something more visual. Like for example, instead of showing small icon on colored background, I would like to show sun, cloud, rain, thunderstorm, snow depending on the column value. If the state of the column is changing, like a number column, I would also like to display whether it is changing or not. Is it possible to do all of this? You can see a representation of what I would like to reproduce in the second image.

Image of what I have done first :

What I would like to do :

Thanks

Answer 1

Please follow the steps:

1.Navigation to the list as a site admin

2.Create the below Choice columns in the list

• [Etat du projet]
• [Etat du budget]
• [Etat du planning]
• [Etat du perimetre]

3.Use the below JSON formatting for each Choice column

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
         "position": "relative", 
         "top ": "50%", 
         "left": "50%", 
         "width": "48px", 
         "height": "auto", 
         "margin-left": "-50%", 
         "margin-top": "0%" 
      },
      "attributes": {
        "src": "=if(@currentField == 'Beau', 'https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/sun.jpg', if(@currentField  == 'Orageux', 'https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/thunderstorm.jpg', if(@currentField == 'Pluvieux', 'https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/rain.jpg', if(@currentField == 'Gel', 'https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/snow.jpg',if(@currentField == 'Nuageux','https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/cloud.jpg','https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/na.jpg')))))"
      }
    } 
  ]
}

Note:

• You have to upload your images to Site Assets library(or somewhere else on your site) and replace the image URL with your own.

Answer 2

You can use the FabricUI icons which are available here: https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

Find the name of the icon you want (e.g. "sunny" or "rain"):

Then include an iconName attribute to specify the name e.g.

"attributes": {
  "iconName": "sunny"
}

Then use an IF statement. The following example assumes you have a column called "Weather":

"elmType": "div",
"attributes": {
  "iconName": "=if([$Weather] == 'Sunny', 'sunny', if([$Weather] == 'Rainy', 'rain', ''))"
},

So if the column "Weather" contains a text value of "Sunny" then the sunny icon will be displayed. If "Weather" contains a text value of "Rainy" then the rain icon will be displayed.

NOTE: These icons won't display in button elements.