Example 2 - Display a multi-select options list 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 multi-select list 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.

Display a multi-select options list

Using Composer, you can create a multi-select options list to be used in your chatbot.

Open the Power Virtual Agents bot used in Example 1 and on the left-hand menu, select Topics. Select the down-arrow symbol next to + New topic, and then select Open in Bot Framework Composer to open the bot in Composer.

While on the Create tab in Composer add another Bot Framework dialog. Name your new dialog DailySpecials in Composer.

In your new DailySpecials dialog in Composer select the BeginDialog trigger to open the Authoring canvas. Go to Manage properties and select Set a property to create a new Composer property in the dialog. Set the Property field to the following on the right side Set a property pane:

conversation.days_array

In the Value field on Set a property, change the type to [] to indicate that this property is going to be an array. Enter the following data into the Value field to create an array populated with days of the week:

["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

Next, go to the Bot Responses tab in Composer and select DailySpecials. Select Show code and add the following template to the Bot Responses tab for DailySpecials to create daily offers for all the days of the week:

# DailySpecials(day)
- SWITCH: ${day}
- CASE: ${0}
    - All tofu meals are 10% off on Sundays!
    - Every Sunday, all tofu entrees are 10% off.
- CASE: ${1}
    - All steak options are 10% off on Mondays!
    - Enjoy your Monday with a special offer of 10% off on all steak dishes!
- CASE: ${2}
    - All the chicken meal options are 10% off on Tuesdays!
    - Tuesday special is 10% off on all the chicken dishes!
  - CASE: ${3}
    - All the chicken and tofu meal options are 10% off on Wednesdays!
    - Wednesday special is 10% off on all the chicken and tofu dishes!
  - CASE: ${4}
    - On Thursdays, get a free delivery in Seattle, Bellevue, and Redmond on all orders over $80!
    - Thursday special is a free delivery on orders over $80 in Seattle, Bellevue, and Redmond.
- CASE: ${5} 
    - Friday special - get a 10% discount on all dishes and delivery is free on all orders over $80!
    - Every Friday, we offer 10% off on all meals and a free delivery on orders over $80!
- CASE: ${6}
    - On Saturdays, we have a free delivery on all orders over $50.
    - Free delivery on all orders over $50 on Saturdays!
- DEFAULT:
    - Holiday special - free delivery anywhere in Seattle, Bellevue and Redmond on orders over $70 today!
    - Holiday Delivery is on us if you are in Seattle, Bellevue and Redmond and your order is over $70 total!

Go back to the Create tab in Composer and select BeginDialog under DailySpecials.

Add a new prompt for user input to this dialog by selecting Multi-choice under the Ask a question menu option.

Enter the following for the Text prompt: Please select a day:

Select the User Input (Choice) action. On the Prompt with multi-choice pane, under User Input, set Property to conversation.day_choice.

Set Output format to index to return the index of the selected option instead of a value.

Next, scroll down the Prompt with multi-choice pane and set List style to heroCard to display our options list vertically.

Select Write an expression for the Array of choices field and set it to use the conversation.days_array property we created.

You have created a multi-choice option list that is based on conversation.days_array and stores the user selection into the conversation.day_choice property.

You can use this conversation.day_choice property to display the daily special for the selected day.

Under the User Input action, add a Send a response action to your DailySpecials dialog. On the Bot response side pane, select Show code. Add the following expression:

- ${DailySpecials(conversation.day_choice)}

In the Bot explorer, navigate to the Power Virtual Agents main (root) dialog. This dialog is the top-level read-only dialog in Composer that you created when you opened your bot in Composer. On the on the actions menu, select the Add new trigger option.

Set the type of trigger to Intent recognized and name it Specials. Add the following trigger phrases for your intent and select Submit.

-what specials do you have
-any special deals
-do you have discounts

A new trigger Specials will be created. Select Begin a new dialog under Dialog management to create a node that can call another dialog. Select to call DailySpecials on the Begin a new dialog side pane:

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, go to the Power Virtual Agents Topics page to verify that your new Composer content has been uploaded correctly. In your Topics list, you can see the new Specials and DailySpecials content that you have created in Bot Framework Composer.

Note

You might need to refresh your Topics page in Power Virtual Agents to see the new content that has been uploaded 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 conversation:

• Do you have any specials?

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.