Back to column formats
Column formattingSharePoint Online

Substring Status

This format demonstrates using a combination of the substring and indexOf operations to 'split' a value and make style decisions based on portions of the value.

Substring Status formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "=if(indexOf(@currentField, 'Not Started') == 0, 'WarningSolid', if(indexOf(@currentField, 'In Progress') == 0, 'AirplaneSolid', 'CompletedSolid'))",
        "class": "='ms-fontColor-' + if(indexOf(@currentField, 'Not Started') == 0, 'redDark', if(indexOf(@currentField, 'In Progress') == 0, 'yellow', 'green'))",
        "title": "@currentField"
      },
      "style": {
        "font-size": "32px"
      }
    },
    {
      "elmType": "div",
      "style": {
        "padding-left": "4px"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "=substring(@currentField, 0, indexOf(@currentField,':'))",
          "style": {
            "display": "inline-block",
            "width": "100%",
            "font-size": "10px",
            "line-height": "8px",
            "vertical-align": "text-top"
          }
        },
        {
          "elmType": "span",
          "txtContent": "=substring(@currentField, indexOf(@currentField,':') + 2, 100)",
          "style": {
            "display": "inline-block",
            "font-size": "14px",
            "font-weight": "bold",
            "vertical-align": "text-top",
            "line-height": "13px",
            "margin-top": "-4px"
          }
        }
      ]
    }
  ]
}

From the contributor

How to use this sample

Summary

This format demonstrates using a combination of the substring and indexOf operations to "split" a value and make style decisions based on portions of the value. In this case the status values are separated with a colon (:). The first part is a general category such as Not Started, In Progress, or Resolved. The second part is the detailed reason for the status. Since these values are within the same column it becomes necessary to break the value apart.

The value before the colon is used to set an icon and font-color as well as being displayed in it's own span element. The value after the colon is used to display the details in a secondary span element.

screenshot of the sample

View requirements

  • This format can be applied to a text/choice column but expects values similar to:
    • Not Started: New
    • Not Started: Delayed
    • Not Started: Unassigned
    • In Progress: Under Review
    • In Progress: Awaiting User
    • In Progress: Development
    • In Progress: Testing
    • In Progress: User Acceptance
    • Resolved: Complete
    • Resolved: Withdrawn
    • Resolved: As Designed
    • Resolved: Integration Failure
    • Resolved: Answered
    • Resolved: Can't Reproduce
    • Resolved: Enemy Destroyed

Sample

Solution Author(s)
generic-substring-status.json Chris Kent

Version history

Version Date Comments
1.0 February 6, 2020 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Additional notes