Sep 02 2022 09:23 AM
Hi everyone! I am a JSON newbie and borrowed one of the fabulous entries in github that looks like this:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"position": "absolute",
"width": "150px",
"height": "150px",
"left": "=if(floor(@rowIndex/5) % 2 == 0 , @rowIndex % 5 * 150 + 'px' , @rowIndex % 5 * 150 + 75 + 'px' )",
"top": "=floor(@rowIndex / 5) * 125 + 'px'"
},
"children": [
{
"elmType": "a",
"style": {
"position": "relative",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "100%",
"height": "100%"
},
"attributes": {
"href": "[$URL]",
"target": "_blank",
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
},
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"cursor": "pointer"
},
"attributes": {
"viewBox": "-150 -150 300 300"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"cursor": "pointer",
"width": "100%",
"height": "100%"
},
"attributes": {
"class": "ms-fontColor-white"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "32px",
"margin-bottom": "5px"
},
"attributes": {
"iconName": "[$Icon]"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"width": "75%",
"text-align": "center"
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
}
Currently I have four "honeycombs" and each has a link to it's respective page. I do NOT want these to open in new tabs and yet they do...does anyone know how to alter the code to make sure that doesn't happen? Thank you in advance!
Sep 02 2022 10:51 PM
Solution@Beth_Culpepper Try changing target attribute to _self like:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"position": "absolute",
"width": "150px",
"height": "150px",
"left": "=if(floor(@rowIndex/5) % 2 == 0 , @rowIndex % 5 * 150 + 'px' , @rowIndex % 5 * 150 + 75 + 'px' )",
"top": "=floor(@rowIndex / 5) * 125 + 'px'"
},
"children": [
{
"elmType": "a",
"style": {
"position": "relative",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "100%",
"height": "100%"
},
"attributes": {
"href": "[$URL]",
"target": "_self",
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
},
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"cursor": "pointer"
},
"attributes": {
"viewBox": "-150 -150 300 300"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"cursor": "pointer",
"width": "100%",
"height": "100%"
},
"attributes": {
"class": "ms-fontColor-white"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "32px",
"margin-bottom": "5px"
},
"attributes": {
"iconName": "[$Icon]"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"width": "75%",
"text-align": "center"
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
}
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.
Sep 03 2022 12:41 PM
Sep 02 2022 10:51 PM
Solution@Beth_Culpepper Try changing target attribute to _self like:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"position": "absolute",
"width": "150px",
"height": "150px",
"left": "=if(floor(@rowIndex/5) % 2 == 0 , @rowIndex % 5 * 150 + 'px' , @rowIndex % 5 * 150 + 75 + 'px' )",
"top": "=floor(@rowIndex / 5) * 125 + 'px'"
},
"children": [
{
"elmType": "a",
"style": {
"position": "relative",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "100%",
"height": "100%"
},
"attributes": {
"href": "[$URL]",
"target": "_self",
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
},
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"cursor": "pointer"
},
"attributes": {
"viewBox": "-150 -150 300 300"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"cursor": "pointer",
"width": "100%",
"height": "100%"
},
"attributes": {
"class": "ms-fontColor-white"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "32px",
"margin-bottom": "5px"
},
"attributes": {
"iconName": "[$Icon]"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"width": "75%",
"text-align": "center"
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
}
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.