Microsoft Teams - Rendering issues of adaptive cards in the Chat - microsoft-teams

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"

Related

change front-end of a MS Teams Bot application

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?

Placeholder is not visible in MS teams message extension adaptive card in Android app

I had built a message extension on Microsoft Teams which opens an Adaptive card.
The placeholder in the dropdown is not visible in case of Android app, but visible for iOS and desktop app.
Please refer the screenshot below:
As per the schema, Input.ChoiceSet don't have the property​ placeholder. However, the issue is tracked by the SDK team on the platform support discrepancy. The desktop client and iOS client have currently hardcoded the default value to be "Select an option" when there is no selection in choice selection. This is by design.

Microsoft Teams bot messaging extension: invoke/selectItem not working as expected

So we are currently building a bot / app for Microsoft Teams and have based our query/search messaging extension on this code sample: https://github.com/microsoft/BotBuilder-Samples/blob/master/samples/javascript_nodejs/50.teams-messaging-extensions-search/bots/teamsMessagingExtensionsSearchBot.js
This works fine on the desktop client of Teams when we post a NEW conversation (selectItem is invoked correctly). When using this for a reply however, after selecting the entry, the reply area just closes and does not render any card... Also, on Teams mobile (latest Android version), selectItem is never called. There is a button to expand the card but it's not working..
I could live with mobile not working as expected, though having it this broken in replies is making the selectItem basically useless..
Thanks
This is a known issue. We already have a bug on this which is being tracked. Thanks!!

Links in previews of messaging extensions in Microsoft teams apps

I've been working on a messaging extension app that goes through some database and gives cards as results. However, Microsoft teams does not seem to let me have more than 50 cards in the preview of the messaging extension. So, I am trying to create an openUrl link directly on the preview as a 50th card, or somewhere the link can be seen on the preview. My first thought was to give the last (50th) card a tap action so it takes users to the webpage I need, but I could not find any examples or helpful documentations I can use. I do not believe teams allows me to have buttons on my preview cards so that might be the only way I can do it. I am using hero cards on my preview. I need help making use of cardActions. I do not know if there are other ways to have links in the preview sections of messaging extensions, so please let me know if there is anything I might be able to use.

Is it possible to create a message extension that allows for picture upload and for mentioning users?

I'm currently trying to create a message extension for a Teams application and was wondering if it was possible to either mention users or upload pictures in the extension message. For the picture, I was wondering if there was a way to either upload an actual image file or at least paste an image into a text box. I was also wondering if it's possible to mention users in a text box or if it's possible to recreate the functionality similar to the 'Praise' app in Teams that has a dropdown search menu for all the users in the team. Thanks!
Yes, You can open a task module from message extension. Provide a field to upload custom image by user. On submit of task module you can display an adaptive card with the uploaded image.
Right now #mentioning a user is available in Adaptive card version 1.2 in developers preview mode.
So you can take user input in the task module and pass it to the adaptive card.
You can refer the post How to add a mention in Teams alongside an adaptive card using Bot Framework

Resources