SharePoint column formatted button does not work in Tile View

Question

Hello!

I wonder if someone can advise whether or not it is possible now to have a SharePoint Document Library in Gallery/Tile View to have a clickable button on it?

I have a column formatted to change the status of another field once clicked - works fine in list view.

But my user interface uses the Tile View and the button doesn't work. Seen a similar ticket here - https://learn.microsoft.com/en-us/answers/questions/471442/sharepoint-online-column-button-not-working-from-g?page=1&orderby=Helpful&comment=answer-830670#newest-answer-comment - which tells us how to view the button - but not how to get it to work! I still want the defaultClick to open the item as normal.

Any help greatly appreciated!

Answer 1

Hi @Mcintosh, Rebecca ,

I'm glad to hear you solve the problem, thank you for your enthusiasm in posting your research success to help more people. If you have any issue about SharePoint, you are welcome to raise a ticket in this forum. I would make a brief summary of this thread:

Issue Symptom:

SharePoint column formatted button does not work in Tile View

Current status:

The issue has been solved. The solution is: add the customRowAction and all the formatting of the button from column along with the columnFormatterReference and then set the customRowAction for the container itself to none.

{

 "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]"
              }
            ]
          },

You could click the "Accept Answer" button for this summary to close this thread, and this can make it easier for other community member's to see the useful information when reading this thread. Thanks for your understanding!

Answer 2

{

 "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]"
              }
            ]
          },