sp-dev-docs icon indicating copy to clipboard operation
sp-dev-docs copied to clipboard

List Formatting - Issue clicking in Board View using customCardProps "click" opens Edit item Form

Open aaclage opened this issue 6 months ago • 6 comments

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

Declarative list formatting

Developer environment

Windows

What browser(s) / client(s) have you tested

  • [ ] 💥 Internet Explorer
  • [X] 💥 Microsoft Edge
  • [X] 💥 Google Chrome
  • [ ] 💥 FireFox
  • [ ] 💥 Safari
  • [ ] mobile (iOS/iPadOS)
  • [ ] mobile (Android)
  • [ ] not applicable
  • [ ] other (enter in the "Additional environment details" area below)

Additional environment details

  • browser version

Describe the bug / error

Dear Mr. @shagra-ms, @tpodugu-ms, @arkogupta, I would like to report the following issue and inconsistent behavior Board View with declarative action customCardProps "Click":

When using the declarative customCardProps "Click" in Board View, the Edit Form appear with combination of customCardProps.

  • Expected behavior is when customCardProps click is made the Edit Form dialog should not appear.

ErrorListFormattingClickBoard

Steps to reproduce

  1. Add Board View
  2. Add Title and description Column
  3. Include following View Formatting for Card and click on button to see behavior.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/board-formatting.schema.json",
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container sp-card-container-noPadding"
    },
    "children": [
      {
        "elmType": "button",
        "style": {
          "margin": "10px",
          "padding": "20px"
        },
        "txtContent": "Click here",
        "customCardProps": {
          "openOnEvent": "click",
          "formatter": {
            "elmType": "div",
            "style": {
              "padding": "20px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "10px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px",
                      "font-size": "20px",
                      "border": "1px solid black",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "iconName": "WavingHand"
                    },
                    "txtContent": "Click me to open 2 dialog",
                    "customCardProps": {
                      "openOnEvent": "click",
                      "formatter": {
                        "elmType": "div",
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "padding": "10px",
                              "font-size": "20px",
                              "border": "1px solid black",
                              "cursor": "pointer"
                            },
                            "attributes": {
                              "iconName": "WavingHand"
                            },
                            "txtContent": "Click me again",
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Title": "=Number(@now)"
                              }
                            }
                          }
                        ]
                      }
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px",
                      "font-size": "15px",
                      "font-weight": "bold"
                    },
                    "txtContent": "Title:"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px"
                    },
                    "txtContent": "[$Title]"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px",
                      "font-size": "15px",
                      "font-weight": "bold"
                    },
                    "txtContent": "Description:"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px"
                    },
                    "txtContent": "[$Description]",
                    "inlineEditField": "[$Description]"
                  }
                ]
              }
            ]
          }
        }
      }
    ]
  }
}

Expected behavior

When using the declarative customCardProps "Click" in Board View, the Edit Form appear with combination of customCardProps.

  • Expected behavior is when customCardProps click is made the Edit Form dialog should not appear.

aaclage avatar Aug 22 '24 07:08 aaclage