Introduction
Resources
EASY ⭐
Choice BG Colors
Inline Edit
MODERATE ⭐⭐
Date Highlighting
Library Thumbnail
Row Formatting
Toggle Button
CHALLENGING ⭐⭐⭐
Date Input
Hyperlink Button
Star Rating
View / Edit Button

Introduction and Prerequisites

Check here first before you begin.

» read more

You should know:

HTML (Training: W3 Schools HTML Training)
CSS (Training: W3 Schools CSS Training)
SharePoint lists (Training: Creating Modern Lists and Views in SharePoint)

You should also know:

Before you get started, create your own practice SharePoint site. This is your own dedicated site where you will create and update lists used in training. In each training module, you will make updates to SharePoint lists, write JSON code, then apply it to lists.

All code will work with SharePoint Online and SharePoint Server Subscription (2022+). SharePoint 2019 and ealier is not supported.

Resources

Get the most out of JSON coding use these resources.

» read more

Choice Background Colors

Apply background colors to a choice field according to value.

Fields:

Choice (Values: Not Started, In Progress, On Hold, Canceled, Complete)

Instructions

This template will produce this HTML structure:


  FIELD CONTENT

1. Begin with column formatting schema:

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div"
}

copy to editor

2. Add a child div:

Add a child div.
Set the txtContent property using the @currentField token.
Add a style node with the margin property set to auto.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",      
      "txtContent": "@currentField",
      "style": {
        "margin": "auto"
      }
    }
  ]
}

copy to editor

3. Use if condition checks to set the background color:

Add a style node to the parent div.
Set the background-color property using a series of if conditions.
Check the value of the field using the @currentField token.
Use an if condition for each of the possible values in the choice field.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(@currentField == 'Not Started','cyan','') + if(@currentField == 'In Progress','orange','') + if(@currentField == 'On Hold','pink','') + if(@currentField == 'Canceled','LightGray','') + if(@currentField == 'Complete','lime','')" 
  },
  "children": [
    {
      "elmType": "div",      
      "txtContent": "@currentField",
      "style": {
        "margin": "auto"
      }
    }
  ]
}

copy to editor

4. Apply additional styles to the parent div:

In the parent div add style attributes.
Set color to black.
Set font-size to 20px.
Set font-family to arial.
Set border to 1px solid black.
Set border-radius to 7px.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(@currentField == 'Not Started','cyan','') + if(@currentField == 'In Progress','orange','') + if(@currentField == 'On Hold','pink','') + if(@currentField == 'Canceled','LightGray','') + if(@currentField == 'Complete','lime','')", 
    "color": "black",
    "font-size": "20px",
    "font-family": "arial",
    "border": "1px solid black",
    "border-radius": "7px"
  },
  "children": [
    {
      "elmType": "div",      
      "txtContent": "@currentField",
      "style": {
        "margin": "auto"
      }
    }
  ]
}

copy to editor

Apply the code to your field.
Try adjusting colors and font.
Try adjusting the border.
See a live preview using the link below.

live preview

Inline Edit

Enable inline editing for a specific field.

Fields:

Text, Number, Date, Choice, Person or Lookup

Instructions

This template will produce this HTML structure:

FIELD CONTENT

1. Begin with column formatting schema:

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div"
}

copy to editor

2. Add attributes:

Set the inlineEditField property to the token @currentField.
Set the txtContent property to the token @currentField.
If this is a person field set the txtContent property to the token @currentField.title.
If this is a lookup field set the txtContent property to the token @currentField.lookupValue.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "inlineEditField": "@currentField",
  "txtContent": "@currentField"
}

copy to editor

3. Add styles:

Set the display to flex.
Set the width to 98%.
Add a style for border of 1px solid transparent.
Add the special --inline-editor-border-color style set to LimeGreen.
Set the cursor style to pointer.
Set the padding to 11px 0px 11px 2px.
Set the left margin to 0px.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "inlineEditField": "@currentField",
  "txtContent": "@currentField",
  "style": {
    "display": "flex",
    "width": "98%",
    "border": "1px solid transparent",
    "--inline-editor-border-color": "LimeGreen",
    "cursor": "pointer",
    "padding": "11px 0px 11px 2px",
    "margin-left": "0px"
  }
}

