Forum Discussion

dKayt's avatar
dKayt
Copper Contributor
Mar 13, 2024

View formating - How to make defined area clickable

 

Hello,
I'm formating a SharePoint List and I want to make certain area clickable. Somehow I just have one area clickable. 
Does anyone know if I am making a mistake?
Thanks, dKayt
Here ist my code :

 

 

{
        "elmType": "div",
        "style": {
          "position": "absolute",
          "top": "0",
          "bottom": "0",
          "right": "0",
          "left": "0"
        },
        "children": [
          {
            "elmType": "svg",
            "attributes": {
              "viewBox": "0 0 1100 800",
              "class": "ms-fontColor-themePrimary"
            },
            "style": {
              "opacity": "1",
              "stroke": "red"
            },
            "children": [
              {
                "elmType": "a",
                "attributes": {
                  "href": "[$href]",
                  "alt": "[$alt]",
                  "target": "_blank"
                },
                "children": [
                  {
                    "elmType": "path",
                    "attributes": {
                      "title": "[$alt]",
                      "d": "[$coords]"
                    },
                    "style": {
                      "fill": "yellow"
                    },
                    "customCardProps": {
                      "openOnEvent": "hover",
                      "isBeakVisible": true,
                      "formatter": {
                        "elmType": "div",
                        "txtContent": "[$alt]",
                        "style": {
                          "padding": "10px"
                        }
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }

 

 

developer
  • dKayt's avatar
    dKayt
    Mar 14, 2024

    Hi ganeshsanap 

    Thanks for replying.

    I change the structure of my code and it works now:

    "children": [
      {
        "elmType": "svg",
        "attributes": {
          "viewBox": "0 0 1100 300"
        },
        "style": {
          "opacity": "1",
          "stroke": "green"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "href": "[$href]",
              "alt": "[$alt]",
              "target": "_blank"
            },
            "children": [
              {
                "elmType": "path",
                "attributes": {
                  "title": "[$Title]",
                  "d": "[$coords]"
                },
                "style": {
                  "fill": "red"
                },
                "customCardProps": {
                  "openOnEvent": "hover",
                  "formatter": {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "padding": "10px"
                    }
                  },
                  "isBeakVisible": true
                }
              }
            ]
          }
        ]
      }
    ]

    Best Regards, dKayt

  • ganeshsanap's avatar
    ganeshsanap
    MVP
    Mar 13, 2024

    dKayt 

    The element created in DOM using a elmType should cover whole parent element area to be clickable inside complete parent element.

     

    Try adding this JSON piece for a elmType: 

     

    "style": {
  "width": "100%",
  "height": "100%"
},

     

    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.

    • dKayt's avatar
      dKayt
      Copper Contributor
      Mar 14, 2024

      Hi ganeshsanap 

      Thanks for replying.

      I change the structure of my code and it works now:

      "children": [
      {
        "elmType": "svg",
        "attributes": {
          "viewBox": "0 0 1100 300"
        },
        "style": {
          "opacity": "1",
          "stroke": "green"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "href": "[$href]",
              "alt": "[$alt]",
              "target": "_blank"
            },
            "children": [
              {
                "elmType": "path",
                "attributes": {
                  "title": "[$Title]",
                  "d": "[$coords]"
                },
                "style": {
                  "fill": "red"
                },
                "customCardProps": {
                  "openOnEvent": "hover",
                  "formatter": {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "padding": "10px"
                    }
                  },
                  "isBeakVisible": true
                }
              }
            ]
          }
        ]
      }
    ]

      Best Regards, dKayt

Resources