JSON Formatting forEach with customCardProps not working

[AndiWSW]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• MS Edge Version 139.0.3405.86 (Offizielles Build) (64-Bit)
• SharePoint Online

Describe the bug / error

When forEach looping through a multi value field the iterator variable, in my case [$Governance], in customCardProperty is null.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "forEach": "Governance in @currentField",
      "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": [
                "[$Governance]",
                "Auswahl 1"
              ]
            },
            "sp-css-backgroundColor-BgLightGray sp-css-borderColor-LightGrayFont sp-css-color-LightGrayFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$Governance]",
                    "Auswahl 2"
                  ]
                },
                "sp-css-backgroundColor-BgLightGray sp-css-borderColor-LightGrayFont sp-css-color-LightGrayFont",
                "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
              ]
            }
          ]
        }
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "overflow": "hidden",
            "text-overflow": "ellipsis",
            "padding": "0 3px"
          },
          "txtContent": "[$Governance]",
          "attributes": {
            "class": {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$Governance]",
                    "Auswahl 1"
                  ]
                },
                "sp-css-color-LightGrayFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$Governance]",
                        "Auswahl 2"
                      ]
                    },
                    "sp-css-color-LightGrayFont",
                    ""
                  ]
                }
              ]
            }
          },
          "customCardProps": {
            "formatter": {
              "elmType": "span",
              "txtContent": "[$Governance]"
            },
            "openOnEvent": "hover",
            "directionalHint": "bottomCenter",
            "isBeakVisible": true,
            "beakStyle": {
              "backgroundColor": "white"
            }
          }
        }
      ]
    }
  ]
}

Steps to reproduce

1. Create SharePoint Online List
2. Add Selection Field with multiple values allowed
3. Select 2 values for the field
4. Format column as in the example above

Expected behavior

Each customPropCard should the show the unique value of the selected values in the field.

[Ashlesha-MSFT]

Hello @AndiWSW,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@AndiWSW,
I tested the Governance field in the SharePoint list using JSON column formatting, including customCardProps for the hover behavior.

When I hover over the entries, I consistently see the expected choice values (e.g., "Auswahl 1", "Auswahl 2"), which confirms that the field is not returning null.

Please find the screenshot below. Let me know if I’m missing something or if there's anything specific you’d like me to check.

Thanks!

[AndiWSW]

@Ashlesha-MSFT My example is flawed, please give the iterator variable or column a different name, the example is sometimes working because column and iterator variable have the same name.

This means if in you change the column name to something else it stops working when it actually shouldn't as [$Governance] is still valid as it is the iterator variable.

[Ashlesha-MSFT]

@AndiWSW,
I reproduced the issue you reported with the forEach loop and customCardProps. The core of the problem is related to the iterator variable name conflicting with the column name.

When the iterator variable name is exactly the same as the column name (e.g., "forEach": "Governance in @currentField"), the JSON formatting engine works as expected, and [$Governance] correctly refers to the iterator variable inside the loop.

However, when you change the iterator variable to a different name (e.g., "forEach": "govItem in @currentField"), then inside customCardProps, [$govItem] becomes null, even though it should reference the current loop item.

We were able to reproduce the issue, and we are investigating it. We have logged this as a bug, and our engineering team will look into it
We appreciate your input!