How to format buttons in Adaptive card in MS Teams. Currently the card is getting rendered as
Our aim is to render it as follows:
Any suggestion are highly appreciated.
This style feature is introduced in adaptive card 1.2 version. But it is currently not working in MS Teams. There is an active bug already logged for this.
Related
I am seeing a green color success message appearing on submit action. It is no problem for me, but I wanted to know which version of MS Teams did the success message start to appear.
I found a doc on the developer Microsoft website, but there is no official word on the MS Teams version.
Also found a question on the Microsoft community, but there is confirmation on version
Any input about the version is appreciated, thank you.
This is not a bug and the new feature of the adaptive card, You can go through the following Microsoft blog for more information about this feature.
Reference:
Five new features enhancing Adaptive Cards in Microsoft Teams
I used rasa to build a bot and connected it to the MS botframework. This gave me a decent embedded bot in MS Teams. However, I want to rewrite part of the default front-end provided by botframework. For example, I want to change the style of buttons, design my own cards, etc. Fluent-UI can be used to design Teams-style elements, but I don't know how to integrate these changes with botframework. Is this feasible? Thank you so much!
Edit: For instance, the default text and Rasa buttons are shown in Teams as the following:
But I want to achieve a nicer interface, like self-designed cards, different button styles, etc:
When it comes to styling options, that's controlled by Teams and is largely outside your control. However, when it comes to layout, you have a great deal of control because Teams supports Adaptive Cards. Read more about Adaptive Cards here:
https://adaptivecards.io/
https://blog.botframework.com/2019/07/02/using-adaptive-cards-with-the-microsoft-bot-framework/
Regarding the RASA part of your question, have a look at this: Does RASA Integration with MS Teams support Adaptive Cards?
To share Content with MS Teams users we can use this "deep link for chat" from the MS Teams documentation:
https://teams.microsoft.com/l/chat/0/0?users=joe#contoso.com,bob#contoso.com&topicName=Prep%20For%20Meeting%20Tomorrow&message=Hi%20folks%2C%20kicking%20off%20a%20chat%20about%20our%20meeting%20tomorrow
But if we need to open a MS Teams Chat without users, it is only working on Android and iOS. For example this link:
https://teams.microsoft.com/l/chat/0/0?topicName=Prep%20For%20Meeting%20Tomorrow&message=Hi%20folks%2C%20kicking%20off%20a%20chat%20about%20our%20meeting%20tomorrow
is not working on Microsoft Windows. MS Teams open, but nothing happens.
The same link works fine on an android phone with MS Teams installed. The App starts, and the message shows at the bottom and on the top users can be selected.
I played around with the link and added some random characters for the parameter "users" -> MS Teams starts, but the message from the parameter "message" is not showing up in the text input field.
We need to open MS Teams without users, because we don't know which users from MS-Teams the user from our system want to select.
So is it possible to open MS Teams "deep link for chat" without users?
This item remains on the backlog in Teams UserVoice,
Microsoft will always focus on customer’s feedback and experience, some new features would be added to the services based on customers' feedback in the future, we also recommend you give your new idea in Teams UserVoice.
I am using Bot Framework .Net SDK v4 adaptive card v1.2. I am using waterfall design to show cards in each step of waterfall. But user is able to click buttons from previously shown cards and this makes the bot look dumb.
How can I disable/Hide adaptive card buttons from previous chat in bot framework in c#?
Web Chat has a sample that shows you how to disable Adaptive Cards on the client side: https://github.com/microsoft/BotFramework-WebChat/blob/master/samples/05.custom-components/l.disable-adaptive-cards/index.html
If you want to disable cards on the bot side then you'll need to use bot state to remember which cards are still clickable. You can read about bot state here: https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-concept-state
I'm working on a library that can do this for you automatically. You can voice your support for the library if you want it to be released sooner. The page currently contains no fewer than 9 links to issues just like yours where people want to disable cards:
https://github.com/BotBuilderCommunity/botbuilder-community-dotnet/issues/137
Version of SDK
AdaptiveCards 1.1.2 from NuGet
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
Issue
This is the adaptive card's JSON that is generated from .NET core
app.
https://pastebin.com/F1nkSdRS
When this JSON is pasted on https://adaptivecards.io/designer/ it renders very well
The text "Some text that should be centered in MS Teams" is placed within a column in columnSet with VerticalAlignment.Center and it renders perfectly fine in App Studio or the web designer. When the same JSON is send in a chat in MS Teams the text is rather with VerticalAlignment.Top as shown on this image
Unfortunately, the outcome you are experiencing is entirely channel specific. In other words, it isn't a deficiency of adaptive cards but rather how the individual channels (Teams, in this case) are rendering the adaptive cards.
For this reason, you should expect results to potentially vary from channel to channel for different objects and actions depending on what it is you are trying to accomplish.
That being said, this could be an issue in rendering but it is one you would have to take up with MS Teams.
I've got an answer into AdaptiveCards Microsoft repository => https://github.com/microsoft/AdaptiveCards/issues/3062
"Hi #siderisltd, thanks for taking the time to file this. verticalContentAlignment was added in v1.1 of the schema, and as of right now Microsoft Teams is running on v1.0, so the property is not understood on Teams yet.
We are working on an improvement to the Designer to include a Target version selector (potentially automatically selected based on the Host app dropdown), which will let you know if you're using newer properties/features than are currently supported by your desired Host app.
#dclaux FYI"