Apply UI to Enhance Choice Fields with Conditional Formatting

Introduction

SharePoint offers a wide range of formatting options to enhance the look and feel of list items, and one of the most useful features is UI Conditional Formatting. In this article, we will focus on how to apply conditional formatting to a Choice Field in SharePoint. This allows you to customize the appearance of list items based on their choices, making data easier to interpret at a glance.

In the following steps, we’ll use a custom JSON formatting formula to visually represent different states in a choice column. We’ll demonstrate how to change the color and icon of the field based on its value (such as "Done", "In progress", etc.).

Features of Conditional Formatting on Choice Fields

• Dynamic UI Elements: Change background color, text color, and icons dynamically based on the field's value.
• Customizable Icons: Use different icons to represent specific values in a choice field (e.g., a checkmark for "Done" or a warning icon for "Has issues").
• Improved User Experience: Enhance the readability and usability of your SharePoint list by applying visually distinguishable styles for each option.
• Easy Integration: Conditional formatting can be applied directly to your SharePoint list views using simple JSON code.

Steps to Add UI Conditional Formatting to a Choice Field in SharePoint

Let’s walk through the steps to apply conditional formatting to a Choice Field in your SharePoint list using a simple JSON formula.

Step 1. Log in to SharePoint.

1. Open your browser and go to your SharePoint site URL.
2. Enter your login credentials to access the SharePoint environment.
   

Step 2. Open Your SharePoint List.

1. Navigate to the SharePoint site where your list is located.
2. Open Site Contents, and click on the list where you want to apply the conditional formatting.
   

Step 3. Open the List View and Select the Column.

1. Once you have your list open, click on the View options at the top right of the list view.
2. From the dropdown menu, select Format Current View to start editing the view formatting.
   
   
   

Choose the Choice column where you want to apply conditional formatting.

Step 4. Apply the Conditional Formatting Formula.

In the column formatting panel, paste the following JSON formula into the box.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Done', 'sp-field-severity--good', if(@currentField == 'In progress', 'sp-field-severity--low', if(@currentField == 'In review', 'sp-field-severity--warning', if(@currentField == 'Has issues', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Done', 'CheckMark', if(@currentField == 'In progress', 'Forward', if(@currentField == 'In review', 'Error', if(@currentField == 'Has issues', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Step 5. Preview and Save.

1. After pasting the formula, click the Preview button to see how your choice column will appear with the applied formatting.
2. If the preview looks good, click Save to apply the changes to the list view.

Understanding the Formula

In the formula above, we are using SharePoint's JSON formatting to conditionally apply.

• Icon: Depending on the choice value, different icons will be displayed. For example, a checkmark for "Done", a forward arrow for "In progress", etc.
• Background Color: The background color will also change dynamically. For instance:
  • "Done" gets a green background (good).
  • "In progress" gets a light blue background.
  • "In review" gets a yellow background.
  • "Has issues" gets a red background.
  • Any other values will have a gray background (blocked).
• Text: The text of the choice field will be displayed beside the icon.

Suggestions for Additional Conditional Formatting Use Cases

Here are a few more suggestions on how you can extend or modify the JSON formula for different use cases:

1. Highlight Overdue Tasks with a Custom Background Color.

If you want to display a "Due Date" column with conditional formatting, where tasks that are overdue are highlighted with a red background, you can modify the formula like this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField < @now, 'sp-field-severity--severeWarning', 'sp-field-severity--good')"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

This will change the background color to red if the date is past today, indicating an overdue task.

2. Show Status Using Progress Bars.

For numerical or percentage-based columns (like task completion), you can use a progress bar instead of changing just the color. Here’s an example:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "width": "=if(@currentField >= 0, @currentField + '%', '0%')",
    "height": "20px",
    "background-color": "#4CAF50"
  }
}

This will show a progress bar based on the number in the column.

3. Apply Custom Icons for Different Categories.

If your Choice field has categories like "High", "Medium", "Or low", you can apply different icons for each:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'High', 'sp-field-severity--severeWarning', if(@currentField == 'Medium', 'sp-field-severity--warning', 'sp-field-severity--good'))"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'High', 'Error', if(@currentField == 'Medium', 'Info', 'CheckMark'))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

This will show a different icon and color for each category.

4. Add a Tooltip with Extra Information.

Sometimes, it’s useful to show a tooltip when users hover over a choice field to provide additional context. Here's how you can achieve that:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "title": "=if(@currentField == 'Done', 'Task completed', if(@currentField == 'In progress', 'Task is being worked on', 'Task pending'))"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

This will display a tooltip when the user hovers over the choice field.

5. Highlight Specific Text with Color.

If you want to highlight specific text values (like "Critical" or "Blocked") in your choice field, you can apply the following:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "span",
  "style": {
    "color": "=if(@currentField == 'Critical', 'red', 'green')"
  },
  "txtContent": "@currentField"
}

This will change the text color to red for "Critical" and green for other values.

Conclusion

In this article, we have explored how to apply UI Conditional Formatting to a Choice Field in SharePoint. Using simple JSON formulas, we can significantly enhance the visual appeal and usability of SharePoint lists by changing the field appearance based on its value. This helps users quickly identify key data points and improves the overall user experience.

In the next article, we will dive into advanced JSON customization for other column types, offering even more powerful ways to format and display your list data.