How to split a column value using column formatting

By João Ferreira Feb 8, 2021 Formatting 0 Comments

When formatting list columns in SharePoint and Microsoft Lists you might have the need to split a column value to use just part of in the new structure representing the information.

With Microsoft Lists there is no split method available to be used, however with some creativity is possible easily split the column and use just part of the value.

To better understand how this concept works in the column formatting I’ll show you an example that you can reuse and adapt to your own scenario.

I’ll assume that a date and time is being stored in a single line of text column and the time is irrelevant for context of the list.

The first thing to do is identify the pattern of your data and count the position where you need to split the value, the following image has a generic representation of how it works.

In the example above the value has always 19 characters and goal is just to display the first 10. This can be achieved using the substring function that requires the start position and the end position for the new value.

"=substring(@currentField.displayValue, 0, 10)"

In the following example you can find a formatting that splits the original string and adds a calendar icon to the beginning of the value.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "Calendar"
      }
    },
    {
      "elmType": "span",
      "txtContent": "=substring(@currentField.displayValue, 0, 10)"
    }
  ]
}

If you are curious to see the end result, have a look to the following image where you can see the value before and after applying the formatting.