Forum Discussion
Lakshmi_145
Sep 26, 2023Brass Contributor
Can we highlight the selected hero card
We are using hero cards to show multiple prompts as below .
We wanted to highlight the selected hero card. Is there any solution available to highlight the selected hero card in bot framework
Hi Lakshmi_145,
you can try this solution for highlighting the selected hero card in Bot Framework using a carousel card:
// Create a carousel card. CarouselCard carouselCard = new CarouselCard(); // Add the hero cards to the carousel card. carouselCard.Cards.Add(new HeroCard() { Title = "Can we highlight the selected hero card?", Subtitle = "This is the selected hero card.", Images = new List<CardImage>() { new CardImage() { Url = "https://example.com/thumbnail_image_1.png" } } }); // Highlight the selected hero card by changing its background color. carouselCard.Cards[0].BackgroundColor = "yellow"; // Send the carousel card to the user. await turnContext.SendActivityAsync(carouselCard.ToAttachment());
This solution will create a carousel card with two hero cards. The selected hero card will have a yellow background, which will make it stand out from the other hero card.
You can also highlight the selected hero card by adding a border or changing its text color. To do this, you would simply modify the HeroCard object that you are adding to the carousel card.
For example, to add a border to the selected hero card, you would add the following code to the HeroCard object:
Border = new CardBorder() { Color = "blue", Thickness = 2 }
To change the text color of the selected hero card, you would add the following code to the HeroCard object:
TextColor = "red"
You can also use a combination to highlight the selected hero card in the way that best suits your needs.
Please click Mark as Best Response & Like if my post helped you to solve your issue.
This will help others to find the correct solution easily. It also closes the item.If the post was useful in other ways, please consider giving it Like.
Kindest regards,
Leon Pavesic
(LinkedIn)
- LeonPavesicSilver Contributor
Hi Lakshmi_145,
you can try this solution for highlighting the selected hero card in Bot Framework using a carousel card:
// Create a carousel card. CarouselCard carouselCard = new CarouselCard(); // Add the hero cards to the carousel card. carouselCard.Cards.Add(new HeroCard() { Title = "Can we highlight the selected hero card?", Subtitle = "This is the selected hero card.", Images = new List<CardImage>() { new CardImage() { Url = "https://example.com/thumbnail_image_1.png" } } }); // Highlight the selected hero card by changing its background color. carouselCard.Cards[0].BackgroundColor = "yellow"; // Send the carousel card to the user. await turnContext.SendActivityAsync(carouselCard.ToAttachment());
This solution will create a carousel card with two hero cards. The selected hero card will have a yellow background, which will make it stand out from the other hero card.
You can also highlight the selected hero card by adding a border or changing its text color. To do this, you would simply modify the HeroCard object that you are adding to the carousel card.
For example, to add a border to the selected hero card, you would add the following code to the HeroCard object:
Border = new CardBorder() { Color = "blue", Thickness = 2 }
To change the text color of the selected hero card, you would add the following code to the HeroCard object:
TextColor = "red"
You can also use a combination to highlight the selected hero card in the way that best suits your needs.
Please click Mark as Best Response & Like if my post helped you to solve your issue.
This will help others to find the correct solution easily. It also closes the item.If the post was useful in other ways, please consider giving it Like.
Kindest regards,
Leon Pavesic
(LinkedIn)