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 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
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
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:
Note 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:
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.