Articles about European Sharepoint Hosting Service
SharePoint 2013 Hosting UK – HostForLIFE.eu :: Color Formatting Of A SharePoint Online List Using JSON
Here, we are going to see how to perform conditional formatting using JSON in a SharePoint online list. Nowadays, many people are seeking for a code to format the SharePoint list to make it more attractive to the end users.
In this way, I just tried to format my list items with some color code and here is my code by which the background color will get changed based on the item values.
Here, I have created one list with one column called colors and I have entered some color name, so based on the color name, it will change the background color.
Here is the JSON code to change the background color and text color as well. You can just copy and paste it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
{ "elmType": "div", "txtContent": "@currentField", "style": { "color": "#fff", "padding-left": "14px", "background-color": { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Green" ] }, "#2ECC71", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Red" ] }, "#E74C3C", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Yellow" ] }, "#F1C40F", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Purple" ] }, "#76448A", "" ] } ] } ] } ] } } } |
You can add the JSON code in that particular column in two ways,
- Navigate to list setting -> column -> then add JSON code
- You can click the title of column in list view itself then column setting and format this column and JSON code editor will open on the right of the screen
And the final view of the list would be like below.
Print article | This entry was posted by Peter on September 18, 2018 at 5:40 am, and is filed under European SharePoint Server 2013 Hosting. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |