Using Column and View Formatting

Before creating a Field Customizer, first, determine if you can accomplish the same thing with column or view formatting. This is easier to do, since it doesn’t require an SPFx app to be deployed.

Column Formatting

An example of simple column formatting is as follows:

The following image shows an example of conditional formatting applied to a status field. If the status field (referenced by @currentField below) is set to ‘Done’, then the column appears as a green box with a check icon, and so forth.

Status field with done colored green, blocked colored red, and in review colored orange

Here is the code for this sample (borrowed from Microsoft example.)

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/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"
    }
  ]
}

To create a column formatter:

  • Ensure you have at least “editor” rights to the list you are formatting.
  • It is important to note that any change you make to a column with show up in all views for the list, every time. This means you can’t format the column one way in one view, and another way in another view.

Here is another example of column formatting:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "text-decoration": "=if([$LocalizationChange]=='Removed','line-through','inherit')",
    "font-weight": "=if([$Main],'bold','')"
  }
}

This format will style the rendered text in the view with line-through if the SharePoint list column “LocalizationChange” equals “Removed” and set it to bold if a if the value of the “Main” column is true.

View Formatting

Use view formatting when you want to style the entire row (not just a single column) based on the value of one of the columns in the row. That column must be included in the view. Start by selecting the view and then select “Format current view.”

Next, add JSON code similar to the following. This code changes the color of the rows based on the value of the “LocalizationChange” field. If it is a localized addition to the policy ([$LocalizationChange] ==’Added’), then the row turns green, and so forth…

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$LocalizationChange] =='Added', 'sp-field-severity--good', if([$LocalizationChange] =='Modified', 'sp-field-severity--warning',if([$LocalizationChange] =='Removed', 'sp-field-severity--severeWarning','')"
}

The formatted view is shown below.

If you need more power than what is provided in column and view formatting, then consider using Field Customizer. This will be explained in a future post.

How Can We Help? Find out how Lone Peak Software can help you with SharePoint development and configuration.

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close