Forum Discussion

kristinePNW's avatar
kristinePNW
Copper Contributor
Sep 27, 2023
Solved

How to Format Text in PersonIterator? If possible?

I'm working on a company directory for SharePoint based on a List where one of the columns is "Person" (which allows linking contacts from Active Directory).  I'd like to increase the font size of t...
  • ganeshsanap's avatar
    Sep 28, 2023

    kristinePNW Try using this JSON: 

     

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
      "height": 200,
      "width": 250,
      "hideSelection": false,
      "fillHorizontally": true,
      "formatter": {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-container"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-defaultClickButton"
            },
            "customRowAction": {
              "action": "defaultClick"
            }
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-previewColumnContainer"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "p",
                        "attributes": {
                          "class": "sp-card-userEmptyText"
                        },
                        "txtContent": "=if(length([$Employee]) == 0, '–', '')"
                      },
                      {
                        "forEach": "personIterator in [$Employee]",
                        "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', '')",
                          "width": "75px",
                          "height": "75px"
                        },
                        "children": [
                          {
                            "elmType": "img",
                            "defaultHoverField": "[$personIterator]",
                            "attributes": {
                              "src": "=getUserImage([$personIterator.email], 'L')",
                              "title": "[$personIterator.title]",
                              "class": "sp-card-userThumbnail"
                            },
                            "style": {
                              "display": "=if(length([$Employee]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                            }
                          },
                          {
                            "elmType": "div",
                            "attributes": {
                              "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                            },
                            "style": {
                              "display": "=if(length([$Employee]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                            },
                            "customCardProps": {
                              "formatter": {
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-personCallout"
                                },
                                "children": [
                                  {
                                    "forEach": "personIterator in [$Employee]",
                                    "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], 'L')",
                                          "title": "[$personIterator.title]",
                                          "class": "sp-card-userThumbnail"
                                        }
                                      }
                                    ]
                                  }
                                ]
                              },
                              "openOnEvent": "hover"
                            },
                            "children": [
                              {
                                "elmType": "span",
                                "txtContent": "='+' + toString(length([$Employee]) - (4))"
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "sp-card-userTitle"
                        },
                        "style": {
                          "display": "=if(length([$Employee]) == 1, '', 'none')",
                          "font-size": "20px",
                          "white-space": "normal",
                          "word-break": "normal"
                        },
                        "defaultHoverField": "[$personIterator]",
                        "txtContent": "[$Employee.title]"
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "[$JobTitle]",
                      "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                      "role": "heading",
                      "aria-level": "3"
                    },
                    "txtContent": "=if ([$JobTitle] == '', '–', [$JobTitle])"
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-lastTextColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "[$Responsibilities2]",
                      "class": "ms-fontColor-neutralPrimary sp-card-content "
                    },
                    "txtContent": "=if ([$Responsibilities2] == '', '–', [$Responsibilities2])",
                    "style": {
                      "white-space": "normal",
                      "padding": "0px 0",
                      "margin": "0",
                      "display": "block",
                      "word-break": "normal"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    }

     

    I have added these styling properties in your original JSON: 

     

    "font-size": "20px",
    "white-space": "normal",
    "word-break": "normal"

     

    You can customize these CSS properties values as per your requirements like changing size to 24px instead of 20px.


    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.

Resources