Wait? Didn’t I already have a blogpost about vertical buttons for Power Virtual Agents? Yes, I do, but it is time to revisit! I will show you how to add Vertical Buttons to a Power Virtual Agents question. I will use the new advanced authoring canvas to do so. As you may know, previously we had to use the Bot Framework Composer for this and export the dialog back to Power Virtual Agents. In fact, I describe this solution in my most popular blogpost of the last year.
The new authoring canvas now is in preview. The authoring experience is rebuilt from the ground up. Now we can use a lot of great new features in the authoring canvas directly such as: posting Adaptive Cards, adding rich media like images and videos and even use Power FX throughout! I am excited about this direction. And in my humble opinion, it stays easy to use despite all these new functionalities! Keep in mind all functionality is still in preview and should not be part of your production Bots yet.
Horizontal buttons don’t always work
The problem statement is still the same. When I give the user more than 3 choices to choose from, the default presentation of Power Virtual Agents of those buttons will be horizontal. This is troublesome as it is not always clear that you can choose other items then the first 3. Presenting the choices vertically can be a better fit.
In the Public Preview we now have the ability to add a Basic Card to the question. This was previously part of my Bot Framework Solution too. Let’s see where this takes us!
Now that we have a Basic Card in our question response, we have various options available to us. We can add a title to the card or add an image. For now, let’s focus on adding the buttons vertically. Choose Add buttons.
We want the button to send a message. This message we will capture as a variable and use in our condition statement further along the conversation. The Text property declares what the chat message will contain when you press the button. The Title property is what will be shown on the button. Let’s add the same 4 Choice buttons and see the result.
Unfortunately, we now have a double button set! A row of vertical buttons and a row of horizontal buttons. Let’s see if we can still ask a Multiple-choice question but only using the vertical buttons we want. Deleting all the options for the user will result in a “Missing multiple choice options” error. I obviously expected this, but I was stubborn enough to try anyways.
Change the “Identify” part of the question
This means we cannot use “Multiple choice options” as the question type for our vertical buttons. We can however, work around this by changing the question type to “User’s entire response”. This will capture the response of the user in a variable. The Identify property tells how the Bot should try and interpreter the response given by the user.
Because we started our experiment wrong, and we have changed away from the Multiple-Choice options, all our conditions are broken. Of course, if you start with a User’s entire response as the identify, you can create your own condition.
Let’s change the condition to a formula so we can compare the variable to a string. The formula area is also the place where you can use Power FX for more advance scenarios.
Voila, we now have Vertical Buttons
Save your chatbot and let’s test it in the Test Bot interface. As you can see, we now have Vertical Buttons. We did this without leaving the Authoring Canvas saving a lot of time while building the Chatbot.
The new authoring canvas is great. We get a lot of new features to enhance our Virtual Agent. With these capabilities we can truly create conversational applications. I sometimes was complaining about the lack of features coming to Power Virtual Agents. But seeing this is a complete overhaul of the product, I now understand! I can’t wait for this to get out of preview, so we can use it in production environments too. General Availability should be in the next calendar year.
