CODEWITHSUNDEEP
c#botsbotframework
Azmy
Azmy

Reputation: 203

How to Add button to HeroCard and select the value when clicking on it

I have implemented a carousel of Hero Cards to display all the Schedules a perticular Doc can have. In the hero cards i have added a button to select a Particular schedule. Below is the code

private async Task ShowSessionsHeroCard(IDialogContext context)
    {
        var replyToConversation = context.MakeMessage();
        replyToConversation.AttachmentLayout = AttachmentLayoutTypes.Carousel;
        replyToConversation.Attachments = await GetSessionHeroCard(context);
        //replyToConversation.Attachments.Add(GetSessionHeroCard());
        await context.PostAsync(replyToConversation);
    }

    private async Task<List<Attachment>> GetSessionHeroCard(IDialogContext context)
    {
        List<Attachment> list = new List<Attachment>();
        List<CardAction> cardButtons = new List<CardAction>();
        foreach (var sessionDetails in scheduleList)
        {
            string[] session = GetSplittedDetails(sessionDetails);

            hospitalName = session[0]; //Hospital Name: {0}
            availableDay = session[1]; //Available Day: {1}
            appointmentNo = session[2]; // Appoinment No: {2}
            sessionAvailable = session[3]; // Session: {3}

            HeroCard hero = new HeroCard()
            {
                Title = hospitalName,
                Subtitle = availableDay,
                Text = sessionAvailable + appointmentNo,
                Buttons = cardButtons
            };

            list.Add(hero.ToAttachment());

        }

        CardAction getSessionValues = new CardAction()
        {
            Value = hospitalName + availableDay + sessionAvailable + appointmentNo,
            Type = ActionTypes.ImBack,
            Title = " Select Appointment "
        };

        cardButtons.Add(getSessionValues);

        string selectedAppointment = getSessionValues.Value.ToString();
        await GetSelectedAppointment(context, selectedAppointment);

        return list;
    }

     private async Task GetSelectedAppointment(IDialogContext context, string sessionSelected)
    {
        var replyToConversation = context.MakeMessage();
        //replyToConversation.AttachmentLayout = AttachmentLayoutTypes.List;

        string[] result = Utility.SplitSelectedApoitmentString(sessionSelected);
        var heroCard = new HeroCard()
        {
            Title = "Appointment Schedule",
            Subtitle = "These are the Appointment Details",
            Text = "Hospital selected : " + result[0] + "\n" + "Day of Appointment : " + result[1] + "\n" + "Time of Appointment : " + result[2] + "\n" + "Appointment Number" + result[3],
        }.ToAttachment();

        Attachment attachment = new Attachment()
        {
            Content = heroCard.Content,
            ContentType = heroCard.ContentType
        };
        replyToConversation.Attachments.Add(attachment);
        await context.PostAsync(replyToConversation);

    }

My questions are

  1. Am i defining the Button Correctly?
  2. The CardAction getSessionValues is getting some values even before i click on the button. How to avoid that.
  3. How to get the selected card value and pass it to another method.

I cant figure out whats wrong here please help. (Am sure Am doing sumthing very stupid.)

Thanks in Advance :)

Upvotes: 2

Views: 1426

Answers (1)

Ezequiel Jadib
Ezequiel Jadib

Reputation: 14787

It's a bit hard to follow your code and it's not clear who is calling the GetSessionHeroCard method, however, I think you have a misunderstanding about how to work with cards.

The general steps you need to follow when using cards with buttons are:

  1. Create the card, with the card actions
  2. Add the card as an attachment to the reply message the bot will be sending to the user
  3. Wait in X method (it could be on MessageReceivedAsync or in a new method) with context.Wait. This is key because this method is the one that will receive the message with the value once the button is clicked.

You can check the RichCards sample and the Contoso Flowers sample so you can see that in action.

Upvotes: 2

Related Questions