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

Question

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.

Answer 1

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?