Bot Framework Composer — Adaptive Cards | Part 3

This is the 3rtd part of my Bot Framework Composer blog series. Please take a look at my previous articles:

First part — For Introduction

Second part — For property management

Contents

• The Problem

• Designing Adaptive Cards

• Implementing Adaptive Cards in BF Composer

• The Conclusion

The Problem

As I’m using Microsoft Bot Framework Composer quite heavily to build a support bot, I composed several dialogs, triggers and actions within it. Therefore, I want to take the opportunity to share all my learnings I had with this awesome tool with everyone in a blog series. In this part I want to cover something, which I often found challenging to handle in my bot: designing a rich attachments like Adaptive Cards with dynamically generated submit action items based on HTTP API call response.

Designing Adaptive Cards

Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks.

To create an Adaptive Card it’s probably the easiest way to use the Adaptive Cards Designer as you can design your card using a visual interface rather than writing JSON:

That’s a sample Adaptive Card you’ll notice after loading designer on browser.

We can find three main sections there:

1) Data Editor

2) Card Payload Editor

3) Preview Section

In my case, I’m trying to design a card with dynamic list of submit actions based on the data I’ve from an API response.

To start with:

In Data Editor, I’ve created a simple data structure that’s close to my actual API response.

For example:

In Card Payload Editor, we can author payload json as per the requirement. In my case, I’m trying to design a card with dynamic list of submit button actions along with the data I’ve from an API response.

Hit the review mode to view the card in Preview Section

Implementing Adaptive Cards in BF Composer

Now that we have our card ready, we need to switch back to Composer and edit our Bot responses. Select appropriate dialog and click “Show Code” link to manipulate the .lg file used for the bot.

We may not be able to use the payload json as it is. So, we’ll make necessary changes to that to make it compatible with .lg file.

In my case, I’m trying to construct dynamic submit action list as per the API response. Instead having a hardcoded actions I’ve used foreach to loop through API response to prepare an action items dynamically.

In the edit mode of our Bot responses, we then need to paste in our Adaptive Card JSON like the following:

Now that we’re ready with .lg file changes. Let’s compose sequence of actions and integrate .lg functions with that as shown below. Firstly, you can see HTTP API call action followed by set property action to load API response into a variable “dialog.response”.

Now that everything is in place, we can go back to a concern dialog and compose the action flow. Firstly, you can see HTTP API call action followed by set property action to load API response into a variable “dialog.response”.

Later we’re trying to prompt Adaptive Card we added to our Bot responses to the user to select a particular transaction detail to raise a support ticket.

That’s mainly it and we can go ahead and test our bot to see if the Adaptive Card will be sent upon starting the conversation. Simply click Start Bot from the top right corner and when the bot has been started click Test in Emulator to open up your Bot Framework Emulator:

The Conclusion

Now with this post, we learned how to insert and use Adaptive Cards in Bot Framework Composer and it’s language generation files correct. If you want to know more on how to send other types of cards I would advise to take a look at the docs as they cover all different card types which are supported.

I hope you’ll find is article useful! Happy composing 😀