Sharepoint Online - Lists - Card View - How can I turn a whole card into a link?

Question

Sharepoint Online - Lists - Card View - How can I turn a whole card into a link?

Wren, Russell 6

I have a list in SharePoint that I'm displaying as a card gallery. I would like to make it so that if a user clicks anywhere on the card it will take them to a page. For my purposes, I can't use another feature other than SharePoint List for this.

Yi Lu_MSFT 17,611 Reputation points

2022-03-11T06:09:25.07+00:00

I am currently looking into this issue and will give you an update as soon as possible.

Thank you for your understanding and support.

Heemeryck, Pieter 5

You can:

Disable the default click behaviour
Set an anchor tag (<a>) around the entire card

For this, start editing the JSON of the Gallery view.

Removing following snippet disables opening the side panel to edit the selected item:

"customRowAction": {
    "action": "defaultClick"
  }

Wrapping the "sp-card-defaultClickButton" div with an anchor tag. In my case $Site refers to a URL type field in SharePoint, dynamic metadata of the selected SP list item.

      {
        "elmType": "a",
        "attributes": {
          "title": "[$Site]",
          "href": "[$Site]",
          "target": "=if ([$Site] == '', '', '_blank')",
          "role": "heading",
          "aria-level": "3"
        },
        "style": {
          "pointer-events": "=if ([$Site] == '', 'none', 'auto')",
          "text-decoration": "=if ([$Site] == '', 'none', 'auto')"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-defaultClickButton"
            }
          }
        ]
      },

1 answer

Your answer

Yi Lu_MSFT 17,611 Reputation points

2022-03-11T06:09:25.07+00:00

I am currently looking into this issue and will give you an update as soon as possible.

Thank you for your understanding and support.
Heemeryck, Pieter 5 Reputation points

2024-02-19T14:08:49.3933333+00:00

You can:

Disable the default click behaviour

Set an anchor tag (<a>) around the entire card

For this, start editing the JSON of the Gallery view.

Removing following snippet disables opening the side panel to edit the selected item:

"customRowAction": { "action": "defaultClick" }

Wrapping the "sp-card-defaultClickButton" div with an anchor tag. In my case $Site refers to a URL type field in SharePoint, dynamic metadata of the selected SP list item.

{ "elmType": "a", "attributes": { "title": "[$Site]", "href": "[$Site]", "target": "=if ([$Site] == '', '', '_blank')", "role": "heading", "aria-level": "3" }, "style": { "pointer-events": "=if ([$Site] == '', 'none', 'auto')", "text-decoration": "=if ([$Site] == '', 'none', 'auto')" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-defaultClickButton" } } ] },

Answer 1

Hi @Wren, Russell
Currently there is no ootb method in sharepoint list to meet your requirement, as a workaround, you could create two column, one for picture and the other for the link.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Sharepoint Online - Lists - Card View - How can I turn a whole card into a link?

1 answer

Your answer