Input Adaptive Card Form using Bot Framework Composer to PVA

[Julien2]

Hello,

I have a PVA where the users are going to fill an input form that is sent from Bot Framework Composer. After they submit the form, I want to trigger a flow to get the values entered by the users and store them in my SharePoint List.

I am struggling with the following points using the bot framework composer:

1. How can I invoke the flow after the user pushes the submit button from the AC in the PVA? (It's invoking the flow without waiting for the user to fill the AC form)
2. After the user submits the AC form in the PVA, how can I update the AC and show a success message to avoid the user from filling in another form?
3. How can I pass the AC values coming from the form of the user in the body of the POST request in the composer?

I have found the below document but it's not similar to my scenario:

https://docs.microsoft.com/en-us/power-virtual-agents/advanced-bot-framework-composer#example-1--sho...

Please find attached the AC form example and Bot Framework composer actions:

Can someone please explain get back to me (in detail if possible please), and provide an example to achieve/solve the above mentioned?

Any help will be highly appreciated.

Thank you!

[ChristianAbata]

hi @Julien2  I can Imagine this as json so you can get it back using http calls like in PA. Maeby this could helps you Power Automate Tutorial - Approvals + Adaptive Cards + Outlook = Awesome - YouTube

[jordanbardwell]

Did you figure this out? I am trying to do the same, but PVA fails to generate it. Can you share your Adaptive Card JSON?

[Julien2]

Hello @ChristianAbata ,

Thanks for sharing the tutorial, I just checked it out. 

In the tutorial, they used "Outlook Actionable messages" as the type but in this type, there is an action for an HTTP request, and it can’t be used as a type in the composer for the PVA. Whereas in the webchat framework type, we don't have the option of Action.HTTP.

I believe it can be done through the bot framework composer, but I don't know the step-by-step process to configure and handle the points I have mentioned.

@jordanbardwell 

I haven’t had the time to figure it out yet. However, I found something helpful that may solve this issue:

https://github.com/microsoft/BotFramework-Composer/issues/1820#issuecomment-571276631 

Regarding the AC JSON, you can get it from the below link, just add one field for testing:

https://adaptivecards.io/designer/

Let me know if you've tried to follow the steps mentioned in the link I provided.

If it works, it would be highly appreciated if you can post it here in the community so we can help others to follow the same steps.

Thanks,
Julien

[jordanbardwell]

I've read that exact same github issue post and cannot get an adaptive card with input text to render in PVA for the life of me. I've tried the JSON mentioned in there, along with making a dialog that uses the prompt for text input to send the AC in PVA along with the send a response and neither will generate the AC.

[dsutradhar]

Dear @Julien2, I tried going through the steps like you have mentioned.

I am facing a similar issue. I've tried adding a AC from the Bot Framework Composer for a PVA, but the AC isn't rendering on the Chat Window:

I've connected my custom Dialog directly to the Greeting Topic:

In the Bot Framework Composer (BFC), I've created a flow which looks like this:

The AC JSON looks like this:

After multiple attempts, the chat still looks like this:

Please help me if I have missed anything here.

[MarKol · Accepted solution]

This Example #4 might help you to display a multi-line input form with a Submit button in PVA via Composer:

Use Bot Framework Composer to display a form in chatbots - Power Virtual Agents | Microsoft Docs

[Kalok]

I have tried almost everything to display input form as per the given example in example 4 Use Bot Framework Composer to display a form in chatbots - Power Virtual Agents | Microsoft Docs but no luck. Form is not coming.

[MarKol]

@Kalok - you are correct, Example 4 needs be updated to work with the latest version of Composer; the published doc pre-dates the latest Composer version and is now outdated.

Thanks for brining this to our attention; we will update Use Bot Framework Composer to display a form in chatbots - Power Virtual Agents | Microsoft Docs to work with the latest version of Composer.

[MarKol]

@Kalok and @Julien2  - the Tutorial for Example #4 on how to display a fillable form with a Submit button has been updated to work with the latest release of Composer:

Use Bot Framework Composer to display a form in chatbots - Power Virtual Agents | Microsoft Docs