I have a question about honeycomb-link

[mohammadamer]

Shoneycomb-link

Question (the more details, the better)

My question about this sample, Is it possible to do changes to this sample in order to make it like the normal buttons of SharePoint. I'm new to List formatting and I tried to do changes to the JSON but wasn't able to achieve it.

My aim is to show a grouped vertical links of buttons. Which parts should be changed in the JSON in order to have a view that contains something like the default SharePoint Button?

[jaxkookie]

Wouldn't a quick links web part serve your purpose better? If not you could play around with the SVG and path to make whatever shape you want.

[mohammadamer]

unfortunately, it won't help because Quick links order is a bit strange. Thanks, I'll try with SVG and path.

[jaxkookie]

I dropped a quick svg path and viewbox dimensions in a current list and also adjusted the offset for every other row, worked perfectly. This is an easy script to modify/update

[mohammadamer]

Hi @jaxkookie I would glad if you can share with me the changes that you did.

[jaxkookie]

My script is a bit customized from the original. I allow for different colors and icons. This is one shape:

Here is my code:

Full Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "div",
        "style": {
          "height": "150px",
          "display": "=if(@rowIndex%4==0,'','none')"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "width": "150px",
          "height": "150px",
          "left": "=if(floor(@rowIndex / 4) % 2 == 0 , @rowIndex % 4 * 150 + 'px' , @rowIndex % 4 * 150  + 'px' )", // I removed + 75
          "top": "=if(@rowIndex%4 == 0,'','-150px')"
        },
        "children": [
          {
            "elmType": "a",
            "style": {
              "position": "relative",
              "display": "flex",
              "justify-content": "center",
              "align-items": "center",
              "width": "100%",
              "height": "100%",
              "fill": "=if([$bgColor],[$bgColor],'#002855')",
              "top": "=if(floor(@rowIndex / 4) % 4 != 0,((floor(@rowIndex / 4) % 4) * -10) + (((floor(@rowIndex / 4) % 4) * -10)) + 'px','') "
            },
            "attributes": {
              "id": "[$ID]",
              "href": "[$URL]",
              "target": "_blank",
              "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
            },
            "children": [
              {
                "elmType": "svg",
                "style": {
                  "fill": "=if([$bgColor],[$bgColor],'#002855')",
                  "cursor": "pointer",
                  "width": "125px"
                },
                "attributes": {
                  "viewBox": "0 0 1000 1000" // the new viewbox dimentions
                },
                "children": [
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "M900,981.4H100c-49.5,0-90-40.5-90-90V108.7c0-49.5,40.5-90,90-90H900c49.5,0,90,40.5,90,90v783.4C990,940.8,949.5,981.4,900,981.4z" // new path
                    }
                  }
                ]
              },
              {
                "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",
                      "color": "=if([$fColor2],[$fColor2],if([$fColor],[$fColor],'#cedbea'))"
                    },
                    "attributes": {
                      "iconName": "=if([$Icon],[$Icon],'Globe')"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "font-size": "14px",
                      "width": "75%",
                      "text-align": "center",
                      "color": "=if([$fColor],[$fColor],'#cedbea')"
                    },
                    "txtContent": "=[$Title]+if([$SubTitle],'\n'+[$SubTitle],'')"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

[mohammadamer]

Awesome :) Thank you so much @jaxkookie

[tecchan1107]

Thank you @jaxkookie 🤩😍✨ I think this issue has been resolved and I will close it.