Forum Discussion
How to Format Text in PersonIterator? If possible?
- 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.
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.