View Formatting - Group - GroupProps To Trigger Expand / Contract Without Malforming Header

[influential-eliot]

Hi, sorry for being brief, but the official MS Q&A just kept deleting my question when I added the view JSON.

Broad Overview

I would like to affect the same action as tapping the chevron in a Grouped view, without malforming the header.

Illustrated

One attempt that I have made to try and resolve this was to add a customRowAction (as per the code below) I get the following annoyance:

Before

After

More Information

Attempts

I have tried issuing the base object as both a button and a div, neither make a difference.

On top of that, I have tried a few different attributes ripped from the chevron button's HTML code, but they don't change anything.

{
  "data-is-focusable": "false",
  "data-selection-disabled": "true",
  "type": "button",
  "class": "ms-GroupHeader-expand",
  "aria-expanded": "false",
  "aria-label": "Expand or collapse group Title : Do Not Use General Storage",
  "tabindex": "-1",
  "role": "gridcell"
}

I have also tried shoehorning in the customRowAction, in both the Group/Header and the RowFormatter, neither assist, here.

Plus, as @Fedes365 asserts, it really needs to be in the RowFormatter anyway. But, hey ... I was trying stuff out.

Full Code

This includes the customRowAction in the header ...

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "hideListHeader": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "attributes": {
        "class": "sp-row-card"
      },
      "customRowAction": {
        "action": "defaultClick"
      },
      "style": {
        "color": "black",
        "background-color": "#FAF9F9",
        "flex-grow": "1",
        "display": "flex",
        "flex-direction": "row",
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "border-radius": "6px",
        "align-items": "center",
        "flex-wrap": "nowrap",
        "overflow": "auto",
        "margin": "1px 4px 4px 1px",
        "width": "fit-content"
      },
      "children": [
        {
          "elmType": "img",
          "style": {
            "max-width": "24px",
            "max-height": "24px",
            "margin-top": "2px",
            "border-radius": "2px"
          }
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "style": {
                "padding": "5px 5px 5px 5px",
                "font-weight": "500",
                "font-size": "15px"
              },
              "txtContent": "@group.fieldData.displayValue"
            }
          ]
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "column",
                "justify-content": "center"
              }
            }
          ]
        }
      ]
    }
  },
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-bgColor-themeLighterAlt"
    },
    "style": {
      "justify-content": "start",
      "color": "ms-fontColor-Primary",
      "display": "flex",
      "padding": "1px 8px 5px 20px",
      "border-radius": "6px",
      "max-width": "905px",
      "margin": "1px 4px 4px 60px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "font-weight": "400",
          "font-size": "15px",
          "display": "flex",
          "flex-flow": "row nowrap"
        },
        "children": [
          {
            "elmType": "span",
            "style": {
              "margin-top": "8px",
              "padding-left": "1px",
              "color": "black",
              "height": "fit-content"
            },
            "attributes": {
              "class": "ms-fontSize-m",
              "iconName": "Lightbulb"
            }
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Description]",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "column",
              "flex-wrap": "nowrap",
              "align-items": "center",
              "max-width": "900px",
              "min-width": "205px",
              "margin-top": "8px",
              "padding-left": "4px",
              "margin-bottom": "8px"
            }
          }
        ]
      }
    ]
  }
}

[influential-eliot]

As you can see, I started with a simple base of the accordion example, here, by @anandragav 👍 ...

[Fedes365]

@influential-eliot

I used the code below, with small changes (deleted "hideListHeader": true, since it's a not documented property).
I wasn't able to reproduce exactly your issue (I see a filter applied in your screenshot). However, I don't think what you want to achieve could work, because customRowAction should always have an item as a reference.

In this particular sample, we are using a group header in a smart way, to build a FAQ, in order to contain just a single related item represented by a question, but I don't think that Lists is able to "understand" that you want to run a "defaultClick". From its point of view, is something like "hey, you are asking me to perform a defaultClick, but which item should trigger that action? I was born to group many items! Which of them?"

I hope I got it right, maybe another expert could add further details I'm still not aware of...

[Fedes365]

Here is the code I used to test:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "hideListHeader": true, "groupProps": { "headerFormatter": { "elmType": "div", "attributes": { "class": "" }, "style": { "height": "42px", "width": "800px", "color": "black", "background-color": "#FAF9F9", "flex-grow": "1", "display": "flex", "flex-direction": "row", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "border-radius": "6px", "align-items": "center", "flex-wrap": "nowrap", "overflow": "auto", "margin": "1px 4px 4px 1px" }, "children": [ { "elmType": "div", "children": [ { "elmType": "span", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500", "font-size": "15px" }, "txtContent": "@group.fieldData.displayValue" } ] } ] } }, "rowFormatter": { "elmType": "div", "attributes": { "class": "ms-bgColor-themeLighterAlt" }, "style": { "justify-content": "flex-start", "color": "ms-fontColor-Primary", "display": "flex", "padding": "1px 8px 5px 20px", "border-radius": "6px", "max-width": "905px", "margin": "1px 4px 4px 60px" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "font-weight": "400", "font-size": "15px" }, "children": [ { "elmType": "span", "style": { "margin-top": "8px", "padding-left": "1px", "color": "black" }, "attributes": { "class": "ms-fontSize-m", "iconName": "Lightbulb" } }, { "elmType": "span", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "Answer", "style": { "font-weight": "500", "color": "black", "padding-left": "4px" } }, { "elmType": "div", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "[$Answer]", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "flex-wrap": "nowrap", "align-items": "center", "max-width": "900px", "min-width": "205px", "margin-top": "8px", "margin-bottom": "8px" } }, { "elmType": "button", "customRowAction": { "action": "defaultClick" }, "txtContent": "Show more", "attributes": { "class": "sp-row-button" }, "style": { "display": "=if([$ShowMore] == 'Yes', 'flex', 'none')", "align-items": "center", "justify-content": "center", "margin-bottom": "8px", "color": "white", "background-color": "#0077DB" } } ] } ] } }

[influential-eliot]

I'll take a look at your code, presently, and merge it into what I have, thanks, @Fedes365 ...

I would add to anyone (and I'll edit the question) not to concentrate too hard on the customRowAction ... I was simply providing that as one instance of something that I have tried (and failed) to get around this problem.

[influential-eliot]

Looks like I might be tilting at windmills due to a more pervasive issue:

List Formatting: Group header cannot be clicked even when setting defaultClick to headerFormatter in groupProps in the newer? Microsoft Lists #9756

This is causing various issues, and I think one of my attempts mirrors one of the videos in that particular issue.

---

It's also mentioned in the following PNP issues:

• group-header-remove-column-name has made me sad, please help #818
• group-header-remove-column-name-clickable has made me sad, please help #811

[lara-g07]

Hi @influential-eliot just wondering if you were able to find a way to resolve this in the end? I think I am experiencing the same issue. I would like users to be able to click on the "Question" and have the "Answer" box appear below, the same effect achieved by clicking the small arrow beside the "Question". Thank you.

[influential-eliot]

Hi, @lara-g07 ... I'm not sure that I have, no.
I'm going to get back to it at some point, but I've not had a chance to look at some of the things that have recently been mentioned in the above linked post.
I just can't really tell if they're talking about the same thing or not. 😩