microsoft / microsoft/HealthBotContainerSample
Display Adaptive Card Carousels
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 114
- Forks
- 238
- Avg merge
- 5m
- Merged PRs (30d)
- 2
Description
Hi,
I have been using Dynamic Card attached to a Statement in a Scenario to generate a list of Hero Cards and display them in a Carousel layout, which works fine.
I am now trying to switch the Hero Cards with Adaptive Cards but just seeing empty cards returned in the Carousel. Am I missing something or should I look for an alternate way of implementing this? Appreciate any pointers.
Below is what I have tried so far:
(function(){
var data = ${doctorsList};
var cards = data.map(function(item) {
return {
type: "AdaptiveCard",
version: "1.5",
body: [
{
type: "Container",
isVisible: true,
items: [
{
type: "Image",
style: "person",
url: item.imageUrl,
altText: item.imageAltText,
size: "medium"
},
{
type: "TextBlock",
text: item.title,
weight: "bolder",
size: "medium",
wrap: true
},
{
type: "TextBlock",
text: item.subtitle,
weight: "bolder",
wrap: true,
isSubtle: true
},
{
type: "TextBlock",
text: item.location,
weight: "bolder",
wrap: true,
isSubtle: true
}
]
},
{
type: "ActionSet",
actions: [
{
type: "Action.OpenUrl",
title: "View Profile & Schedule",
url: item.buttonUrl,
id: item.buttonId
}
]
}
]
}
});
return cards;
})();
And below is what I had before inside the Dynamic Card:
(function(){
var doctors = [];
for (var i =0 ; i < ${doctors}.count; i++) {
doctors.push(new builder.HeroCard()
.title(${doctors}._result[i].title)
.subtitle(${doctors}._result[i].specialty)
.text(${doctors}._result[i].location)
.images([builder.CardImage.create(session,${doctors}._result[i].image_url)])
.buttons([builder.CardAction.openUrl(session,${doctors}._result[i].url,'View Profile')])
);
}
return doctors;
})()
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Dynamic Card configuration and the JavaScript carousel example shown in the issue, then reproduce the empty-card result with Adaptive Cards. Compare the Adaptive Card payload with the earlier Hero Card setup and verify completion by displaying the mapped card content in the Carousel or documenting the supported alternative.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100