Customization of MS Teams UI Microsoft bot frmework - botframework

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.

Related

Chatbot with multiselect option (for Microsoft Teams) [duplicate]

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/

Customize adaptive card in microsoft bot framework

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.

Display Charts and Graphs in MS Teams using Microsoft Bot Framework

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.

Need feature like emojiesand feedback to get rendered in every bot responses

I saw there are emojis attached with every message in microsoft teams.
Is it possible to implement the same scenario in webchat. if yes please help me to achieve it.
i also want a code snippet to render feedback thumbs up and thumbs down button in every bot response.
i need an explanary code snippet using javascript or jquery and a small demo(if possible).
The WebChat is easy to extend, thus your scenario should be possible. There is an example that is close to your needs.
Have a look at the WebChat documentation, sample 09.customization-reaction-buttons. (demo).
Introduces the ability to create custom components for Web Chat that
are unique to your bot's needs. This tutorial demonstrates the ability
to add reaction emoji such as 👍 and 👎 to conversational activities.

Show formatted HTML Content to Microsoft Bot User

Is it possible to show formatted HTML Content inside a Bot Card/Attachment?
In this Case, we retrieve the content field of a Dynamics 365 CRM Knowledge Article which is in HTML Format and want to show it to the bot user.
Most of the channels in the Bot Framework don't support HTML rendering. You may refer to this issue: Can a .html file be rendered in cards and HTML should be sanitized in messages.
One alternative way is that to extract information from your html and create cards to show them, to create cards in Bot Framework, please refer to the official Rich Cards Bot Sample for .NET SDK / Rich Cards Bot Sample for node.js SDK.
Another approach is that we use markdown to make a hyperlink to your html.
For example, in C#, you can simply code like this:
var text = #"[Google Search](http://www.google.com)";
await context.PostAsync(text);
But markdown is not supported by all channels too, you may refer to this Bot Framework markdown support by channel for more information.

Resources