SharePoint / SharePoint/sp-dev-docs

JSON Formatting forEach with customCardProps not working

Open
#10,370 7 comments 1 reaction 1 assignee View on GitHub

@Ashlesha-MSFT is already working on this.

Since Aug 18, 2025.

area:list-formatting sharepoint-developer-support type:bug-confirmed type:bug-suspected
Dominant language
PowerShell
Stars
1.4k
Forks
1.1k
Avg merge
4d 12h
Merged PRs (30d)
12

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.