Handling submit action from Adaptive Card in Waterflow dialog in WebEx

Question

I'm using Microsoft’s Bot Framework v4.0 for Webex channel, and nearly everything works, with the exception of using an adaptive card within the waterfall dialog.

There is a similar Stackoverflow issue here: How to retrieve Adaptive Card's form submission in subsequent waterfall step

In my case instead of a text prompt being used to convert to text, it is a drop down combo box with a list of items. The user selects an item from the list and clicks “Submit”, and this is done outside the waterfall dialog step that prompts the user for the selection.

The issue is after the user clicks submit, there is no way to get back into the waterfall steps, unless the user types something, which brings the whole idea of “Why even use an adaptive card, if you can instead use a prompt with a list of numeric choices?” Also, when a prompt is added after the adaptive card is displayed, it feels like it would just confuse the user.

Is there a way to return control back to the waterfall dialog once it steps out to present the user with an adaptive card? I’ve tried using a NextAsync to help things along, but all that does is immediately step to the next waterfall step, which means it didn’t get the user’s choice.

Answer 1

My method is a little clunky (and also in nodejs, but I think you'll be able to convert) but I think it works ok. Essentially I display the card and then follow it with a text prompt that just says waiting for selection.... You'll need a validator as well. The Action.Submit will generate an object, and you'll want to make sure you're getting an input from the card and not a manual input. My card only has a single field for Date, but this should work the same for any number of Input fields.

So displaying the card and prompt looks like this:

        await step.context.sendActivity(CardHelper.datePicker());
        return await step.prompt(DATE_PROMPT, `*waiting for selection...*`);

And the validator looks like this:

    async validateDateCard(prompt) {
        prompt.activeDialog = await this.userDialogStateAccessor;
        prompt.context = await prompt.context;
        const input = prompt.recognized.value;
        if (input.match(/{.+/g)) {
            return true;
        } else {
            await prompt.context.sendActivity(`Please use the calendar widget above to enter the date.`);
            return false;
        }
    }

I understand your concern about confusing users with another prompt after the card, but I think done in this way it works fine. Here's an example of the prompt in action:

If I try to type in a date manually, it will reprompt to use the widget. Like I said, it's a bit clunky, but if you must use adaptive cards for your prompts this approach has worked well enough.

I will say that in general, I've found just prompting in sequence, with Choice Prompts where you would use drop downs, works better. But if you have a ton of inputs, a ton of options in drop downs, or data types that you want to standardize (e.g. date selection), cards are sometimes still the best option.