copy to editor

Apply the code to your field.
Try adjusting the hover color.
Try adjusting the padding.
See a live preview using the link below.

live preview

Date Highlighting

Apply background colors to a date field according to whether date is future, past or today.

Fields:

Date

Instructions

This template will produce this HTML structure:


  FIELD CONTENT

1. Begin with column formatting schema:

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div"
}

copy to editor

2. Add a child div:

Add a child div.
Set the txtContent property using the @currentField token.
Add a style node with the margin property set to auto.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",      
      "txtContent": "@currentField",
      "style": {
        "margin": "auto"
      }
    }
  ]
}

copy to editor

3. Compare the date and change the background color accordingly:

Compare the date values using the @now token and the @currentField token.
Use the toDateString function to get the just the date value for comparison.
Use a nested if condition to check for 3 possible states.
@currentField may be before @now, after or equal if same day.
Add a style node with a background-color attribute with the required checks.
Set one of three different colors according to date comparison.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(toDateString(@now) == toDateString(@currentField),'LightYellow',if(@currentField < @now,'LavenderBlush','Lime'))"
  },
  "children": [
    {
      "elmType": "div",      
      "txtContent": "@currentField",
      "style": {
        "margin": "auto"
      }
    }
  ]
}

copy to editor

4. Add additional styles to the parent div:

Add additional styles to the parent div.
Set the color to black.
Set the font-size to 14px.
Set the font-family to arial.
Set the border to 1px solid black.
Set the border-radius to 7px.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(toDateString(@now) == toDateString(@currentField),'LightYellow',if(@currentField < @now,'LavenderBlush','Lime'))",  
    "color": "black",
    "font-size": "14px",
    "font-family": "arial",
    "border": "1px solid Black",
    "border-radius": "7px"
  },
  "children": [
    {
      "elmType": "div",      
      "txtContent": "@currentField",
      "style": {
        "margin": "auto"
      }
    }
  ]
}

copy to editor

5. Hide the output if there is no date:

Use an if condition in the display property to hide the div if no value.
Set display to flex if there is a value or none if there is no value.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(toDateString(@now) == toDateString(@currentField),'LightYellow',if(@currentField < @now,'LavenderBlush','Lime'))",  
    "color": "black",
    "font-size": "14px",
    "font-family": "arial",
    "border": "1px solid Black",
    "border-radius": "7px",
    "display": "=if(@currentField,'flex','none')"
  },
  "children": [
    {
      "elmType": "div",      
      "txtContent": "@currentField",
      "style": {
        "margin": "auto"
      }
    }
  ]
}

copy to editor

Apply the code to your field.
Try adjusting colors and font.
Try adjusting the border.
See a live preview using the link below.

live preview

Library Thumbnail

Display a thumbnail preview image for files in a library. Opens file on click.

Fields:

Placeholder Field

Instructions

This template will produce this HTML structure:

1. Begin with column formatting schema:

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div"
}

copy to editor

2. Add a child button with an image inside:

Add a child button element.
Add an image element inside the button.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "children": [
        {
          "elmType": "img"
        }
      ]
    }
  ]
}

copy to editor

3. Add image source attribute and styling:

Add an image src attribute using the token @thumbnail.100.
Add image style properties.
Set display to inline-block.
Set height to 100%.
Set vertical-align to middle.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "@thumbnail.100"
          },
          "style": {
            "display": "inline-block",
            "height": "100%",
            "vertical-align": "middle"
          }
        }
      ]
    }
  ]
}

copy to editor

4. Add a click action to the button and give it a hover border:

Add a customRowAction to the button using the action property defaultClick.
Add an attributes node to the button and set the class attribute using ms color classes for ms-borderColor.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "customRowAction": {
        "action": "defaultClick"
      },
      "attributes": {
        "class": "ms-borderColor-black ms-borderColor-greenLight--hover"
      },	  
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "@thumbnail.100"
          },
          "style": {
            "display": "inline-block",
            "height": "100%",
            "vertical-align": "middle"
          }
        }
      ]
    }
  ]
}

