Example 4 - Display a form with a Submit button in Power Virtual Agents

You can enhance your bot by developing custom dialogs with Bot Framework Composer and then adding them to your Power Virtual Agents bot.

In this example, you'll learn how to display a form with a Submit button in Power Virtual Agents by using Composer.

Before you begin, ensure you read Extend your bot with Bot Framework Composer to understand how Composer integrates with Power Virtual Agents.

Important

Bot Framework Composer integration is not available to users who only have the Teams Power Virtual Agents license. You must have a trial or full Power Virtual Agents license.

Prerequisites

• Learn more about what you can do with Power Virtual Agents.
• Introduction to Bot Framework Composer.
• See how to Extend your bot with Bot Framework Composer.
• Example 1 - Show an Adaptive Card in Power Virtual Agents.
• Example 2 - Display a multi-select options list in Power Virtual Agents.
• Example 3 - Use Bing Search as a fallback in Power Virtual Agents.

Display a form with a Submit button

Open the Power Virtual Agents bot used in the previous examples.

On the left-hand menu, select Topics. Select the down-arrow symbol next to + New topic, and then select Open in Bot Framework Composer.

Select + Add new trigger to add another Bot Framework trigger of type Intent recognized to the Contoso Meal Delivery Service dialog and call it StartTrial.

Add the following trigger phrases and select Submit.

• start trial
• sign up to try
• register to try service

After the StartTrial trigger is added, go to the Bot Responses tab for this Contoso Meal Delivery Service dialog. Switch to Show code view, and insert the following Adaptive Card JSON:

# adaptivecardjson_StartTrialForm()
- ```
{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Register for a meal plan trial:"
        },
        {
            "type": "Input.Text",
            "placeholder": "Please enter your Name",
            "id": "Name"
        },
        {
            "type": "Input.Text",
            "placeholder": "Please enter your Address",
            "id": "Address",
            "isMultiline": true
        },
        {
            "type": "Input.Number",
            "placeholder": "How many weeks",
            "id": "Weeks"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Submit",
                    "style": "positive"
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}
```

Note that every data field in this Adaptive card was given an ID: Name, Address, and Weeks.

Next, add the following Activity below the Adaptive Card JSON:

# AdaptiveCard_StartTrialForm()
[Activity
    Attachments = ${json(adaptivecardjson_StartTrialForm())}
]

Go to the Create tab in Composer and select the StartTrial trigger. Add the Ask a question action and select type Text.

Select the Prompt for text node, then in the properties pane under the Bot response tab, select Show code. Add the following to the code window:

- ${AdaptiveCard_StartTrialForm()}

Select the User Input node. Select the User Input tab. Set Property to user.name and set Value to =turn.activity.value.Name to extract and save the value of the from field Name from our Adaptive card StartTrialForm into user.name.

Your Adaptive card StartTrialForm has two more fields, Address and Weeks. Use the Set properties action to extract them from turn.activity.value and save them to user.address and user.weeks:

Add a Send a Response action to provide a form submission confirmation:

${user.name} - thanks for starting a ${user.weeks} week trial with us! Your meals will be delivered to this address: ${user.address}.

Use the Begin a Power Virtual Agents Topic action to call the Power Virtual Agents bot's End of Conversation topic:

You are now ready to add your Composer content to your Power Virtual Agents bot. Go to the Publish tab in Composer and publish it to your Power Virtual Agents bot.

Once your new Composer content is successfully published, you can now see that StartTrial was added to the Topics page in Power Virtual Agents.

Note

You might need to refresh your Topics page to see the new bot content that has been added from Composer.

Make sure Track between topics is turned on, and test your new bot content by entering the following text in the Test bot pane in Power Virtual Agents to start a bot conversation:

• How do I sign up for a trial?

Important

Selecting Publish in Composer makes the changes available for testing, but does not automatically Publish your Power Virtual Agents bot.

Use the Publish feature in Power Virtual Agents to publish your bot changes to channels.