Site icon Office 365 Developer

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 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.

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:

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.

Exit mobile version