Forum Discussion

tj7933's avatar
tj7933
Copper Contributor
May 10, 2023

Is there a way to turn off the default click action on a gallery card?

I have created a site page that contains a list that filters another table via Connected Web Parts.

 

The filtering list view is a gallery view so that the selections look like buttons.

The problem is if the user clicks anywhere on the tile, except the check circle a new window is opened for the item selected from the filter table.

Is there a way to turn off this aspect of the gallery cards? I just want the user to be able to check the circle and not open the details form for each card.

Thanks for helping.
TJ

2 Replies

  • tj7933 

    Yes, you can turn off the default click action on a gallery card by using custom code or JSON formatting. Here are a couple of ways to achieve this:

    1. Using custom code: You can use the OnSelect property of the gallery card to specify a custom action when the card is clicked. For example, you can set the OnSelect property to "UpdateContext({selectedItem: ThisItem})" to store the selected item in a context variable. Then you can use this variable to perform further actions, such as filtering another table. Here's an example:

     

    <Gallery Items="{YourDataSource}" >
    <Gallery.ItemTemplate>
    <YourCardTemplate OnSelect="UpdateContext({selectedItem: ThisItem})">
    <!-- Your card layout here -->
    </YourCardTemplate>
    </Gallery.ItemTemplate>
    </Gallery>

    2. Using JSON formatting: You can use the "customCardAction" property of the gallery card to specify a custom action when the card is clicked. Set the "customCardAction" property to false to disable the default click action. Here's an example:

    {
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
    "elmType": "div",
    "style": {
    "border": "1px solid gray",
    "padding": "10px",
    "width": "200px"
    },
    "children": [
    {
    "elmType": "span",
    "txtContent": "Title: ",
    "style": {
    "font-weight": "bold"
    }
    },
    {
    "elmType": "span",
    "txtContent": "[$Title]"
    }
    ],
    "customCardAction": {
    "action": "false"
    }
    }

    With either of these approaches, you can customize the behavior of your gallery cards and disable the default click action.

     

    If I have answered your question, please mark your post as Solved
    If you like my response, please give it a like
    • Grammy16's avatar
      Grammy16
      Copper Contributor

      Deleted It seems option #2 does not stop double clicks. I can't find a way to disable that. Additionally in my Edit View, I've even made sure the Title column is selected and not Title (with link to edit item). Do you know a way to stop double click from opening a new tab to view that item?

Resources