I am working on microsoft bot framework and I need to style the adaptive cards. But I am facing some challenges because in json file, I am unable to get the styling attribute. So, please suggest how I'll do this.
the style of Adaptive Cards is defined by the App the card is shown in. If you are using Bot Framework for like MS Teams, MS Teams defines the look and feel of a card. In the JSON layout you can select color for a button in terms of "Danger" or "Normal" but the actual color is defined by the host.
If you are showing cards in your own app however, you can define the layout by changing the host config. (see here for details : https://learn.microsoft.com/en-us/adaptive-cards/rendering-cards/host-config)
Only the rendering app can change the styling of cards.
Hope that answers your question.
Related
We have a chatbot which interacts with user based on related queries provided as buttons. But the issue here is he can only select one query through button. So I wanted a way through which user can select multiple query from dropdown or checkboxes. Upon searching I cam across this link:
"Allow users to multiselect option in BotFramework"
Now this is something which can help me, but I wanted to confirm that the adaptive card c# bot framework in used in the link can is compatible with Azure bot services or not ?? Can I use this Adaptive Card botframework in Azure bot services ?
I am noob in this and just started with chatbots and all so any suggestion will help or if there is any other better way to implement multi-select options then it will do as well.
Adaptive Cards have little to do with the Azure Bot Service. When it comes to whether or not Adaptive Cards are supported, that is entirely determined by the front end because that's where an Adaptive Card renderer would be. In the case of chat bots the front end would be a chat platform, which the Bot Framework calls a bot "channel." It's important to understand that a lot of bot behavior is channel-specific, and so you need to consider what channel you're using. The two main Bot Framework channels that support Adaptive Cards are Microsoft Teams and Bot Framework Web Chat. You can see an official list of platforms that support Adaptive Cards here: https://learn.microsoft.com/adaptive-cards/resources/partners
If you're using a channel that doesn't support Adaptive Cards, there may be some other channel-specific feature that allows users to select multiple options, such as Slack's block kit. If there isn't, then you may have to design the bot to gather information through a dialog. This could be complicated, but the FormFlow library might help. If you build your own dialog then there's no reason it couldn't still use buttons. You could have a submit button that the user clicks after they've clicked the other buttons, though this might require some more advanced bot development skills.
If you'd like to know more about Adaptive Cards, please have a look at my blog post: https://blog.botframework.com/2019/07/02/using-adaptive-cards-with-the-microsoft-bot-framework/
We have a chatbot which interacts with user based on related queries provided as buttons. But the issue here is he can only select one query through button. So I wanted a way through which user can select multiple query from dropdown or checkboxes. Upon searching I cam across this link:
"Allow users to multiselect option in BotFramework"
Now this is something which can help me, but I wanted to confirm that the adaptive card c# bot framework in used in the link can is compatible with Azure bot services or not ?? Can I use this Adaptive Card botframework in Azure bot services ?
I am noob in this and just started with chatbots and all so any suggestion will help or if there is any other better way to implement multi-select options then it will do as well.
Adaptive Cards have little to do with the Azure Bot Service. When it comes to whether or not Adaptive Cards are supported, that is entirely determined by the front end because that's where an Adaptive Card renderer would be. In the case of chat bots the front end would be a chat platform, which the Bot Framework calls a bot "channel." It's important to understand that a lot of bot behavior is channel-specific, and so you need to consider what channel you're using. The two main Bot Framework channels that support Adaptive Cards are Microsoft Teams and Bot Framework Web Chat. You can see an official list of platforms that support Adaptive Cards here: https://learn.microsoft.com/adaptive-cards/resources/partners
If you're using a channel that doesn't support Adaptive Cards, there may be some other channel-specific feature that allows users to select multiple options, such as Slack's block kit. If there isn't, then you may have to design the bot to gather information through a dialog. This could be complicated, but the FormFlow library might help. If you build your own dialog then there's no reason it couldn't still use buttons. You could have a submit button that the user clicks after they've clicked the other buttons, though this might require some more advanced bot development skills.
If you'd like to know more about Adaptive Cards, please have a look at my blog post: https://blog.botframework.com/2019/07/02/using-adaptive-cards-with-the-microsoft-bot-framework/
I recently saw the update in ServiceNow Bot in MS Team. The Activity view is evenly displayed and justified properly. How is this customization possible ?
Thanks for the idea
It looks to me that they're sending an Adaptive Card instead of a regular text message, but just one that doesn't have anything other than plain text in. So although Adaptive Cards can have rich content, these just look like better formatted plain text.
I am currently working on a bot built using MS Bot Framework and Ii'm looking for a solution to display charts (i.e. pie charts, etc.) inside MS Teams using Bot Framework. The goal is to get data from a SQL database, process it to form a chart and send it as an attachment or adaptive card to MS Teams.
Your question is a bit vague - I'm not exactly sure what you're asking for exactly, but maybe this can help: I can think of 3 possible ways to do this:
1) Generate your graph programmatically, e.g. in C# (there are a bunch of possibly libraries for this), save it to a temporary location (e.g. Azure blob storage) and then embed the link as a message from the bot
2) same as above, but insert it into an adaptive card (not required, but maybe if you want to send other things like text message etc.
3) Create a Tab to go along with your bot, which is basically a web page you host somewhere, that shows the graph using, for example, a javascript library. The tab appears along the top in the bot's conversation with the user, and you can have an adaptive card with a button that deep links to the tab, for instance.
Which approach you choose might depend on the size of the chart, whether it needs to be interactive, and I'm sure other possible factors. There are also other possible ways to tackle this I'm sure, but these are hopefully some good ideas/starting points.
I was going through the documentation for adaptive cards, and I had a few queries:
There are certain capabilities that I am looking to target through Adaptive Cards, across channels (Webchat, Bing, Skype, Facebook Messenger). These include:
Showing a carousel of cards within the platform
Taking input from user within the card to provide an input/edit experience .
Action buttons as part of card, to perform an action (e.g. opening a webpage) when clicked.
I believe that most of these actions are available for Webchat, Bing, Skype, Microsoft Teams. Is there a way to accomplish this for channels like Facebook and Kik using adaptive cards? What is the level of customization required from the same?
Also, is Carousel supported across channels?
Thank you for the help!.
For the Carousel question, see #kienct89 comment: you have samples of Carousel display in https://docs.botframework.com/en-us/channel-inspector/channels/Facebook?f=Carousel&e=example1.
For the Adaptive cards, see the Visualizer on http://adaptivecards.io/visualizer/ and you will face the problem that taking input is not supported for Facebook and Kik for example (only Bing and Webchat have the possibility for input in their sample).