Skip to main content

SharePoint JSON Class, Icon, font attributes, border, background colour for Formatting column or view on SharePoint List

Microsoft SharePoint has a list of standard colour to be use. It created a standard class for the font, border and background. You can feel the colour and size below:

a) fluent-ui-core-color

b) Modern Class


You can also add icon into your JSON 

a) Microsoft Fluent Icon


With this list, you can easily plug into your json and start format your list view and column view.



You can also add --hover to each of the class. When mouse hover over, it will change to the class you specify with --hover.



How to format Column for SharePoint List


1. First, go to your listing --> right click your field --> Go to Column Settings --> Format this Column


2. Select Format Columns Tab. Make sure the Column is the field that you wanted to format --> Then click "Advance mode" and number 3 screen will appear.





3. Paste below JSON code to the box no3:




How to write JSON code to format Column for SharePoint List


1. Example of Formatting title background to Red and change text to a link


I get the colour class from Modern class Link above:

You can replace this format to your field name:
[$<fieldname>]

I set it as Title field name.

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"txtContent": "[$Title]",
"attributes": {
"target": "_blank",
"href": "[$Title]",
"class":"ms-bgColor-red"
}
}



2. Example of Formatting title background to Red when mouse hover over and change text to a link


{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"txtContent": "[$Title]",
"attributes": {
"target": "_blank",
"href": "[$Title]",
"class":"ms-bgColor-red--hover"
}
}


3. Example of Formatting title background is green and when mouse hover over it will change the background to Red
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"txtContent": "[$Title]",
"attributes": {
"target": "_blank",
"href": "[$Link]",
"class":"ms-bgColor-green ms-bgColor-red--hover"
},
"style": {
"color": "orange"
}
}

Comments

Post a Comment

Popular posts from this blog

SharePoint How to Change Quick Link Background Colour in Tiles

You can easily write css script using Modern Script Editor to change the Quick Link Background Colour, Font Colour, border style and more. Here, i would give you a guide to change the Background colour and Border-radius. Add a Quick Link and change the Layout options to "Tiles". Add the links to your Quick Links and it will show in box but all in same colour which is your Theme colour. Add a Modern Script Editor on top of the Quick Links: Enter the Code: <style type="text/css"> a[aria-label="Link A.  "] {         background-color: #FF91A4 !important;     } a[aria-label="Link B.  "] {         background-color: #83C760 !important;     } a[aria-label="Link C.  "] {         background-color: #66B032 !important;     } a[aria-label="Link D.  "] {         background-color: #4EA217 !important;     } </script> Then Click "Save" and "Publish". You...
Post a Comment
Read more

SharePoint: How to find aria-label value of the QuickLink Box?

  When we need to customise the Quick link box, we need to find what is the Aria-Label value. Right click on the Quick link icon and select "inspect" A list of code will be shown: Find the Aria-label attribute and copy the value. The value of Link D is "Link D.." Note: When you change the icon using image and icon, the format of the value is different. So, do not assume but try to look for the value here. There will not be any error message if you put the wrong label name or code into the Modern Script Editor.
Post a Comment
Read more