Botbuilder-js: No documentation on getting form input data from Adaptive Cards

Created on 18 Apr 2019  路  5Comments  路  Source: microsoft/botbuilder-js

Is your feature request related to a problem? Please describe.

When developers think about getting data from a user, a natural first choice is Adaptive Cards. However, when it comes to implementing an Adaptive Card form, developers have to depend on many different GitHub issues and Stack Overflow questions, and the code can be unintuitive at first. Specifically, it felt weird to send a card and then a text prompt:

/* One step in a Waterfall Dialog. */
async promptContactCard(step) {
  // A form with a few Input.text fields.
  const card = CardFactory.adaptiveCard(FORM_CARD);
  // Step 1: Send the form to the user.
  await step.context.sendActivity({
    attachments: [card]
  });
  // Step 2: (Text) Prompt user to complete the form.
  return step.prompt(FORM_PROMPT);
}

It now makes total sense why that should happen, but a sentence or two confirming this in documentation would be helpful. There is also no "best practices" documentation on forms.

Describe the solution you'd like

Add progressive code snippets for developers to easily incorporate into their projects:

  • How to properly send the form as a prompt from a dialog (see code above).
  • How to access the payload in onTurn.

Create a section/page for best practices for collecting form data:

  • Are Adaptive Cards the best option to collect form data?

    • Users can send back any text they want and ignore the form.

    • Which channels support using Adaptive Cards as forms?

  • @Stevenic had a great answer to a similar issue where he explained some common pitfalls. Very simple/readable code that would work great in documentation.
  • If we should not be collecting form data with Adaptive Cards, how should we go about it?
P1 4.5

Most helpful comment

Hello team, I create a sample related to this issue cause I experienced this same issue for a customer project recently.
https://github.com/angie4u/botv4-tips-and-tricks/tree/master/samples/node/01.multi-turn-with-adaptive-card

All 5 comments

@KatieProchilo - Thank you for posting this. I've just begun working on a blog post about Adaptive Cards that should help fill in some of these documentation gaps.

I do have a question for you if you don't mind. Why are you sending the card and then prompting? You say it now makes total sense why that should happen so I'm wondering what the reasoning is. The way I do it is to put the card in the prompt options, just like in @Stevenic's issue that you linked:

const form = MessageFactory.attachment(CardFactory.adaptiveCard(someCard));
return await step.prompt('formPrompt', { prompt: form });

Hi Katie,
We have additionally added a short example showing how to do this onto the article https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-howto-add-media-attachments?view=azure-bot-service-4.0&tabs=csharp#additional-resources In the Additional Resources section. This should be available for you once that update goes live.

Hello team, I create a sample related to this issue cause I experienced this same issue for a customer project recently.
https://github.com/angie4u/botv4-tips-and-tricks/tree/master/samples/node/01.multi-turn-with-adaptive-card

Hello team, I create a sample related to this issue cause I experienced this same issue for a customer project recently.
https://github.com/angie4u/botv4-tips-and-tricks/tree/master/samples/node/01.multi-turn-with-adaptive-card

Hey angie4u,
any solution using C#

Was this page helpful?
0 / 5 - 0 ratings