Sometimes you just want something different then what is possible out of the box. We have a requirement where a client wanted the choices in Power Virtual Agent presented vertically instead of horizontally. Luckily we are working on a platform which helps us achieve such requests. We use the Bot Framework Composer to create a dialog. And with some engineering we can even make such a dialog reusable for the entire bot!
With the new authoring canvas now in preview the steps below are soon no longer necessary. See how to add Vertical Buttons in this blog.
With Power Virtual Agent you can ask a multiple choice question. With the question you can present options for the user to choose from. These choices are presented in the window horizontally. If these extend the available screen room they are scrollable. However this hinders the user choosing the correct option. Consider the following options:
- Account question
- Order information
- Store information
- Other
If only option 1 or 2 are shown, the user might not understand it can ask for “Store information” or “other” questions. Presenting the buttons vertically makes perfectly sense.
Extending Power Virtual Agent
With Bot Framework Composer we can extend what’s possible out of the box. We can present the user with an adaptive card for example. However this is a bit too much for this use case. Creating a dialog to show choices vertically is fairly easy in the Bot Framework Composer. This tutorial shows how to create a dialog to do exactly that. However this way it is not possible to use the answer from the Bot Framework dialog inside PVA. Also the questions are hardcoded.
I want to create a dialog which is reusable for multiple dialogs in our Power Virtual Agent. For this to work we first need to define 3 global variables in Power Virtual Agent. We can use these variables in the Bot Framework Composer. Sadly you have to do this using a workaround. You can only create variables when capturing answers or by using a Power Automate Cloud flow.
Let’s create a flow inside our dialog which returns 3 variables. One for the question, one for the multiple choice options and one to capture the answer from. Because we will use this Cloud Flow in other dialogs too. it has the benefit that the variable names are already correctly defined. This will make it easier to use in subsequent dialogs. Be sure to set the output variable to Bot. This will allow the Bot Framework Composer dialog to use the variable.
Bot Framework Composer to the rescue!
Now we create the Bot Framework Composer dialog. I will not go too much in detail as the documentation does this a lot better than I can. In the dialog we will ask a multiple choice question. Instead of typing the question in the Bot Responses window we will put in
${virtualagent.AgentQuestion}This is the variable we defined in Power Virtual Agent which we can use inside the Bot Framework Composer. Not only can we use variables defined in Power Virtual Agent, we can also update them.
On the User Input tab for Property we will type:
virtualagent.UserResponseNote that this is without the $ and brackets. Which is not how variables are normally declared inside the Bot Framework Composer.
Further down on the User Input tab on the option List Style we choose heroCard. This will present our buttons vertically instead of horizontally.
Finally for our Array of Choices we choose Write an expression and put in our final variable we defined in Power Virtual Agent:
=${virtualagent.AnswerArray}
Vertical Buttons just look so much nicer!
And that’s it for the Dialog. We can publish this into our Power Virtual Agent. Inside our authoring canvas, after our flow, we can redirect to our new dialog. Testing this conversation gives us vertical buttons!
I think vertical button alignment should be available to choose inside Power Virtual Agent out of the box. However it is great that we can extend Power Virtual Agent with the Bot Framework Composer. And with some engineering we can create a dialog which is reusable across your entire bot.
Can you please show the steps to create reusable dialog across the entire bot
One request – If you can show how to achieve more than one option using adaptive cards, bot framework and power agent, that would be great
Hi Desmond,
Sorry for net getting back to you earlier, I manually approve and reject comments because of all the spam coming through to the front-end otherwise.
I currently do not have any plans in creating Power Virtual Agent content. However you might be interested to know that things like you requested should become easier in the near future.
Please refer to this post about what is coming:
https://powervirtualagents.microsoft.com/en-us/blog/whats-new-the-evolution-of-power-virtual-agents/
Hi Ben,
Is there any limitation for multiple choice options? because the option was not display If I created more than 60 options and after I published it.
Thanks in advance.
Hi Aditya,
I’m not sure about the technical limit, but concerning the user experience I would definitely try to keep it below 6 buttons! You probably don’t want the user to feel overwhelmed when having to make a choice.
yes you’re right. but in my case, for example, there is table with column “member name”, “city”, “country”. the multiple choice option is used to accommodate list of “member name”, so we can find out the city or country after we select one of these options. which can be more than 50.