copy to editor

5. Add styling to the button element:

Add styles to the button element.
Set overflow hidden.
Set cursor to pointer.
Set padding to 1px.
Set background-color to lightgray.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "customRowAction": {
        "action": "defaultClick"
      },
      "attributes": {
        "class": "ms-borderColor-black ms-borderColor-greenLight--hover"
      },
      "style": {
        "overflow": "hidden",
        "cursor": "pointer",
        "padding": "1px",
        "background-color": "lightgray"
      },	  
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "@thumbnail.100"
          },
          "style": {
            "display": "inline-block",
            "height": "100%",
            "vertical-align": "middle"
          }
        }
      ]
    }
  ]
}

copy to editor

Apply the code to your placeholder field.
Try adjusting the size.
Try adjusting the colors including background and border.
See a live preview using the link below.

live preview

Row Formatting

Adjust the background color, borders and font size styling for rows of data.

Fields:

Any field type

Instructions

1. Begin with view formatting schema:

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json"
}

copy to editor

2. Add additionalRowClass and adjust font size:

Add an additionalRowClass attribute.
Set the font size ranging from extra small to extra large using ms-font-mi, ms-font-xs, ms-font-m, ms-font-l, ms-font-xl or ms-font-xxl.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "ms-font-m"
}

copy to editor

3. Set the text color

Add a class ms-fontColor-[PICK COLOR] to set the text color.
Select from fontColor options here.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "ms-font-m ms-fontColor-black"
}

copy to editor

4. Set the selected row background color:

Use the @isSelected token to check if the row is selected.
Add the sp-css-backgroundColor-[PICK COLOR] using a color from row background colors.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "='ms-font-m ms-fontColor-black ' + if(@isSelected,'sp-css-backgroundColor-BgGold','')"
}

copy to editor

5. Set the row background color and alternating row background color:

Use the @rowIndex token to detect whether it is an even or odd row.
Add a corresponding sp-css-backgroundColor-[PICK COLOR] for each using a color from row background colors.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "='ms-font-m ms-fontColor-black ' + if(@isSelected,'sp-css-backgroundColor-BgGold',if(@rowIndex % 2 == 0,'sp-css-backgroundColor-BgSage20','sp-css-backgroundColor-BgLightBlue')"
}

copy to editor

6. Set row border color and style:

Select from row border colors and add sp-css-borderBottomColor-[PICK COLOR]Text class.
Select from Solid, Dashed or Solid border style and use class sp-field-borderBottom[PICK STYLE].

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "='ms-font-m ms-fontColor-black ' + if(@isSelected,'sp-css-backgroundColor-BgGold',if(@rowIndex % 2 == 0,'sp-css-backgroundColor-BgSage20','sp-css-backgroundColor-BgLightBlue') + ' sp-css-borderBottomColor-DarkBlueText sp-fieldBorderBottomSolid'"
}

copy to editor

Apply the code to your view.
Try adjusting the font size.
Try adjusting the colors for font, background and borders.
See a live preview using the link below.

live preview

Toggle Button

Display a simple toggle button for use with a yes / no field.

Field:

Yes / No Field

Instructions

This template will produce this HTML structure:


  BACKGROUND TOGGLE ELEMENT
  FOREGROUND TOGGLE ELEMENT

1. Begin with column formatting schema:

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div"
}

copy to editor

2. Add div structure:

Set the display property on the outer div to flex.
Add two child divs.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex"
  },
  "children": [
    {
      "elmType": "div"
    },
    {
      "elmType": "div"
    }
  ]
}

copy to editor

3. Add styles:

Add style nodes.
Set the font-size to 60px on both divs.
Make the cursor show as a pointer.
Use a negative margin of -60px on the second node to make it overlap the first node.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "font-size": "60px"
      }
    },
    {
      "elmType": "div",
      "style": {
        "cursor": "pointer",
        "font-size": "60px",
        "margin-left": "-60px"
      }
    }
  ]
}

