Displaying rich responses in Power Virtual Agent Chat bot using Adaptive Cards

By | October 11, 2021

In the earlier article we integrated PVA with an external API using Power Automate HTTP connector. The response returned by the API was displayed in simple text format to the user.

In this article we will explore displaying rich responses using Adaptive Cards. We will extend our earlier example and continue to use the Azure Maps API, this time we will request Weather details of the requested postal code and display the weather card as a response from the bot

1Power Virtual Agent Chat bot

To design responses using Adaptive Cards, we need to use the Bot Framework Composer. This downloads an app that needs to be installed locally on your machine and you can then connect to the PVA bot designed using the PVA canvas designer to add the Adaptive Card response.

Navigate to your topics list and choose the Open in Bot Framework Composer option.

Power Virtual Agent Chat bot

This will help you download the Bot Framework Composer if you do not already have it. It is available for Mac as well as Windows.

After install, it will prompt you to login to your azure account. Login with the same credentials that you have used to login to PVA environment and design your chat bot.

Provide a folder location to download the bot locally to work on.

Power Virtual Agent Chat bot

For this exercise I have referred to this doc and made modification as necessary for my example.

Steps to add the Adaptive Card Dialog using Bot Composer

1. Click Add Dialog in the Create tab of the composer IDE

Power Virtual Agent Chat bot

2. Name your dialog – in this example I have named it LocationDetails.

3. Next let us move to designing the response in Adaptive Card Designer at Designer | Adaptive Cards

4. There is already a weather sample adaptive card design available, I have used the same one and altered it to my needs

Power Virtual Agent Chat bot

In this card we will display the following information

  1. Place
  2. Date
  3. Temperature
  4. Weather summary

5. Once your card is ready, switch to the bot composer and navigate to Bot Responses tab and choose the dialog that you just created earlier in the step. In my case it was named Location Details. Click on Show Code to switch to code view where we will add our adaptive card design.

Power Virtual Agent Chat bot

6. In the code view add a function as shown below. Make sure to follow the same syntax including the second and third line shown below

# adaptivecardjson_location(location,day,temp,phrase)

– “`

“`

We are going to pass 4 parameters to our function, these are the 4 details that we are to show in our adaptive card.

7. Now go back to your Adaptive Card designer and copy your card payload using the ribbon button available

Power Virtual Agent Chat bot

8. and paste it between second and third line of the function as shown above. Note the payload is JSON format and should include the {}

Power Virtual Agent Chat bot

9. Our next step is to modify this JSON payload to refer to our function parameters for the actual values to be displayed. In the above example, you can see I have replaced the text for location block to refer to the parameter “${location}”. This is the syntax please follow the same. Since it is JSON object make sure to have all the references enclosed in double quotes as shown in the screen above.

10. The function to return adaptive card JSON is ready. Now add the following function at the end of this one. This creates an activity that can be invoked. This function again accepts the 4 parameters that it passes as it to the Adaptive Card JSON function created earlier.

# AdaptiveCardLocation(location,day,temp,phrase)

[Activity

Attachments = ${json(adaptivecardjson_location(location,day,temp,phrase))}

]

11. With this done, switch to the Create tab in the bot composer again to edit the dialog that we had added.

Power Virtual Agent Chat bot

12. In the BeginDialog canvas click on the + icon to add the “Send a Response” action

Power Virtual Agent Chat bot

13. Switch to code view of this action

Power Virtual Agent Chat bot

14. It supports intellisense and will list out all functions defined. We need to choose the function that we created to ad the activity in step 10 above. In my case that was AdaptiveCardLocation

Power Virtual Agent Chat bot

The expression should look as follows

Power Virtual Agent Chat bot

15. Now we need to replace these parameters with references from variables defined in PVA chatbot. Yes, we can pass all information from chatbot to this action so that it could be used later down when displaying the adaptive card.

16. We will create the variables in PVA with the same names. You can refer them here directly by adding virtualagent prefix as shown here

– ${AdaptiveCardLocation(virtualagent.City, virtualagent.day, virtualagent.temp, virtualagent.phrase)}

17. With this we are done with the changes required in the Bot composer. We can now publish this update back to PVA. Navigate to the publish tab in bot composer, choose the bot and publish it.

Power Virtual Agent Chat bot

18. When you look back at your topic listing in PVA you will notice a new topic added to the list. This is the dialog designed in bot composer.

Power Automate Flow

19. Let us now extend our Power Automate flow designed in the earlier article to also request weather details from Azure Maps and then return this back to the PVA chat bot.

Steps to modify Power Automate Flow to request weather details from Azure Maps

We will add a new flow step that makes an HTTP request this time to request weather details

Power Virtual Agent Chat bot

We got the lat/long codes that is required for this request from our earlier request where we requested location details of the given zipcode.

Once again use ParseJSON step to format the response the returned by the http request.

The return values step is modified to return the additional information on temperature, date and weather summary

Power Virtual Agent Chat bot

With this our changes to flow are done. We can now move back to PVA. PVA does not automatically refresh the flow references to reflect the updates made to the flow. We need to delete the step and add a new step again

Power Virtual Agent Chat bot

We now need to make a change to these power automate output variable listed here. By default these variable are only available within the topic in which they were defined. In our case however, we noticed that the dialog from Bot Composer was not added to this topic but instead added as a new topic. And you also remember that we were referring to all of these PVA variables using “virtualagent.temp” references. We therefore need to edit these variable to be available across topics.

To do this click on the variable to bring up the Variable Properties pane

Power Virtual Agent Chat bot

Modify the Usage to Bot, which will make the value of this variable available in the other topic as well once it has been set.

Next simply add the step to call the bot composer topic

Power Virtual Agent Chat bot

This is what your final bot flow looks like

Power Virtual Agent Chat bot

Now when you test the bot, you will get the following result

Power Virtual Agent Chat bot

Adaptive Card extremely powerful markdown language to provide rich message cards and now can be used with Power Virtual Agents as well.

SharePoint Security Sync

Leave a Reply

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