How to handle ToggleVisibility for table/columns

[dhartford]

Hi everyone,
I'm curious if there is a way to handle the chevron-style expand/collapse as shown here:

https://adaptivecards.io/samples/ExpenseReport.html

If there isn't a good way, is there a way to take the raw JSON (template) and raw JSON data and send it through this library?

TIA!!!

[atc0005]

Hi @dhartford,

While I'm not familiar enough with Microsoft Teams to know the answer for sure, this library is mostly (at present) focused on submitting messages (formatted or not) through a webhook connector.

This is a one-way data submission and I'm not sure that there would be enough feedback for the client using this library to use in making a decision based on toggling the UI element.

[dhartford]

thanks for the quick response!!!

Not looking for feedback/decisions, just 'hide' and 'show' with the toggle feature only (the visual side only)

[atc0005]

@dhartford So are you asking whether you can embed JavaScript in the payload to make the delivered message in Microsoft Teams behave the way that the https://adaptivecards.io/samples/ExpenseReport.html demo does?

[dhartford]

I mis-spoke - JSON template and JSON dataset (edited original ask), I was thinking javascript notation but only wrote javascript - sorry for the confusion!!!!

The example uses some special syntax as well as 'order' for the toggle visibility to work on certain containers that I can't quite seem to get with the API, which is why I was wondering if could do a 'raw' approach first until iterate it into the API in a meaningful (versus rushed) way.

` "type": "Container",

      "id": "cardContent${$index}",

      "isVisible": false,

      "items": [

        {

          "type": "Container",

          "items": [

            {

              "$data": "${custom_fields}",

              "type": "TextBlock",

              "text": "* ${value}",

              "isSubtle": true,

              "wrap": true

            },`

and

`
"type": "Column",

          "spacing": "small",
          
          "selectAction": {

            "type": "Action.ToggleVisibility",

            "title": "expand",

            "targetElements": [
              "cardContent${$index}",
              "chevronDown${$index}",
              "chevronUp${$index}"
            ]
          },
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "Image",
              "id": "chevronDown${$index}",
              "url": "https://adaptivecards.io/content/down.png",
              "width": "20px",
              "altText": "${description} $${total} collapsed"
            },

            {
              "type": "Image",
              "id": "chevronUp${$index}",
              "url": "https://adaptivecards.io/content/up.png",
              "width": "20px",
              "altText": "${description} $${total} expanded",
              "isVisible": false
            }
            `

[atc0005]

@dhartford Thanks for the additional details/clarification.

I appreciate the desire to prototype before implementing library changes.

When I'm prototyping changes to this library or a client tool I maintain I often fallback to using the approach noted here:

• Ability to create a Table in AdaptiveCard #205 (comment)

If you can craft a JSON file that you're able to successfully deliver to a Microsoft Teams webhook (e.g., via curl) then it's very likely that this library could grow the feature to do the same, either in a raw manner as you've indicated or in another form.

Please give that approach a try and let me know what results you get.

[atc0005]

@dhartford see also this recent request:

• Support for ToggleVisibility #243

[atc0005]

@dhartford The initial prototype support can be found in the v2.9.0-alpha.1 release here:

• https://github.com/atc0005/go-teams-notify/releases/tag/v2.9.0-alpha.1

Examples are included.

Feedback is welcome.

[atc0005]

Hi @dhartford ,

Just checking to make sure you saw my last note.