copy to editor

4. Add a custom row action

Add a customRowAction node.
Add LINKaction and actionInput properties to this node.
Change the field to the inverse of its current value on click.
Be sure to insert your own field name for actionInput.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "font-size": "60px"
      }
    },
    {
      "elmType": "div",
      "style": {
        "cursor": "pointer",
        "font-size": "60px",
        "margin-left": "-60px"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "FIELD REQUIRED": "=if(@currentField,0,1)"
        }
      }
    }
  ]
}

copy to editor

5. Add attributes

Add attributes nodes on the two inner divs.
Set the iconName of the first div to "ToggleFilled".
Use if condition checks to evaluate field data using the @currentField token.
Set the iconName of the second div to "ToggleRight" if Yes and "ToggleLeft" if No.
Set the fontColor class on the 1st div to "greenLight" if Yes and "gray40" if No.
Set the fontColor class on the 2nd div to "green" if Yes and "gray120" if No.
Add a fontColor hover class on the 2nd div set to "yellow".

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex"
  },
  "children": [
    {
      "elmType": "div",
      "attributes": {
        "iconName": "ToggleFilled",
        "class": "=if(@currentField,'ms-fontColor-greenLight','ms-fontColor-gray40')"
      },	  
      "style": {
        "font-size": "60px"
      }
    },
    {
      "elmType": "div",
      "attributes": {
        "iconName": "=if(@currentField,'ToggleRight','ToggleLeft')",
        "class": "=if(@currentField,'ms-fontColor-green','ms-fontColor-gray120') + ' ms-fontColor-yellow--hover'"
      },	  
      "style": {
        "cursor": "pointer",
        "font-size": "60px",
        "margin-left": "-60px"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "FIELD REQUIRED": "=if(@currentField,0,1)"
        }
      }
    }
  ]
}

copy to editor

Apply your template to your Yes / No column.
Try adjusting colors and font size for different effects.
Get other color references using the "live preview" linked below.

live preview

Date Input

Display an interactive date input field which increment + / - buttons

Field:

Date Field

Instructions

This template will produce this HTML structure:


  
  DATE INPUT

1. Begin with column formatting schema:

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div"
}

copy to editor

2. Add a div element surrounded by two buttons:

Add a button, followed by a div, followed by a button inside the main div.
Set the txtContent property to "-" for the 1st button and "+" for the 2nd button.
Set the txtContent property of the inner div using the @currentField token.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "txtContent": "-"
    },
    {
      "elmType": "div",
      "txtContent": "@currentField"		
    },
    {
      "elmType": "button",
      "txtContent": "+"
    }		
  ]
}

copy to editor

3. Add button actions and enable inline edit:

Enable inlineEdit in the inner div referencing the @currentField token.
Add customRowAction attributes using the setValue action for both buttons.
For each button, specify the actionInput field name and use the addDays function.
Each button should update the field by adding or subtracting a day accordingly.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "txtContent": "-",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "DATE FIELD REQUIRED": "=addDays(@currentField,-1)"
        }
      }
    },
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "inlineEditField": "@currentField"		
    },
    {
      "elmType": "button",
      "txtContent": "+",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "DATE FIELD REQUIRED": "=addDays(@currentField,1)"
        }
      }
    }
  ]
}

copy to editor

4. Add class attributes to the buttons and add colors:

Add the class attribute to each button and choose from fontColor and bgColor classes for styling.
Apply a hover color to each button.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "txtContent": "-",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "DATE FIELD REQUIRED": "=addDays(@currentField,-1)"
        }
      },
      "attributes": {
        "class": "ms-bgColor-green ms-bgColor-greenLight--hover ms-fontColor-white ms-fontColor-black--hover"
      }
    },
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "inlineEditField": "@currentField"		
    },
    {
      "elmType": "button",
      "txtContent": "+",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "DATE FIELD REQUIRED": "=addDays(@currentField,1)"
        }
      },
      "attributes": {
        "class": "ms-bgColor-green ms-bgColor-greenLight--hover ms-fontColor-white ms-fontColor-black--hover"
      }
    }
  ]
}

