1

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 : Image of what I have done first

What I would like to do : What I would like to do

Thanks

Improve this question
2
  • 2
    Yes, this is possible using JSON Formatting capabilities. You can show images using img element type. You can show SVG as well. Commented Nov 17, 2021 at 15:04
  • 1
    There are examples of everything you'd like available here: github.com/pnp/list-formatting Commented Nov 17, 2021 at 15:55

2 Answers 2

Reset to default
0

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]

enter image description here

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')))))" } } ] }

enter image description here

enter image description here

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.

enter image description here

Improve this answer
0

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"): enter image description here

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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.