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 the name affiliated with the Person in a Gallery View Card (Personiterator). I have already increased the size of the image, but the name will need to be increased as well to make it look good! The text will also need to wrap for long names, like it does with the 'Responsibilities' text under the job title.

I have the sense that it may not be possible to use "font-size" or "word-break" features in PersonIterator type, but I wanted to throw this out to the community just in case I missed something! It would be so lovely to make this work!

 

 

 

{
  "$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')"
                    },
                    "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"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

 

 

  • 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.

2 Replies

  • 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