Change status for a list item with JSON (choice column)

4 oktober 2024 Oprindeligt udgivet på alexanderhenkel.dk

Learn how to create an interactive button to change status for a project/item in SharePoint

The challenge

If you have a list item (it could be a project) you probably have some stages for the specific project.

Having a standard choice field might help you to control the stages, but the user first have to open the info panel, and there is a risk that they don’t know or select the wrong, next stage

If the stages are not dynamic, we can use JSON formatting to create a button, that changes the status for the user

SharePoint list showing a Stage column with back and forward arrow buttons on each row, allowing users to move a project to the previous or next stage with a single click

The solution

Step 1
Create a new choice column (not multi choice)

Note that the first name you give the column will be the internal name which we need for the json code.

I have created a new column with the name Stage and the following choices

Initiation
Planning
Execution
Closure

Step 2
If you have made the exact same column, with the same choices as me, you can copy-paste the below code.

If not, copy it into Visual Studio Code and make the nessesary changes as descriped in step 3

Visual Studio Code showing the JSON column formatting code with the Stage choice values highlighted for editing

The JSON code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(@currentField == '', 'none', 'flex')"
  },
  "children": [
    {
      "elmType": "div",
      "attributes": {
        "iconName": "ChromeBack",
        "class": "=if(@currentField != 'Initiation','ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover', 'ms-fontColor-neutralLight')"
      },
      "style": {
        "cursor": "pointer",
        "padding-right": "4px",
        "padding-top": "4px"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "Stage": "=if(@currentField == 'Closure', 'Execution', if(@currentField == 'Execution', 'Planning', if(@currentField == 'Planning', 'Initiation', @currentField)))"
        }
      }
    },
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "style": {
            "flex-direction": "row",
            "display": "flex"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "width": "100%",
                "height": "26px",
                "border-radius": "3px",
                "align-items": "center",
                "justify-content": "space-evenly",
                "margin": "5px"
              },
              "attributes": {
                "class": "ms-bgColor-themePrimary ms-bgColor-themeDarker--hover ms-fontColor-white ms-fontSize-12 ms-fontWeight-bold"
              },
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "margin": "5px"
                  },
                  "txtContent": "@currentField"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "iconName": "ChromeBackMirrored",
            "class": "=if(@currentField != 'Closure','ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover', 'ms-fontColor-neutralLight')"
          },
          "style": {
            "cursor": "pointer",
            "padding-right": "4px",
            "padding-top": "4px"
          },
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "Stage": "=if(@currentField == 'Initiation', 'Planning', if(@currentField == 'Planning', 'Execution', if(@currentField == 'Execution', 'Closure', @currentField)))"
            }
          }
        }
      ]
    }
  ]
}

Step 3
To make the code work for your own column, and with your own choices do the following changes

Change 1
Line 22 and 80
Change Stage the the internal name of your column

Visual Studio Code highlighting line 22 and line 80 in the JSON code where the column internal name Stage must be replaced with your own column name

Change 2
Line 12 change the word Initiation to the first choice/step in your stage

Visual Studio Code highlighting line 12 where the word Initiation must be replaced with the first choice in your own stage column

Change 3
Line 70 change the word Closure to the last choice/step in your stage

Visual Studio Code highlighting line 70 where the word Closure must be replaced with the last choice in your own stage column

Change 4
Line 22 is your stage backwards so if the current stage is Closure then change to Execution, if Execution change to Planning and so on…
"Stage": "=if(@currentField == 'Closure', 'Execution', if(@currentField == 'Execution', 'Planning', if(@currentField == 'Planning', 'Initiation', @currentField)))"

Change 5
Line 80 is your stage the other way around. Again if the current stage is Initiation change to Planning, if current stage is Planning change to Execution and so on…
"Stage": "=if(@currentField == 'Initiation', 'Planning', if(@currentField == 'Planning', 'Execution', if(@currentField == 'Execution', 'Closure', @currentField)))"

We now have more control of the stages, and the user can now quickly change status by clicking the arrow. ‎