copy to editor

5. Add styles to the buttons:

Add style attributes to both buttons using the same settings.
Set the cursor attribute to pointer.
Set the font-size to 16px.
Set the font-family to arial.
Set a 1px solid black border.
Set the height and width to 22px.
Set the border-radius to 7px.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "txtContent": "-",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "DATE FIELD REQUIRED": "=addDays(@currentField,-1)"
        }
      },
      "attributes": {
        "class": "ms-bgColor-green ms-bgColor-greenLight--hover ms-fontColor-white ms-fontColor-black--hover"
      },
      "style": {
        "cursor": "pointer",
        "font-size": "16px",
        "font-family": "arial",	
        "border": "1px solid Black",
        "width": "22px",
        "height": "22px",
        "border-radius": "7px"
      }
    },
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "inlineEditField": "@currentField"		
    },
    {
      "elmType": "button",
      "txtContent": "+",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "DATE FIELD REQUIRED": "=addDays(@currentField,1)"
        }
      },
      "attributes": {
        "class": "ms-bgColor-green ms-bgColor-greenLight--hover ms-fontColor-white ms-fontColor-black--hover"
      },
      "style": {
        "cursor": "pointer",
        "font-size": "16px",
        "font-family": "arial",	
        "border": "1px solid Black",
        "width": "22px",
        "height": "22px",
        "border-radius": "7px"
      }
    }
  ]
}

copy to editor

6. Add styles to the date input:

Add style attributes to the date input div.
Set the border to 1px solid transparent.
Set --inline-editor-border-color to green.
Set the cursor to pointer.
Set 5px of padding on the left and right.
Set the font-size to 16px.
Set font-family to arial.
Set text-align to center.
Set width to 80px.
Set min-height to 22px.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "txtContent": "-",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "DATE FIELD REQUIRED": "=addDays(@currentField,-1)"
        }
      },
      "attributes": {
        "class": "ms-bgColor-green ms-bgColor-greenLight--hover ms-fontColor-white ms-fontColor-black--hover"
      },
      "style": {
        "cursor": "pointer",
        "font-size": "16px",
        "font-family": "arial",	
        "border": "1px solid Black",
        "width": "22px",
        "height": "22px",
        "border-radius": "7px"
      }
    },
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "inlineEditField": "@currentField",
      "style": {
        "border": "1px solid transparent",
        "--inline-editor-border-color": "green",
        "cursor": "pointer",
        "padding": "0px 5px",
        "font-size": "16px",
        "font-family": "arial",
        "text-align": "center",
        "width": "80px",
        "min-height": "22px"
      }	  
    },
    {
      "elmType": "button",
      "txtContent": "+",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "DATE FIELD REQUIRED": "=addDays(@currentField,1)"
        }
      },
      "attributes": {
        "class": "ms-bgColor-green ms-bgColor-greenLight--hover ms-fontColor-white ms-fontColor-black--hover"
      },
      "style": {
        "cursor": "pointer",
        "font-size": "16px",
        "font-family": "arial",	
        "border": "1px solid Black",
        "width": "22px",
        "height": "22px",
        "border-radius": "7px"
      }
    }
  ]
}

copy to editor

Apply the template to your Date Field.
Try adjusting colors and other style attributes.
Get ideas on tweaking the appearance by using other settings using the live preview below.

live preview

Hyperlink Button

Display a hyperlink column as a clickable button.

Field:

Hyperlink Field

Instructions

This template will produce this HTML structure:


  
    HYPERLINK

1. Begin with column formatting schema:

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div"
}

copy to editor

2. Style the main div and add child elements:

Add a style node to main div.
Set the display property to flex if there is a value or none if not.
Set justify-content to center.
Add a child div element to the main div.
Add a child div element to the inner div.
Add an anchor element to the inner most div.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(@currentField,'flex','none')",
    "justify-content": "center"    
  },
  "children": [
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "a"			
            }
          ]		  
        }
      ]	  
    }	
  ]
}

