SharePoint Online Column Button not working from Gallery View

Question

SharePoint Online Column Button not working from Gallery View

SarahK 21

I have created a list in SharePoint online and successfully created a button which activates a flow using power automate. I have created several customised views including gallery views however the button does not work when in gallery view. Is this a JSON customisation issue or does SharePoint not support use of buttons in gallery view?

4 answers

Your answer

Answer 1

I actually got it to work after all, with much playing around with the JSON!

So I had to add the customRowAction and all the formatting of the button from my column along with the columnFormatterReference and then set the customRowAction for the container itself to none.

Snippet below which is hopefully helpful!

{
 "elmType": "div",
 "attributes": {
"class": "=if([$Status] == 'Awaiting Approval', 'ms-bgColor-tealLight ms-bgColor-teal--hover ms-fontColor-white ms-fontSize-12 ms-fontWeight-bold', 'ms-bgColor-transparent ms-bgColor-neutralQuaternaryAlt--hover ms-fontColor-neutralQuaternary ms-fontColor-tealLight--hover ms-fontSize-12')"
 },
"customRowAction": {
"action": "setValue",
"actionInput": {
"Status": "Approved"
 }
 }
 },
 {
"elmType": "div",
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
 },
"customRowAction": {
"action": "none"
 },
 "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "columnFormatterReference": "[$ChangeStatus]"
              }
            ]
          },

Answer 2

Allen Xu_MSFT 13,866

Hi @SarahK ,

You can refer to a column's formatter JSON inside Gallery view formatter and use it along with other elements to build a custom view visualization. This can be done by using columnFormatterReference property. There is a demo for your reference: Column formatter reference. Set "columnFormatterReference": [$<your button column name>] in the JSON code and apply the code to the Gallery view formatting.

Test on my end:

If an Answer is helpful, please click "Accept Answer" and upvote it.
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.

Allen Xu_MSFT 13,866 Reputation points

2021-07-16T07:27:32.993+00:00

@SarahK ,

Did you refer to my answer? Is there any progress on this thread? Please feel free to let me know if you still have any doubt.
SarahK 21 Reputation points

2021-07-18T22:58:09.847+00:00

Yes, thank you. It was very helpful. I was missing the columnformatterReference and also needed to remove some JSON that was used near the beginning which was affecting the entire JSON.
Allen Xu_MSFT 13,866 Reputation points

2021-07-19T01:15:44.747+00:00

@SarahK ,

Thanks for your resoponse. If you still need help, feel free to ler me know.

----------

If an Answer is helpful, please click "Accept Answer" and upvote it.
Allen Xu_MSFT 13,866 Reputation points

2021-07-22T06:56:21.797+00:00

@SarahK ,

I'm checking how things are going on this thread. Is there is any update, kindly share here.
Luke Smith 1 Reputation point

2021-11-18T13:10:25.133+00:00

Hello, I followed your solution and have achieved having the button within the card. However, when clicking the button, it just opens the card to edit it and does not actually perform the action the button is designed to do. Is there anyway to solve this?
Gergely Szucs 1 Reputation point

2022-04-14T09:19:03.617+00:00
I have encountered the same issue, after the button appeared in the gallery view, on click, it just brought up the edit window. To solve that, just remove the following line from the Gallery view's JSON formatting and it will begin to work:

"class": "sp-card-defaultClickButton",

This line should be located in a section similar to this, towards the beginning of the JSON

"children": [ { "elmType": "button", "attributes": { "class": "sp-card-defaultClickButton", "role": "presentation" }, "customRowAction": { "action": "defaultClick" } },
JohanFiske 0 Reputation points

2023-10-24T09:13:12.3466667+00:00
If you want to use both the default click (opening the edit panel) and a clickable flow button you can use z-index: 999999 for the element containing the flow button. Like:

"style": { "z-index": "9999999" }

That will make the button clickable without triggering the default click of the card.

Answer 3

James Moyle - Royal High School 1

This was helpful in getting the button to appear correctly, but I still have an issue. Clicking on any part of the Galler Card opens the item

Joana Villas-Boas 20 Reputation points

2023-04-10T17:50:23.12+00:00

I have the same issue and in my case I can't make the button appear too
Mcintosh, Rebecca 46 Reputation points

2025-02-26T10:48:41.5566667+00:00

@James Moyle - Royal High School did you ever find a resolution to this? Being able to open the gallery item clicking on the Tile but also allowing the other button to function as expected as well?

Answer 4

James Moyle - Royal High School 1

Sadly not - I got over it 🙂

Share via

SharePoint Online Column Button not working from Gallery View

4 answers

Your answer