This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(6.4, 82%, 10%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EVM%3C/text%3E%3C/svg%3E)
Dear Techies,
Need help on SharePoint List Row formatting with JSON data.
Created SharePoint List, Added Tail View in that tail View added Row formatting JSON code, for that entire card i removed default clickable option by removing customRowAction to redirect item metadata, Added anchor tag as a parent tag for entire card clickable when i doing this it is working as i expected in SharePoint List itself,
After Adding this list to SharePoint new modern page in the initially it was worked entire card clickable, from last two days onwards it's stopped working when i clicked it's not at all working,
Note: Still it is working in SharePoint list itself and not working in to SharePoint page
Thanks & Regards
Venky
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(102.4, 65%, 19%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAM%3C/text%3E%3C/svg%3E)
Could you please share your JSON code so that we can test in our environments? Thanks!
List Columns
| Internal Column name | Type |
|---|---|
| Title | Single line of text |
| ProductDetailsLink | hyper link |
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 240,
"width": 250,
"hideSelection": true,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"style": {
"position": "relative",
"cursor": "pointer"
},
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "a",
"style": {
"position": "absolute",
"width": "295px",
"height": "210px"
},
"attributes": {
"href": "[$ProductDetailsLink]"
},
"customRowAction": {
"action": "setValue"
}
},
{
"elmType": "div",
"style": {
"background-color": "#FFF",
"width": "100%",
"border-top": "3px solid #2977BD"
},
"attributes": {
"class": "sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
},
"children": [
{
"elmType": "a",
"style": {
"position": "absolute"
},
"attributes": {
"href": "[$ProductDetailsLink]"
},
"children": [
{
"elmType": "div",
"style": {
"margin": "0px",
"display": "flex",
"flex-wrap": "wrap",
"justify-content": "end",
"margin-top": "5px"
},
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"children": [
{
"elmType": "a",
"attributes": {
"href": "https://www.microsoft.com"
},
"style": {
"position": "relative",
"display": "block",
"padding-right": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"position": "relative",
"height": "25px",
"width": "25px",
"display": "=if([$CopilotEnabled] == false, 'none', 'block')"
},
"attributes": {
"src": "=if([$CopilotEnabled] == false, '../DummyLibrary/CopilotDisabled.png', '../DummyLibrary/copilotlogo.png')"
},
"customCardProps": {
"openOnEvent": "hover",
"directionalHint": "bottomCenter",
"isBeakVisible": true,
"formatter": {
"elmType": "div",
"style": {
"max-width": "500px"
},
"children": [
{
"elmType": "div",
"style": {
"bottom": "0"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "12px",
"padding": "15px",
"white-space": "normal",
"overflow": "visible",
"text-overflow": "ellipsis",
"max-width": "490px",
"color": "#000"
},
"attributes": {
"title": "=if([$CopilotEnabled] == false, 'Copilot Disabled', 'Copilot Enabled')",
"class": "ms-fontColor-white ms-fontSize-20"
},
"txtContent": "=if([$CopilotEnabled] == false, 'Copilot Disabled', 'Copilot Enabled')"
}
]
}
]
}
}
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "span",
"style": {
"-webkit-line-clamp": "2",
"font-size": "16px",
"padding": "0px 0px 0px 0px",
"color": "#333",
"font-family": "Segoe UI",
"font-weight": "600",
"height": "42px",
"word-break": "auto-phrase",
"position": "relative"
},
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline",
"aria-level": "3"
},
"customCardProps": {
"openOnEvent": "hover",
"directionalHint": "bottomCenter",
"isBeakVisible": true,
"formatter": {
"elmType": "div",
"style": {
"max-width": "500px"
},
"children": [
{
"elmType": "div",
"style": {
"bottom": "0"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "12px",
"padding": "15px",
"white-space": "normal",
"overflow": "visible",
"text-overflow": "ellipsis",
"max-width": "490px",
"color": "#000"
},
"attributes": {
"class": "ms-fontColor-white ms-fontSize-20"
},
"txtContent": "[$Title]"
}
]
}
]
}
},
"txtContent": "=if ([$Title] == '', '–', [$Title])"
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "nowrap",
"align-items": "stretch",
"border-top": "1px solid #CCC",
"margin-bottom": "0px"
},
"attributes": {
"class": "sp-card-displayColumnContainer sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "div",
"style": {
"line-height": "1.5",
"margin": "0px 5px 5px 0px",
"width": "50%",
"border-right": "1px solid #CCC"
},
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-content"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"gap": "2px"
},
"children": [
{
"elmType": "div",
"txtContent": "Personal",
"attributes": {
"class": ""
},
"style": {
"-webkit-line-clamp": "1",
"color": "#716D6D",
"font-size": "12px",
"font-family": "Segoe UI",
"font-weight": "400",
"line-height": "25px"
}
},
{
"elmType": "div",
"txtContent": "=if ([$Personal] == '', '–', [$Personal])",
"style": {
"-webkit-line-clamp": "4",
"color": "#333",
"text-overflow": "ellipsis",
"font-family": "Segoe UI",
"font-weight": "400",
"font-size": "12px",
"text-wrap": "pretty",
"padding-right": "5px",
"height": "51px",
"word-break": "auto-phrase"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"line-height": "1.5",
"margin": "0px 5px 5px 0px",
"width": "50%"
},
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-content"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"gap": "2px"
},
"children": [
{
"elmType": "div",
"txtContent": "Other Stages",
"attributes": {
"class": ""
},
"style": {
"-webkit-line-clamp": "1",
"color": "#716D6D",
"font-size": "12px",
"font-family": "Segoe UI",
"font-weight": "400",
"line-height": "25px"
}
},
{
"elmType": "div",
"txtContent": "=if ([$Stages] == '', '–', [$Stages])",
"style": {
"-webkit-line-clamp": "4",
"color": "#333",
"text-overflow": "ellipsis",
"font-family": "Segoe UI",
"font-weight": "400",
"font-size": "12px",
"text-wrap": "pretty",
"height": "75px",
"word-break": "auto-phrase"
}
}
]
}
]
}
]
}
]
}
]
}
]
}
}
Good morning! Check the list to see if it is still working. If so, remove it from the modern page and add it again. If it doesn't work, paste the json here so I can reproduce the error in my environment.
If there are any misunderstandings, please let me know
Best regards，
Maycon Novaes
If the Answer is helpful, please click "Accept Answer" and upvote it.
This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Comments have been turned off. Learn more