How to create adaptive cards dynamically display them in carousel- in Microsoft BOT COMPOSER

831 views Asked by At

I have an array with multiple objects that are being fetched from an API call (Send an HTTP request - function in bot composer)

The array is Something Like this

[{"SdDoc": "4088","ItmNumber": "000010", "Material": "TG0012"},{"SdDoc": "4088", "ItmNumber": "000010","Material": "TG0012"}, ...]

Where each object contains data that has to be shown in an adaptive card as a carousel. The number of objects in the array changes on every API call(i.e number of adaptive cards changes), therefore has to be dynamic.

I have tried the solutions mentioned in the following GitHub conversation which resulted in the attached syntax error

GitHub Conversation: https://github.com/microsoft/BotFramework-Composer/issues/3674

Syntax Error : enter image description here

How do I make all the adaptive cards which are created Dynamically, be shown in a carousel Example: This is a static carousel having static made adaptive cards

1

There are 1 answers

0
Vinoth Rajendran On

example code how to implement the feature

[Activity
Attachments = ${json(SendActivity_rAhdm1_attachment_YFBm4l())} | ${json(SendActivity_rAhdm1_attachment_BSFqK9())}
AttachmentLayout = carousel

]

To learn more Adaptive Cards format, read the documentation at https://docs.microsoft.com/en-us/adaptive-cards/getting-started/bots

  • "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "${user.name}",
        "weight": "bolder",
        "isSubtle": false
      }
    ]
    

}```

To learn more Adaptive Cards format, read the documentation at https://docs.microsoft.com/en-us/adaptive-cards/getting-started/bots

  • "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "${user.name}",
        "weight": "bolder",
        "isSubtle": false
      }
    ]
    

}```