CODEWITHSUNDEEP
node.jsbotframeworkadaptive-cards
Justin
Justin

Reputation: 13

Clickable HeroCard images

I can't seem to find any documentation or forum answers to making an image in a HeroCard clickable. I want to be able to click the image and perform the same imBack() action as I would with a button.

Upvotes: 0

Views: 1290

Answers (2)

Kunal Mukherjee
Kunal Mukherjee

Reputation: 5853

You can make the Hero card's image to go that link by using the Tap property of the HeroCard.

Posting some sample code in C#:

using System;
using System.Threading.Tasks;
using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Connector;
using System.Collections.Generic;

namespace Bot_Application2.Dialogs
{
    [Serializable]
    public class RootDialog : IDialog<object>
    {
        public async Task StartAsync(IDialogContext context)
        {
            context.Wait(ConversationStartedAsync);
        }

        public async Task ConversationStartedAsync(IDialogContext context, IAwaitable<IMessageActivity> argument)
        {
            IMessageActivity reply = context.MakeMessage();

            HeroCard heroCard = new HeroCard()
            {
                Title = "I'm a hero card",
                Images = new List<CardImage>
                {
                new CardImage(url: $"https://www.google.org/assets/static/images/logo_googledotorg-171e7482e5523603fc0eed236dd772d8.svg")
                },
                Tap = new CardAction()
                {
                    Value = $"https://www.google.co.in/",
                    Type = "openUrl",
                }
            };

            reply.Attachments = new List<Attachment>
                {
                    heroCard.ToAttachment()
                };

            await context.PostAsync(reply);
        }
    }
}

enter image description here

Upvotes: 3

Ezequiel Jadib
Ezequiel Jadib

Reputation: 14787

It's not possible with a HeroCard. You might want to explore AdaptiveCards which allows that.

Upvotes: 0

Related Questions