copy to editor

2. Style the the second div (outer button):

Add an attributes node to the 2nd div.
Add color classes to style the button.
Add a style node to the 2nd div.
Set font-size to 12px.
Set border to 1px solid black.
Set border-radius to 7px.
Set box-shadow to 2px 2px 2px #999.
Set cursor to pointer.
Set display to flex.
Set align-items to center.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(@currentField,'flex','none')",
    "justify-content": "center"    
  },
  "children": [
    {
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-blue ms-bgColor-blueLight--hover ms-fontColor-white ms-fontColor-white--hover"
      },
      "style": {
        "font-size": "12px",
        "border": "1px solid black",
        "border-radius": "7px",
        "box-shadow": "2px 2px 2px #999",
        "cursor": "pointer",
        "display": "flex",
        "align-items": "center"
      },	  
      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "a"			
            }
          ]		  
        }
      ]	  
    }	
  ]
}

copy to editor

3. Style the the third div (icon):

Add an attributes node to the 3rd div.
Set the iconName property to DoubleChevronRight.
Add a style node to the 3rd div.
Set display to flex.
Set padding left to 5px.
Set align-items to center.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(@currentField,'flex','none')",
    "justify-content": "center"    
  },
  "children": [
    {
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-blue ms-bgColor-blueLight--hover ms-fontColor-white ms-fontColor-white--hover"
      },
      "style": {
        "font-size": "12px",
        "border": "1px solid black",
        "border-radius": "7px",
        "box-shadow": "2px 2px 2px #999",
        "cursor": "pointer",
        "display": "flex",
        "align-items": "center"
      },	  
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "iconName": "DoubleChevronRight"
          },
          "style": {
            "display": "flex",
            "padding-left": "5px",
            "align-items": "center"
          },		  
          "children": [
            {
              "elmType": "a"			
            }
          ]		  
        }
      ]	  
    }	
  ]
}

copy to editor

4. Add attributes and styles to the anchor element:

Add an attributes node to the anchor element.
Add a class attribute setting the fontColor to white using ms color classes.
Set the href attribute using the @currentField token.
Set txtContent to @currentField.desc.
Add a style node to the anchor element.
Set display to flex.
Set font-family to arial.
Set text-decoration to none.
Set padding to 3px 5px 3px 22px.
Set margin-left to -17px.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(@currentField,'flex','none')",
    "justify-content": "center"    
  },
  "children": [
    {
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-blue ms-bgColor-blueLight--hover ms-fontColor-white ms-fontColor-white--hover"
      },
      "style": {
        "font-size": "12px",
        "border": "1px solid black",
        "border-radius": "7px",
        "box-shadow": "2px 2px 2px #999",
        "cursor": "pointer",
        "display": "flex",
        "align-items": "center"
      },	  
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "iconName": "DoubleChevronRight"
          },
          "style": {
            "display": "flex",
            "padding-left": "5px",
            "align-items": "center"
          },		  
          "children": [
            {
              "elmType": "a",
              "attributes": {
                "class": "ms-fontColor-white ms-fontColor-white--hover",		  
                "href": "@currentField"
              },
              "txtContent": "@currentField.desc",
              "style": {
                "display": "flex",
                "font-family": "arial",
                "text-decoration": "none",
                "padding": "3px 5px 3px 22px",
                "margin-left": "-17px"
              }
            }
          ]		  
        }
      ]	  
    }	
  ]
}

copy to editor

Apply your template to your Hyperlink Field.
Try adjusting colors and other style attributes.
Get other color references using the "live preview" linked below.

live preview

Star Rating

Display an interactive star rating bar. Rate items from low to high.

Field:

Choice (Values: 1,2,3,4,5)

Instructions

This template will produce this HTML structure:


  STAR 1
  STAR 2
  STAR 3
  STAR 4
  STAR 5

1. Begin with column formatting schema:

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div"
}

copy to editor

2. Style the main div and add child elements:

