Example 4 - Display a form with a Submit button in Microsoft Copilot Studio

Important

Power Virtual Agents capabilities and features are now part of Microsoft Copilot Studio following significant investments in generative AI and enhanced integrations across Microsoft Copilot.

Some articles and screenshots may refer to Power Virtual Agents while we update documentation and training content.

Note

Microsoft Copilot Studio now supports these features without Composer.

Enhance your bot by developing custom dialogs with Bot Framework Composer and then adding them to your Microsoft Copilot Studio bot.

In this example, you'll learn how to display a form with a Submit button in Microsoft Copilot Studio by using Composer.

Important

Composer integration isn't available to users who only have the Teams Microsoft Copilot Studio license. You must have a trial or full Microsoft Copilot Studio license.

Prerequisites

• Example 1 - Show an Adaptive Card in Microsoft Copilot Studio.
• Example 2 - Display a multi-select options list in Microsoft Copilot Studio.
• Example 3 - Use Bing Search as a fallback in Microsoft Copilot Studio.

Create a new trigger

1. In Microsoft Copilot Studio, open the bot from Example 3. If you haven't completed Example 3 yet, see Use Bing Search as a fallback in Microsoft Copilot Studio.

2. Open your bot in Composer. For instructions on how to do so, see Getting started with Bot Framework Composer.

3. In the bot explorer, go to the main dialog. Select More options (...) then select Add new trigger.

4. In the Create a trigger window:

   1. For What is the type of this trigger?, select Intent recognized.

   2. For What is the name of this trigger?, enter StartTrial.

   3. For Trigger phrases, copy and paste the following:

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

   4. Select Submit.

   

5. Go to the Bot Responses page, select Contoso Meal Delivery Service, then select Show code.

6. Copy and paste the following into the code view:

   # 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"
   }
   ```
   

   Every input field in this Adaptive card has a unique ID: Name, Address, and Weeks.

   

7. Copy and paste the following code into the same code view:

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

   

Add conversation logic

1. Go to the Create page and select the StartTrial trigger.

2. On the authoring canvas, select Add (+), Ask a question, then Text.

3. In the properties pane, under Bot responses, and select Show code.

   Warning

   Adding the expression in the next step to the response editor instead of the code editor will result in the bot responding with raw JSON instead of an Adaptive Card.

4. Copy and paste the following expression:

   - ${AdaptiveCard_StartTrialForm()}
   

   

5. Select the User Input tab in the properties pane, then do the following:

   1. For Property, enter user.name.
   2. For Value, enter =turn.activity.value.Name.

   

6. On the authoring canvas, select Add (+), Manage properties, then Set properties.

7. In the properties pane, do the following:

   1. Under Assignments, select Add new to add a Property box and a Value box.
   2. For Property, enter user.address
   3. For Value, enter =turn.activity.value.Address.
   4. Select Add new a second time to add another Property and Value.
   5. For Property, enter user.weeks.
   6. For Value, enter =turn.activity.value.Weeks.

   

8. On the authoring canvas, select Add (+) then Send a response.

9. In the response editor, copy and paste the following:

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

   

10. On the authoring canvas, select Add (+) then Begin a Microsoft Copilot Studio Topic.

11. In the properties pane, for Dialog name, select End of conversation.

    

Test your bot

1. Publish your Composer content to make it available in your Microsoft Copilot Studio bot.

   Important

   Selecting Publish in Composer makes the changes available for testing, but doesn't automatically publish your bot.

   Publish your bot in Microsoft Copilot Studio to update your bot across all the channels it's connected to.

2. Go to the Microsoft Copilot Studio Topics page to see your new StartTrial topic.

   

3. Open the Test bot pane and make sure Track between topics is turned on. Enter the message How do I sign up for a trial? to start your conversation.