Redirect to Adaptive Card Display Topic
Introduction
Power Virtual Agents come with expanding possibilities and at the same time limitations when it comes to using complex actions and dialogs. However, we can overcome this by using Bot Framework composer and extending the user experience by adding adaptive cards bringing a whole lot more possibilities to Power Virtual Agents.
The custom dialogs that are created using Bot Framework Composer are deployed together with Power Virtual Agents bot content and can be used natively within the bot creation experience of the PVA which does not require any additional Azure hosting.
Let’s see how we can make use of Adaptive cards created using Bot Framework composer within Power Virtual Agents
Scenario
We are creating a Rewards Selection Bot that lets users choose from a selection of gifts. So as to show the image of the gifts to the user, we can make use of adaptive cards and create a table like representation of images as shown below:
Implementation
Let’s get started with the Bot creation by creating a new bot and adding a few trigger words that will invoke the bot conversation.
We have also added a welcome message and show the available images as an adaptive card. However, to show the Adaptive card we will create a new Topic using Bot Framework Composer and redirect the conversation to the newly created topic.
Click on Open in Bot Framework Composer, in case you are working with the composer for the first time, you will get the below prompt
Click on download Composer to install it on the desktop
Once the installation is completed, click on Open Composer which will open the Bot Framework composer. It will let you import the existing Power Virtual Agent Bot as a new project to the Composer.
In the left pane, we can see the existing topics. We will not be able to edit it from the composer. Clicking on it will take us to the Power Virtual Agents for editing.
Create a Dialog
As the first step click on the 3 dots of the root project and click on add a dialog
Specify the name and click on OK.
It will add a new Rewards Dialog to the project
Select Rewards and Click on the Bot icon in the left pane and click on Show code to add Templates which will be used for displaying adaptive card schema using the adaptive card designer .
We have created the needed Adaptive Card in the adaptive card designer as below
Let’s copy the schema to the composer as :
Here # <TemplateName()> is the syntax to define a template and a template can either have a single text value which is represented as
| # TemplateName () -Value In case of multiline values, it is represented with the syntax # TemplateName () – “` <Multi Line Text> “` # RewardsCollection() – “` { “$schema”: “http://adaptivecards.io/schemas/adaptive-card.json”, “type”: “AdaptiveCard”, “version”: “1.3”, “body”: [ { “type”: “ColumnSet”, “columns”: [ { “type”: “Column”, “items”: [ { “type”: “TextBlock”, “text”: “Echo”, “weight”: “Bolder”, “horizontalAlignment”:”center” }, { “type”: “Image”, “url”: “https://adaptivecardsbot.blob.core.windows.net/imagestore/Amazon Echo.PNG” } ], “width”: “stretch” }, { “type”: “Column”, “items”: [ { “type”: “TextBlock”, “text”: “Versa”, “weight”: “Bolder”, “horizontalAlignment”:”center” }, { “type”: “Image”, “url”: “https://adaptivecardsbot.blob.core.windows.net/imagestore/Fitbit.PNG” } ], “width”: “stretch” }, { “type”: “Column”, “items”: [ { “type”: “TextBlock”, “text”: “Kindle”, “weight”: “Bolder”, “horizontalAlignment”:”center” }, { “type”: “Image”, “url”: “https://adaptivecardsbot.blob.core.windows.net/imagestore/Kindle.PNG” } ], “width”: “stretch” } ] } ] } “` |
The adaptive card schema uses the columnset to show the Image which is stored in blob storage in 3 columns
Following this, lets add the Activity that will display this Adaptive Card in the Bot Framework dialog to the same window in Composer
| # ShowRewards() [Activity Attachments = ${json(RewardsCollection())} ] |
Here we are calling the Previously defined Adaptive Card JSON and showing it in the Dialog
Now let’s go back to the Create Tab and select the rewards dialog. Select the BeginDialog trigger and add the Send a response action to the dialog.
Selecting the send a response will open the Right Property Pane, Click on Show code and add the below expression to it so that it will call the Adaptive card and show it.
| – ${ShowRewards()} |
Publish the Bot
Now let’s go ahead and publish the bot so that the Dialog that we have created becomes available as a topic in Power Virtual Agents.
Heading back to Power Virtual Agents, we can see the recently created dialog in the list of topics.
Redirect to Adaptive Card Display Topic
Let’s add a redirection from the Topic that triggers the conversation to the newly created topic so that we display the images as adaptive cards.
Once the Adaptive cards are displayed using the new topic, the control will return to the initial topic. To complete the flow, lets ask the user for his selection of gifts and close the conversation with a Message.
Test the Bot
Now let’s test the bot end to end by triggering the conversation. We can see that from the initial topic, it redirects to the Topic created using Composer and it displays the Images using an adaptive card and returns back to the initial topic to further collect the details.
Summary
Thus, we saw how to plug in an adaptive card to show images to the end-users which is created and published using Bot Framework Composer.