Add a style node to the main div with font-size set to 20px.
Set the cursor to pointer.
Add five child span elements.
In each child span add a style node.
In each span set display to inline.
In each span set padding-right to 5px.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "20px",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      }
    }	
  ]
}

copy to editor

3. Make each span interactive using customRowAction:

Add a customRowAction node to each span.
For each customRowAction node, set the action property to setValue.
For each customRowAction node, add an actionInput property.
For each actionInput property, set your field to be updated to the corresponding number.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "20px",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "1"
        }
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "2"
        }
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "3"
        }
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "4"
        }
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "5"
        }
      }
    }	
  ]
}

copy to editor

4. Show a star icon or empty star icon according to value:

Add an attributes node to each span element.
In each attributes node add an iconName element.
Using an if condition set iconName to favoriteStarFill (filled) or favoriteStar (empty).
Use the Number function to convert the string to a number for use in comparison.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "20px",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "1"
        }
      },
      "attributes": {
        "iconName": "=if(Number(@currentField) >= 1, 'favoriteStarFill', 'favoriteStar')"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "2"
        }
      },
      "attributes": {
        "iconName": "=if(Number(@currentField) >= 2, 'favoriteStarFill', 'favoriteStar')"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "3"
        }
      },
      "attributes": {
        "iconName": "=if(Number(@currentField) >= 3, 'favoriteStarFill', 'favoriteStar')"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "4"
        }
      },
      "attributes": {
        "iconName": "=if(Number(@currentField) >= 4, 'favoriteStarFill', 'favoriteStar')"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "5"
        }
      },
      "attributes": {
        "iconName": "=if(Number(@currentField) >= 5, 'favoriteStarFill', 'favoriteStar')"
      }
    }	
  ]
}

copy to editor

5. Apply different colors according to the field value:

For each span attributes node, add a class attribute.
Using ms color classes set the colors of the stars according to value.
Set a hover color which will be shown when hovering over each star.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "20px",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "1"
        }
      },
      "attributes": {
        "iconName": "=if(Number(@currentField) >= 1, 'favoriteStarFill', 'favoriteStar')",
        "class": "=if(Number(@currentField) >= 1, 'ms-fontColor-yellow', 'ms-fontColor-gray40') + ' ms-fontColor-green--hover'"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "2"
        }
      },
      "attributes": {
        "iconName": "=if(Number(@currentField) >= 2, 'favoriteStarFill', 'favoriteStar')",
        "class": "=if(Number(@currentField) >= 2, 'ms-fontColor-yellow', 'ms-fontColor-gray40') + ' ms-fontColor-green--hover'"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "3"
        }
      },
      "attributes": {
        "iconName": "=if(Number(@currentField) >= 3, 'favoriteStarFill', 'favoriteStar')",
        "class": "=if(Number(@currentField) >= 3, 'ms-fontColor-yellow', 'ms-fontColor-gray40') + ' ms-fontColor-green--hover'"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "4"
        }
      },
      "attributes": {
        "iconName": "=if(Number(@currentField) >= 4, 'favoriteStarFill', 'favoriteStar')",
        "class": "=if(Number(@currentField) >= 4, 'ms-fontColor-yellow', 'ms-fontColor-gray40') + ' ms-fontColor-green--hover'"
      }
    },
    {
      "elmType": "span",
      "style": {
        "padding-right": "4px",
        "display": "inline"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YOUR FIELD NAME": "5"
        }
      },
      "attributes": {
        "iconName": "=if(Number(@currentField) >= 5, 'favoriteStarFill', 'favoriteStar')",
        "class": "=if(Number(@currentField) >= 5, 'ms-fontColor-yellow', 'ms-fontColor-gray40') + ' ms-fontColor-green--hover'"
      }
    }	
  ]
}

copy to editor

Apply your template to your Choice Field.
Try adjusting colors and other style attributes.
Get other color references using the "live preview" linked below.

live preview

View / Edit Button

Display a simple view or edit button to open the SharePoint form.

Field:

Placeholder Field

Instructions

This template will produce this HTML structure:

1. Begin with column formatting schema:

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div"
}

