SharePoint Online: JSON - Add red dotted line under each list row

Question

I am trying to format a list view with JSON. I want to place a thin red dotted line under each row using "border-bottom": "1px dotted red".

I think I have far to go in understanding the JSON structure so I'm hoping someone can start this off and I can build on it.

Answer 1

You can use the additionalRowClass property and specify the ms-borderColor-red and sp-field-borderBottomDotted classes using this view format:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalRowClass": "ms-borderColor-red sp-field-borderBottomDotted"
}

You can find more details about what border classes are available here:

• ms-borderColor-*
• sp-css-borderColor-*
• sp-css-border Other
• sp-field-border*

Answer 2

I am unable to find any predefined classes which are supported in SharePoint JSON formatting for your requirements.

For list/table view you can use additionalRowClass to apply additional classes without loosing list/table view and SharePoint default functionalities like context menu.

For example (I found these classes only to apply border to list/table view)

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

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

You can find supported predefined classes at:

1. Predefined classes - Microsoft official documentation
2. SharePoint Online CSS Classes - list of classes collected by Denis Molodtsov - few classes like sp-field-borderBottomDotted did not work for me.

---

Possible solutions you can try:

1. Find predefined class which meets your requirements and use in above JSON
2. Format complete view using JSON to create custom list/table view as shown here - it will remove all SharePoint OOTB functionalities.
3. Create custom CSS class with required CSS, add it to all modern pages using SPFx application customizer and then use that class in your JSON