Choicemenu not correct visible in Sharepoint - fault J-SON code

Question

Choicemenu not correct visible in Sharepoint - fault J-SON code

MLE_COMODO 20

Hello everyone,

I created a J-SON format in Microsoft 365 - SharePoint to display a column with choices.

The intention is that new choices can also be made. With the code it works quite well, except when I want to edit in grid view or do InlineField editing (I have already removed the InlineField from the bottom code).

The choices then disappear, the boxes are white. Afbeelding

I know what this is about: "align-items": "baseline"

If I remove this, they are visible again, but not at all legible, aligned,...

Grid view: Afbeelding

Detail window: Afbeelding

I think something needs to be written with Children but I can't get there.

Afbeelding

Can someone help me with this?

Thank you in advance!

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

"elmType": "div",

"style": {

"box-sizing": "border-box",

"padding-top": "6px",

"padding-left": "2px",

"white-space": "nowrap",

"overflow": "hidden",

"text-overflow": "ellipsis",

"height": "10px",

"line-height": "20px",

"display": "=if((@currentField ==''),'none','flex')",

"align-items": "baseline"

},

"txtContent": "@currentField",

"customCardProps": {

"formatter": {

"elmType": "div",

"txtContent": "@currentField",

"style": {

"font-size": "12px",

"color": "green",

"padding": "5px",

"white-space": "normal"

}

},

"openOnEvent": "hover",

"directionalHint": "bottomCenter",

"isBeakVisible": true,

"beakStyle": {

"backgroundColor": "white"

}

Emily Du-MSFT 51,851 Reputation points Microsoft External Staff

2024-05-23T01:59:20.67+00:00

Thank you for your question.

We are currently looking into this issue and will give you an update as soon as possible.

Accepted answer

1 additional answer

Your answer

Emily Du-MSFT 51,851 Reputation points Microsoft External Staff

2024-05-23T01:59:20.67+00:00

Thank you for your question.

We are currently looking into this issue and will give you an update as soon as possible.

Answer 1

Please use following JSON codes to add space between multiple choice column.

{
  "$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": " "
      },
      "txtContent": "=join(@currentField, ', ')",
      "inlineEditField": "@currentField",
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "txtContent": "=join(@currentField, ', ')",
          "style": {
            "font-size": "12px",
            "color": "black",
            "padding": "5px",
            "white-space": "normal"
          }
        },
        "openOnEvent": "hover",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "beakStyle": {
          "backgroundColor": "white"
        }
      }
    }
  ]
}

User's image

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

You could use following JSON codes.

{
  "$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": [
                "@currentField",
                "Choice 1"
              ]
            },
            "sp-css-backgroundColor-BgCornflowerBlue sp-field-fontSizeSmall sp-css-color-CornflowerBlueFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Choice 2"
                  ]
                },
                "sp-css-backgroundColor-BgMintGreen sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Choice 3"
                      ]
                    },
                    "sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-GoldFont",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "@currentField",
                            ""
                          ]
                        },
                        "",
                        "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "@currentField",
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "txtContent": "@currentField",
          "style": {
            "font-size": "12px",
            "color": "green",
            "padding": "5px",
            "white-space": "normal"
          }
        },
        "openOnEvent": "hover",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "beakStyle": {
          "backgroundColor": "white"
        }
      }
    }
  ]
}

Result:

User's image

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.

MLE_COMODO 20 Reputation points

2024-05-24T13:27:31.5266667+00:00

Hello Emily,

Thanks for your answer. It was a great help.

Your code was not the whole solution but it helpt me too get there.

For the moment there is still a little problem left: their is no space between the words.

I want a space after the comma ech time. Can you help me with this problem?

Her is my code:

{ "$schema": "\nhttps://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": " " }, "txtContent": "@currentField", "inlineEditField": "@currentField", "customCardProps": { "formatter": { "elmType": "div", "txtContent": "@currentField", "style": { "font-size": "12px", "color": "black", "padding": "5px", "white-space": "normal" } }, "openOnEvent": "hover", "directionalHint": "bottomCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "white" } } } ] }

Thank you

Kind regards

mle
Emily Du-MSFT 51,851 Reputation points Microsoft External Staff

2024-05-28T10:28:16.7066667+00:00

Whether

is one value in the choice column or all values in the choice column?
MLE_COMODO 20 Reputation points

2024-05-28T12:19:22.7066667+00:00

All chosen options of the choice column are individual but are pasted together.
Emily Du-MSFT 51,851 Reputation points Microsoft External Staff

2024-05-30T10:01:59.1466667+00:00

I have tested codes you provided, they work well in my end.

If you paste all values together manually, you should add space between the words manually.
MLE_COMODO 20 Reputation points

2024-05-31T08:33:00.8966667+00:00

The column is designed to allow the selection of multiple values. These are distinct words; however, when multiple values are chosen, it is unclear whether spaces exist between these words.

If I type the choices manually, the program considers them as new words and does not recognize the choices as those already in the program.

A space has been manually inserted after the first '2'. As a result, the program interprets it as a new word (within the round circle).

Thanku!

Share via

Choicemenu not correct visible in Sharepoint - fault J-SON code

1 additional answer

Your answer