Highlighting Unanswered Fields for Improved Data Quality
Recently, one of my customers approached me with an interesting challenge in SharePoint Online. They wanted to implement conditional formatting in a document library, specifically targeting a Managed Metadata field configured to allow multiple answers. The main requirement was to visually flag any row where this field was left unanswered, ensuring that incomplete records were immediately noticeable to users.
To address this, the customer requested that the entire row should be highlighted in red whenever the Managed Metadata field was empty. This would help their team quickly identify documents that needed attention, improving both data quality and workflow efficiency. Since Managed Metadata fields with multiple values can be tricky to work with, especially when applying conditional formatting, this scenario required a custom JSON formatting approach within the SharePoint Online library view settings.
In the following sections, I’ll walk through the steps taken to achieve this, share insights about working with Managed Metadata fields in conditional formatting, and provide tips for overcoming common obstacles encountered in similar use cases.
The solution
To address the requirement, we created a custom JSON formatting rule to be applied to the SharePoint Online document library view. This JSON code checks whether the Managed Metadata field (configured to allow multiple values) is empty and, if so, highlights the entire row in red. Below is an example of the JSON you can use, replacing ManagedMetadataField with the internal name of your metadata field:
The Schema Line
`”$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json”,`
This line specifies which schema the JSON file adheres to: the view formatting schema for SharePoint. While it does not alter formatting behavior directly, it offers essential benefits:
- Assists with validation in the advanced formatting panel
- Enables Intellisense in supported editors
- Ensures adherence to the correct structure for view-level formatting (as opposed to column formatting)
Modifying Row CSS Classes: additionalRowClass
json
"additionalRowClass": {
"operator": "?",
"operands": [
...
]
}
The `additionalRowClass` property enables dynamic application of CSS classes to entire rows based on specified conditions. This mechanism functions as follows:
“If the condition is true, assign these CSS classes to the row; otherwise, apply alternate classes.”
To implement this conditional logic, the ternary operator—expressed as `”operator”: “?”`—is utilized.
The Ternary Operator (“operator”: “?”)
json
"operator": "?",
"operands": [
{ /* condition */ },
"sp-css-backgroundColor-BgCoral custom-row-text-black",
"custom-row-text-black"
]The ternary operator evaluates three operands in sequence:
- The condition (a boolean expression)
- The value if the condition is true
- The value if the condition is false
In this instance:
- If the Managed Metadata field is empty, both a coral background and black text are applied.
- If the field contains data, only black text is applied.
Thus:
- Use `sp-css-backgroundColor-BgCoral custom-row-text-black` when the field is empty
- Use `custom-row-text-black` when the field is populated
The specific CSS classes will be detailed subsequently. First, consider the condition statement.
Defining the Condition: Verifying an Empty Managed Metadata Field
json
{
"operator": "==",
"operands": [
{
"operator": "length",
"operands": [
"[$ManagedMetaDataField_InternalName]"
]
},
0
]
}This segment defines the condition passed to the ternary operator:
“If the length of the Managed Metadata field equals 0, then the field is considered empty.”
*Explanation:*
Accessing the Field Value
“[$ManagedMetaDataField_InternalName]”
Square brackets denote referencing a field value within JSON formatting, requiring the use of the column’s internal name (e.g., `”[$Permanent]”` for a “Permanent” column). For Managed Metadata fields, the returned value object will have a length of zero if unfilled.
Determining Length
json
{
"operator": "length",
"operands": [
"[$ManagedMetaDataField_InternalName]"
]
}The length operator returns zero if the field is blank, or more than zero if data is present.
Comparing to Zero
json
"operator": "==",
"operands": [
{ "operator": "length", ... },
0
]This checks whether the length equals zero:
- Yes → field is empty → condition is true
- No → field has data → condition is false
The result is interpreted by the ternary operator accordingly.
Assigning Appropriate CSS Classes
Now, reviewing the class assignments:
json
"sp-css-backgroundColor-BgCoral custom-row-text-black",
"custom-row-text-black"These represent the CSS classes attributed to the row.
When the Field Is Empty
“sp-css-backgroundColor-BgCoral custom-row-text-black”
If the condition is true (the field is empty), two classes are assigned:
- sp-css-backgroundColor-BgCoral: A built-in SharePoint class that provides a coral background
- custom-row-text-black: A custom class enforcing black text color
This configuration ensures both high visibility and text legibility.
When the Field Is Populated
“custom-row-text-black”
If the condition is false, only the black text class is used, maintaining the default background while ensuring consistent text color.
Defining the Custom Text Color Using additionalStyles
json
"additionalStyles": {
".custom-row-text-black": {
"color": "#000000"
}
}The `additionalStyles` property allows the definition of custom CSS within the JSON. Here, `.custom-row-text-black` ensures text color is set to black across all rows—only the background changes when the field is empty.
This approach leverages a conditional statement to apply the `sp-field-severity–severeWarning` class (resulting in a red background) when a field is empty. Always update field names to reflect your actual columns. Implementing this strategy enhances data quality by highlighting incomplete records and supporting efficient workflow management.
Full code to use
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
"additionalRowClass": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "length",
"operands": [
"[$ManagedMetadataField_InternalName]"
]
},
0
]
},
"sp-css-backgroundColor-BgCoral custom-row-text-black",
"custom-row-text-black"
]
},
"additionalStyles": {
".custom-row-text-black": {
"color": "#000000"
}
}
}🔁 Remember to replace ManagedMetaDataField_InternalName with the internal name of your own Managed Metadata column.