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.

  1. Add an app
    SPO-IssueTracking03
  2. Select Issue Tracking
    SPO-IssueTracking04
  3. Go into List Setting for Issue Tracking
    SPO-IssueTracking05
  4. Modify the Issue Status column
    1. 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"
          }
        ]
      }
  5. Modify the Priority column
    1. Set choices to High, Normal, Low
    2. Set default choice to Normal
    3. Set column formatting to the following JSON code:
      SPO-IssueTracking07.png

      {
        "$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"
          }
        ]
      }
  1. Modify the Due Date column
    1. Set Date and Time Format to Date Only
    2. 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.

NY

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s