How can I deliver simple text and clickable URLs via a Teams chat webhook without the text being clipped short?

Question

My humble goal is to do in Teams what can be so easily done with Slack Webhooks, like this:

      await fetch(slackWebhook, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          text: s
        })
      });

When I send a long string of text (not HTML) through this webhook, including URLs, the URLs are clickable and all of the text displays. Just as if someone had typed it. Makes sense right?

However when I try to do this with a Teams webhook only one line of text displays and then it just crops off. No expando-button, nothing.

My first attempt looked like this:

      await fetch(teamsWebhook, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          "type": "message",
          "attachments": [
            {
              "contentType": "application/vnd.microsoft.card.adaptive",
              "contentUrl": null,
              "content": {
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                "type": "AdaptiveCard",
                "version": "1.2",
                "body": [
                  {
                      "type": "TextBlock",
                      "text": s
                  }
                ]
              }
            }
          ]
        })
      });

But this was cropped savagely short. So I tried this verbosity, based on a bit of googling:

      await fetch(teamsWebhook, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          "type": "message",
          "summary": "Deployment",
          "attachments": [
            {
              "contentType": "application/vnd.microsoft.card.adaptive",
              "content": {
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                "type": "AdaptiveCard",
                "version": "1.2",
                "msteams": {
                  "width": "Full"
                },
                "body": [
                  {
                    "type": "ColumnSet",
                    "columns": [
                      {
                        "type": "Column",
                        "width": "auto",
                        "items": [
                          {
                            "type": "TextBlock",
                            "text": s
                          },
                        ]
                      }
                    ]
                  }
                ]
              }
            }
          ]
        })
      });

This gives me one full-width line of text... but then it still clips off, with no way to access the rest of the text.

How can I deliver multiline text via a Teams webhook such that all of it is visible? Preferably with functioning URLs? Ideally just as if someone had typed it?

Thanks.

Answer 1

I'm not sure why you're specifically using Adaptive Cards v1.2 - Teams supports at least 1.5. In any case, regarding your actual query, try setting wrap to true on your TextBlock, like this:

 await fetch(teamsWebhook, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          "type": "message",
          "attachments": [
            {
              "contentType": "application/vnd.microsoft.card.adaptive",
              "contentUrl": null,
              "content": {
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                "type": "AdaptiveCard",
                "version": "1.2",
                "body": [
                  {
                      "type": "TextBlock",
                      "text": s,
                      "wrap": true
                  }
                ]
              }
            }
          ]
        })
      });