Reinvigorating the SharePoint Issue Tracking App

The Issue Tracking app has been around since SharePoint 2007. It has proven itself useful for projects and support operations alike. Recent developments with column formatting present opportunities to breathe new life into the Issue Tracking app.

Current Issue Tracking: SPO-IssueTracking01

Issue Tracking with column formatting: SPO-IssueTracking02

The use of JSON column formatting in the Issue Tracking app help to quickly guide users to the areas that need the most attention and show progress through their backlog items.

Appended below are the steps I used to reinvigorate the Issue Tracking app.

Add an app
Select Issue Tracking
Go into List Setting for Issue Tracking

Modify the Issue Status column

Set column formatting to the following JSON code:
SPO-IssueTracking06

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "debugMode": true,
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Closed', 'sp-field-severity--good', if(@currentField == 'Resolved ', 'sp-field-severity--low' ,if(@currentField == 'Resolved','sp-field-severity--warning', ''))"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Closed','CheckMark', if(@currentField == 'Resolved', 'Error', '')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Modify the Priority column

Set choices to High, Normal, Low
Set default choice to Normal

Set column formatting to the following JSON code:

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "debugMode": true,
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'High', 'sp-field-severity--blocked', if(@currentField == 'Normal', 'sp-field-severity--low' ,if(@currentField == 'Low','sp-field-severity--low', ''))"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'High','Up', if(@currentField == 'Low', 'Down','')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Modify the Due Date column

Set Date and Time Format to Date Only

Set column formatting to the following JSON code:
SPO-IssueTracking08

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "color": "=if([$DueDate] <= @now, '#ff0000', ''"
  }
}

My final version of the Issue Tracking app has an additional Comments field, removed the Category column and a new detailed view that includes all columns.

I’ll be creating a similar app for Tasks in an upcoming blog post.

Thanks for stopping by.