Hi we are developing chatbots using bot framework and integrating with multiple channels like WhatsApp, Google business messages, Facebook, web, line etc. We were using waterfall dialog before and now we are moving to adaptive dialogs. Can someone help me how to define the list, buttons everything that whatsApp or other channels support in the adaptive dialog lg file. In documentation samples only default cards everything were shown. We are using node js for development and botframework V4.
Note: if you’re building a bot in Node.js then you need to use adaptivecards
Import the module
// Import the module:
import * as AdaptiveCards from "adaptivecards";
// OR require it:
var AdaptiveCards = require("adaptivecards");
// OR if you loaded via CDN, the global "AdaptiveCards" variable
// is already defined and can be used directly
Render a card
// Author a card
// In practice you'll probably get this from a service
// see http://adaptivecards.io/samples/ for inspiration
var card = {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/adaptive-card-50.png"
},
{
"type": "TextBlock",
"text": "Hello **Adaptive Cards!**"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Learn more",
"url": "https://adaptivecards.io"
},
{
"type": "Action.OpenUrl",
"title": "GitHub",
"url": "https://github.com/Microsoft/AdaptiveCards"
}
]
};
// Create an AdaptiveCard instance
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
// Set its hostConfig property unless you want to use the default Host Config
// Host Config defines the style and behavior of a card
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
// More host config options
});
// Set the adaptive card's event handlers. onExecuteAction is invoked
// whenever an action is clicked in the card
adaptiveCard.onExecuteAction = function(action) { alert("Ow!"); }
// Parse the card payload
adaptiveCard.parse(card);
// Render the card to an HTML element:
var renderedCard = adaptiveCard.render();
// And finally insert it somewhere in your page:
document.body.appendChild(renderedCard);
You can refer to Using Adaptive Cards with the Microsoft Bot Framework, Introducing Bot Framework Adaptive Dialogue, and Adaptive dialogs with Bot framework skills sample