Search code examples
botframeworkadaptive-cards

How to display images in imageset dynamically from an array object in adaptiev cards?


I have an array object like this:

    {
       "Items":[
          {
             "ShortName":"Product short name",
             "Image":"https://www.andrew.cmu.edu/user/cfperron/cats/images/cat8.jpg",
             "ManufacturerName":"MMM",
             "CatalogName":"cats"
          },
          {
             "ShortName":"Product2 short name",
             "Image":"https://www.andrew.cmu.edu/user/cfperron/cats/images/cat7.jpg",
             "ManufacturerName":"SSS",
             "CatalogName":"Dogs"
          }
       ]
    }

how to get Images in ImageSet dynamically in adaptive cards? I was able to get rest of the values in FactSet. But stuck with images.


Solution

  • Ok I figured it out.

    {
      "type": "AdaptiveCard",
      "body": [
        {
          "type": "TextBlock",
          "size": "medium",
          "weight": "bolder",
          "text": "Search Results"
        },
        {
          "type": "Container",
          "items": [
            {
              "type": "ImageSet",
              "imageSize": "medium",
              "images": [
                {
                  "type": "Image",
                  "url": "${Image}",
                  "size": "Medium"
                }
              ]
    
            },
            {
              "type": "FactSet",
              "facts": [
                {
                  "title": "Short Name",
                  "value": "${ShortName}"
                },
    
                {
                  "title": "Supplier Name",
                  "value": "${SupplierName} "
                },
    
                {
                  "title": "Price ",
                  "value": "${PriceAmount} "
                }
              ]
            }
          ],
          "$data": "${$root['Items']}"
        }
      ],
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.2"
    }
    

    But next issue I am facing is if image url is empty, it throws an error "Adaptive Card Rendered error:

    {
      "message": "Cannot read property 'style' of null"
    }"
    

    How can we give a null check inside adaptive card for Image property?