SOLVED

Alter JSON code to disallow new tab to open

Brass Contributor

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!

2 Replies
best response confirmed by Beth_Culpepper (Brass Contributor)
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.

THANK YOU!! I appreciate your help so much!!
1 best response

Accepted Solutions
best response confirmed by Beth_Culpepper (Brass Contributor)
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.

View solution in original post