SP list column json formatting menu

Question

Hi there,

I am looking for a solution in sharepoint list where I have a column type "choice" with two values : "One" and "Two". I'd like that when I save my new entry, the values saved in the column for the record is "1" or "2". In other words, I'd like to have something similar than an html form with option value :

<option value="1">One</option>    
<option value="2">Two</option>

My json looks like this :

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$choice]",
                "One"
              ]
            },
            "sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$choice]",
                    "Two"
                  ]
                },
                "sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$choice]",
                        ""
                      ]
                    },
                    "",
                    "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "[$choice]"
    }
  ]
}

How can I achieve this ? Where/how should I change/adapt my json syntax ?

Thank you for your help

Answer 1

Hi @Pfeiffer Andreas - UCI ,

I don't quite understand what you mean. You mean that for the choice column, there are two options: "One" and "Two". And the value you want to display in the column is "1" or "2"? when I save my new entry, the values saved in the column for the record is "1" or "2" What does it mean? Does that mean that even if you change "One" and "Two" to other values, it will always display "1" or "2"?

If so, you can replace this sentence in Json:

"txtContent": "[$choice]"

to this sentence:

"txtContent": "=if([$choice]=='One','1',if([$choice]=='Two','2',''))"

This is the test:

In this way, the displayed values will become 1 and 2.

If you simply want to change the options to 1 and 2, you can do it directly by editing the column.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi Yanli,

Thank you for your answer.

In order to be sure you understood the issue - I think you did - , it is a matter of what the user sees in the form as choices and what it is saved in the column. In other words, when a user sees/select "One", the columns display "1"

Your solution makes fully sense. Nevertheless, I made my test on my end and the display for the user in the menu of the form is "1" and "2". Strangely, while it save, the "One" and "Two" appears for 1 second before switching to ""1" and "2". My menu looks like this (while I want "One" and "Two" instead) :

My setting for the menu looks like this :