copy to editor

2. Add styling to the main div:

Set the main display property to flex.
Set the justify-content attribute to center.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "justify-content": "center"
  }
}

copy to editor

3. Add a child button element with customRowAction, attributes and style properties.

Add a button element with the settings below.
Set the customRowAction to defaultClick for a view button or editProps for an edit button.
Add an attributes node with fontColor classes ms-fontColor-white and ms-fontColor-black--hover.
Add style attributes border set to none, cursor set to pointer and background-color set to transparent.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "justify-content": "center"
  },
  "children": [
    {
      "elmType": "button",
      "customRowAction": {
        "action": "defaultClick"
      },
      "attributes": {
        "class": "ms-fontColor-white ms-fontColor-black--hover"
      },
      "style": {
        "border": "none",
        "cursor": "pointer",
        "background-color": "transparent"
      }
    }
  ]
}

copy to editor

4. Add a div inside the button with styling.

Add a div inside the button with the following settings.
Add an attributes node.
Add bgColor and fontColor classes: ms-bgColor-blue ms-bgColor-blueLight--hover
ms-fontColor-white ms-fontColor-black--hover.
Add style references as follows:
Set font size of 12px.
Set font family to arial.
Set the border to 1px solid black.
Set the border-radius to 7px.
Set the padding to 3px 5px 3px 5px.
Set box-shadow to 2px 2px 2px #999.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "justify-content": "center"
  },
  "children": [
    {
      "elmType": "button",
      "customRowAction": {
        "action": "defaultClick"
      },
      "attributes": {
        "class": "ms-fontColor-white ms-fontColor-black--hover"
      },
      "style": {
        "border": "none",
        "cursor": "pointer",
        "background-color": "transparent"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": "ms-bgColor-blue ms-bgColor-blueLight--hover ms-fontColor-white ms-fontColor-black--hover"
          },
          "style": {
            "font-size": "12px",
            "font-family": "arial",
            "border": "1px solid Black",
            "border-radius": "7px",
            "padding": "3px 5px 3px 5px",
            "box-shadow": "2px 2px 2px #999"
          }
        }
      ]		
    }
  ]
}

copy to editor

5. Add two more divs inside the button div for the icon and label.

Add two child divs - one for the icon and one for the label.
In the 1st div (for the icon) add an attribute node with iconName set to "Search".
In the 1st div (for the icon) add styles: display set to inline-block, vertical-align set to middle, padding-right set to 5px.
In the 2nd div (for the label) set txtContent to " VIEW" for the view button or " EDIT" for the edit button.
In the 2nd div (for the label) set styles: display set to inline-block, font-family set to arial, vertical-align set to middle.

show code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "justify-content": "center"
  },
  "children": [
    {
      "elmType": "button",
      "customRowAction": {
        "action": "defaultClick"
      },
      "attributes": {
        "class": "ms-fontColor-white ms-fontColor-black--hover"
      },
      "style": {
        "border": "none",
        "cursor": "pointer",
        "background-color": "transparent"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": "ms-bgColor-blue ms-bgColor-blueLight--hover ms-fontColor-white ms-fontColor-black--hover"
          },
          "style": {
            "font-size": "12px",
            "font-family": "arial",
            "border": "1px solid Black",
            "border-radius": "7px",
            "padding": "3px 5px 3px 5px",
            "box-shadow": "2px 2px 2px #999"
          },
          "children": [
            {
              "elmType": "div",
              "attributes": {
                "iconName": "Search"
              },
              "style": {
                "display": "inline-block",
                "vertical-align": "middle",
                "padding-right": "5px"
              }
            },
            {
              "elmType": "div",
              "txtContent": " VIEW",
              "style": {
                "display": "inline-block",
                "font-family": "arial",
                "vertical-align": "middle"
              }
            }
          ]
        }
      ]
    }
  ]
}

copy to editor

Apply your template to your Placeholder Field.
Try adjusting colors and other style attributes.
Get other color references using the "live preview" linked below.

live preview

◄

►

JSON CODE EDITOR

copy

clear