Search code examples
node.jsbotframeworkadaptive-cards

MS Bot Framework nodejs sdk: display long text in adaptive card

I am using adaptive cards to display the text messages in my bot application. I am using ms bot framework nodejs sdk version 3. I am having issues display long text messages. They are getting truncated. Please find the code below:

[ 
  { type: 'TextBlock',
    text: 'Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.' },
  { type: 'TextBlock',
    text: ' Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.' }
]

What is the best way to display long text data inside an adaptive card without getting truncated ?

Thanks

Solution

  • You need to set the wrap attribute in the TextBlock object to true to keep the text from being truncated in the AdaptiveCard. I would recommend looking at the AdaptiveCard Designer for more styling options.

    Adaptive Card

    {
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "text": "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
            "wrap": true
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

    Screenshot

    enter image description here

    Hope this helps!