SOLVED

SPO List Gallery view JSON: Split (or wrap) array of managed metadata column values across new lines

Occasional Contributor

Hi All,

 

I have an SPO List, using Gallery view.

Of four columns of data that display on the cards, one is a managed metadata column called 'Values' (corporate values) that allows multiple selections (resulting in an array). 

These display on one line only and are truncated, so if all corporate values are selected, the last few are not visible on the gallery card.

Ideally, I need some additional rows of JSON to split this array up and place each corporate value on a new line, and then introduce an icon prior to each corporate value. But I accept that might be a bit ambitious, so would settle for making the array wrap to two lines and not truncate.

 

I tried this but this didn't work:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 500,
  "width": 310,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-neutralLighter sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Recipient.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Recipient]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Recipient]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Recipient]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Recipient]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Recipient]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Recipient]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Recipient]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Recipient.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Values.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Values]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$Values] == '', '–', [$Values])",
                "style": {
                  "word-break": "keep-all"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Rationale.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Rationale]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content  sp-card-multiline"
                },
                "txtContent": "=if ([$Rationale] == '', '–', [$Rationale])",
                "style": {
                  "text-align": "justify",
                  "height": "200px",
                  "word-break": "keep-all"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Created.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "=if ([$Created.displayValue] == '', '–', [$Created.displayValue])",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Created.displayValue] == '', '–', [$Created.displayValue])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!GMT_x0020_Edition.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-content sp-card-formatterRef"
                },
                "children": [
                  {
                    "columnFormatterReference": "[$GMT_x0020_Edition]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
2 Replies
best response confirmed by Sourceress (Occasional Contributor)
Solution

@Sourceress Instead of 

 

{
  "elmType": "p",
  "attributes": {
    "title": "[$Values]",
    "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
    "role": "heading",
    "aria-level": "3"
  },
  "txtContent": "=if ([$Values] == '', '–', [$Values])",
  "style": {
    "word-break": "keep-all"
  }
}

 

Use this

 

{
  "elmType": "p",
  "attributes": {
    "title": "[$Values]",
    "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
    "role": "heading",
    "aria-level": "3"
  },
  "forEach": "tag in [$Values]",
  "children": [
    {
      "elmType": "span",
      "txtContent": "[$tag]"
    }
  ],
  "style": {
    "word-break": "keep-all"
  }
}

 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

@ganeshsanap this is glorious! Thank you ever so much: you are a superstar :sparkler: