Adding Vertical Buttons to Power Virtual Agents – Revisited

Shows the finished conversation with 4 vertical buttons and the response added to the variable and posted back in the Test Bot interface of Power Virtual Agents.

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.

Shows a default "multiple choice options" card of Power Virtual Agents
Default Choices Authoring Canvas
Shows the Test Bot interface in Power Virtual Agents. The 4 horizontal choice buttons are not all shown directly
Default Choices not showing all choices

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!

Shows how to change a normal "Ask a multiple choice question" to a Basic card in Power Virtual Agents
Change to Basic Card

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.

Shows where to add buttons to the Basic Card in Power Virtual Agents
Basic Card Add Button

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.

Shows the property pane of the Basic Card in Power Virtual Agents with a new button added called "Choice 1"
Basic Card with Choice 1 Button Added
Shows the Test Bot functionality where we now see 2 sets of buttons. 4 Vertically and 4 Horizontally.
Double Buttons

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.

Shows a Basic card in Power Virtual Agents with both button sets. Highlighting where to delete the Options for user buttons
Delete User Response
Shows the default Multiple Choice Option card for Power Virtual Agents. Now we have no choices and we are presented with an error that the choices are required.
Missing Multiple Choice Options error

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.

Shows how to change a "Multiple Choice Options" card to a User's entire response card
Change to user Entity Response

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.

Shows an error on the condition of the Multiple Choice Card. The error highlights an incompatible type comparison between the missing EmbeddedOptionSet and the variable
Error on the 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.

Shows the formula bar of Power Virtual Agents in a condition expression to change it to the string "Choice 1"
Change condition to Choice 1

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.

Shows the finished conversation with 4 vertical buttons and the response added to the variable and posted back in the Test Bot interface of Power Virtual Agents.
Finished vertical button conversation

2 comments

    1. Hi,
      Sorry for the late response. I missed it as I sometimes get a lot of spam comments I manually reject.
      If you want to change the layout of these buttons: Customization can be done using CSS in the web portal hosting the chat.
      In Teams or other channels I don’t think you can.

Leave a Reply

Your email address will not be published. Required fields are marked *