change front-end of a MS Teams Bot application - botframework

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?

Related

Develop custom Android Power Menu widgets

Is it possible to develop Android 11 widgets that appear on the Power Menu, exactly like Google Pay's card list?
So far I have discovered that there are a few useful guides on Device Controls, a feature that is very well suited for domotics and automation. For example the official article on Device Controls shows a fully fledged Power Menu with credit card swiping and domotics control.
I am interesting in developing a custom open source widget to browse fildelity (barcoded) cards. I have seen that the Quick Access Wallet feature is the one to use to display payment methods as swipable cards, but I have good reasons not to follow that road. First, it is designed for payment applications who hold NFC permissions, and secondarily it will disable Google Pay as default payment application for those who use it (and those who use another payment service will experience the same problem).
And Device Controls are templated and suited to be displayed in the Google Home's designated area.
So I'd like to ask if there are Android APIs to implement a fully customized widget to appear in the power menu. Of course I can kindly ask user for any permission necessary.
I start from the assumption that Google Pay itself is an application developed on top of Android framework, and has little to no special permission/policy-exception/whitelist from the OS, along with other payment applications.
I'd like to ask if there are Android APIs to implement a fully customized widget to appear in the power menu
Not in Android 11, at least in terms of public APIs.
I start from the assumption that Google Pay itself is an application developed on top of Android framework, and has little to no special permission/policy-exception/whitelist from the OS, along with other payment applications.
That is a very generous assumption. IMHO, do not assume that you can do anything that is being done by Google or the manufacturer of the device you are trying.

How to hide/disable adaptive card buttons from previous chat?

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

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.

How to implement an Outlook styled scheduler in Xamarin app?

A Xamarin app that is being developed requires a way of scheduling events. I quite like the look and feel of the scheduler in the Microsoft Outlook app as it has very responsive and intuitive control allowing the user to easily drag and extend their event block over a 24 hour period (see below).
Does anyone know if this was developed using Xamarin, it being a Microsoft product, and also if they have found any code examples of this being implemented in other projects. I know there are premium Xamarin packages out there like syncfusion that have similar solutions but I am not looking to go down that route.
Thanks

Microsoft Teams - Rendering issues of adaptive cards in the Chat

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"

Resources