Microsoft 365 Community Adaptive Cards, 20 Mar 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Building Microsoft Teams tabs with Adaptive Cards

Description

In this 17-minute developer-focused demo, Ramin Ahmadi’s solution calls the Microsoft Search API to search resources. Build tabs using ready-made UI building blocks for native UI on Desktop/Web/Mobile. Use Bot for back-end and Adaptive Cards for front-end. Reviews prerequisites like bot development/registration and SSO configuration if login is required. Also covers technology limitations. Step through configurations for app manifest, SSO, App Registration, task modules, use of adaptive card Designer, and more. Tabs with Adaptive Cards are only supported as personal apps.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on February 16, 2023.

Demo Presenter
• Ramin Ahmadi (Content+Cloud) | @raminahmadi1986

Community Call Conversation
• https://aka.ms/Feb16-Demo1

Supporting materials
• Samples – teams-dev-samples | https://github.com/pnp/teams-dev-samples/tree/main/samples
• Documentation - Build tabs with Adaptive Cards | https://learn.microsoft.com/microsoftteams/platform/tabs/how-to/build-adaptive-card-tabs
• Documentation – Configure SSO for your bot | https://learn.microsoft.com/microsoftteams/platform/sbs-bots-with-sso?tutorial-step=3
• Documentation – Overview of the Microsoft Search API in Microsoft Graph | https://learn.microsoft.com/graph/search-concept-overview
• Tool – Adaptive Cards Designer | https://www.adaptivecards.io/designer/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

B

Tabs with adaptive cards I'm going to show you how to use Microsoft search API to search through different resources and display them in an Adaptive card tab within Microsoft teams. uh Just a little bit about me. My name is Ramin Ahmadi I work at content cloud based in London I've been a software developer for a really long time. Since SharePoint 2003 came out and I've never stopped learning and trying new things. You can follow me on social media with the links you can see here now, let's focus on adaptive card tabs.

B

As we know, tabs are just web pages embedded in Microsoft teams. They are simple: HTML, iframe tags that point to domains defined in the app manifest and can be added as part of a channel inside the team group chat or personal app for individual users.

B

So there are a couple of ways for developing Microsoft teams, tabs and- and you can have different tools and Frameworks such as a SharePoint framework. You can use human generator for teams or teams toolkit, and you know you can use your favorite library or framework like react, angular.net or anything allowing you create a web page. But you know there are some consideration using this traditional methods to build tabs and sometimes the tabs, and look and feel native to the rest of the teams. Also, some apps aren't responsive.

B

Therefore they won't work easily on mobile times is another problem, sometimes it's because of the fact that it's embedded in iframe, but that can also open up a host of other constraints depending on how the web page is built and also there are some hidden maintenance and costs that you need to be aware of.

B

But building tabs with adaptive cards on, on other hand, would allow you to build your app with ready-made UI building blocks as simple as drag and drop, and edit UI elements in real time that look and feel native on mobile, desktop and web. Also, you can use a bot as the backend and that what is responsible for accepting requests and responding and sending those adaptive cards back to the tab and render them, and of course you can use a task module, because this is really important if you want to collect some information from the user.

B

So this is a really good way to collect those information. There are some prerequisites that you need to be aware of. You need to be familiar with what development, because this is your backend and also adaptive cards and task module in Microsoft teams. You have to register bot as I mentioned. This is your backend and you have to register bot in Azure and, if needed, this is optional. If you need to use a single sign-on, for example, if you want to use a service like a Microsoft graph API, you have to configure single sign-on.

B

That I will show you in a minute in the demo. Also, there are some limitations, uh so at the moment the page load size is limited to 80 kilobytes. So if you have an Adaptive card more than 80 kilobyte, uh it's not going to render. So if you have a complex, complex application or web app. This is not a good approach for you to use adaptive cards tabs and also there are some limitations around the Adaptive card features.

B

Not all of the features are available, for example action.execute or some of the other adaptive card features uh you. Basically, you cannot get them at the moment, but you know, Microsoft teams and adaptive card team are heavily investing in their future and there are so many exciting features are coming to the Adaptive Card World, such as form, validation, peoplepicare or fellow menu, and so on, actually I'm going to show you one of this feature, which is the people picker in the demo, and also there is no Advanced layout controls.

B

So at the moment all of these cards sent to the tab are rendered vertically. So, if you want to have you know, multi-column layout, it's not possible at the moment, but I'm sure there will be in the future and also only personal Tabs are supported.

B

um So when you build a bot, you are able to cover a number of teams: capabilities such as Bots messaging extensions. You can show dialogues known as task modules, and now you have the tabs. This is all powered by a bot as backend and adaptive card as front before this, you had to spin up a separate web server to host your app and you had to build the front end using a usual set of web tools.

B

So with a single bot backend an Adaptive card, you can power everything in teams, and this is the unified developer experience the that adaptive card based tabs aims to solve.

B

So there are some changes to the app manifest adaptive card. Tabs are rendered when the content, bot ID property, is provided in the static tab definition. But you need to be aware of that. This is only available from manifest version 1.9 or later, and you can use either a Content byte bot ID, which is a specifying the Adaptive card tab or a Content URL, which is specifying a typical, hosted web content type experience. You cannot have both at the same time.

B

So here we say instead of rendering a URL send a message to this spot over here and that board takes care of everything and send back the the Adaptive cards to to get rendered and if you, if you wonder how it works. So when you open a Microsoft teams tab with adaptive cards, it will send an invoke request to your Bot. So this is the payload of that request.

B

It's a tab, fetch a request that is get it gets sent to the board with a bunch of information such as the tab context, conversation some information about the user and the bot receives the request and in return it sends back a bunch of adaptive cars and those adaptive cards get rendered vertically in your tab. uh So this is how it works.

B

I will explain more in the demo, uh so let's go to the uh demo jump into the demo, but before I jump into the demo, as I mentioned in the prerequisite section, uh you need to set up a bot in Azure, so I need to spend a few seconds talking about the configuration, as you can see here, I'm running this spot on a web app hosted in Azure, but uh because for this demo, I wanted to use Microsoft graph I configured a single sign single sign-on by registering an app here.

B

So this is the app I added some permissions, because I want to search through some resources, such as files, events, messages or some SharePoint list items, so that I needed some of this thing. For some of these permissions that you can see here- and there are some other steps that you need to take to set up this single sign-on. So this is really a good documentation you can follow. This is really a step-by-step. You know guide that can help you configure the single sign-on for your Bot.

B

I will share all of these links with you at this demo. uh So back to this. um So this is the application registration also, we need a single sign-on connection, uh so here we have a bunch of service providers that you can use, but for this demo, because I wanted to use Microsoft graph, I use Azure ad V2, so I just set client ID secret. You know token exchange URL and the other properties needed the Scopes that I need for my application. So this is the configuration and everything behind the scene.

B

So if we go to Microsoft teams here, I have the app running, and this is how it looks like when you first go to the tab, but before I select, the sign in button I want to show you something: I'm going to open the developer tools panel and in the network panel. If I just refresh this tab.

B

You can see it just send an invoke request to your Bot, so this is the this is some information about.

B

um You know the context about the tab about the current user and everything and in response the bot is sending bad back. This object, which is type of us, so it provides you a signing link, so you can use to sign into the app. So if I now select, this button, I can just sign in and it returns to the tab, and you can see it sends another invoke request to your Bot and Bot. In response, we send a bunch of adaptive cards for this sample.

B

uh It's just three adaptive cards, so the first one is this one at the top, which displays some information about the current user. The image the the sign out button, this one, you can search through different resources in Microsoft 365 through this drop down control.

B

So here, for this is a button that, if you click it just invoke a task module which I said this is a just a dialogue and if you see in the developer panel in the network panel, it's basically it's a request of type task fetch. So if I go to the payload you can see here. This is a task. Fetch is send it to a bot and bought for your return.

B

This adaptive card task module and a user can interact with this and submit, and if you just you know, send another request to the bot- and here we see some of the results. So if I just close this and if I just search for something like concern, if I just say, okay go through all of the files and select search. This sends another request of type tab submit with some data.

B

So the data here is that the resource type and also the keyword that I just put here and the parts use Microsoft graph API to search through all of the files and find everything contains this keyboard. And you can see the results here and also I can filter it.

B

Here so this is the people picker I was talking about it's one of the features you get from the Adaptive card without needing you know, using any library or a framework, and if I select this and just press submit, you can see just filter everything, and these are the files created by Helen.

B

Also I can search different resources and the good thing about adaptive card is so you see each time I send this request. It returns a different adaptive card with different UI, with different icon, different set of properties. So if I just search another thing to search the messages, uh you see different UI with different properties, and this is really easy to create.

B

So you can use adaptive card designer, as you can see here, I use this for building this UI elements and you, after that, you get this Json file and you can use it for uh sending back to the tab to get rendered here in Microsoft teams. So this is it. This is a. This is how it works, and after you're done, you can sign out using this button.

B

It will send another request to your Bot and you get signed out and if you refresh the tab, you're back to the signing page, uh so let's just talk talk a little bit about the code, uh so this is this is the code, uh and this is your uh bot class. uh So here we have different uh type of invoke, so we have tab, Fetch and tab submit which are new before the Adaptive quartiles.

B

We didn't have the same work request before it was just you know, task Fetch and task uh submit, which is uh for task modules, uh and now we have tab, Fetch and tap submit.

B

So the first request we get from the bot is tough Fetch, and here we just we can check the token response and if we configure the single sign-on and if the token response is not available, you can send back an Adaptive card with a signing link asking a user to sign in otherwise you can render the card and the cards and just send another um response to to your tab. So here I'm just retaining three adaptive cards and as I said it just did they rendered vertically.

B

uh So these are the three cards, um and also we have the Adaptive cards here uh under resources. There are a bunch of Json files, so so, for example, this is a this- is the one I use for the filter filters task module, and this is how I use the people picker.

B

So this is really easy, as you can see here, you can just say: Okay I want this control to render the users and the user can search through the available users in your turn, on also for different uh resources, I have different UI, so this is for Drive item or the files or for events. I use different, you know, icon different properties and under the services we have different services, but this is the one I want to talk about. This is the graph service API.

B

So when we get the token uh this method, just you know, set the token and it's gonna um basically makes this graph client available. So we can use that, and this is the one that get the user profile photo and there's. This is the one I want to talk about, because this is a. This is the API that we use for search through different resources. So, if I go back to here, this is a really good documentation about Microsoft search API with Microsoft search API.

B

You can search different resources such as messages, events, people, OneDrive and SharePoint, and even you can just com combine some of these resources together and search, for example, all of the OneDrive SharePoint messages and everything and just return the results which is really really useful. So this is how I get the results and send it back to the tab. I think this is the main key that this is the key features of this box, so I think that's it from from my site.

B

If you guys have any questions you can- and this is the useful links that you can see and just use them if you want to learn more about adaptive cards or single sign-on or Microsoft search an Adaptive card designer I'll put it here, thank you or back to you, David.

A

Awesome very, very cool stuff. uh Robin really appreciate, sharing that put the links in the chat, uh some questions there for you, I think as well, and uh good I really appreciate you showing the behind the scenes right, not just that how things work from the code perspective and how it looks in the browser, but really how we understand it's working under uh behind the scenes there backstage so to speak in the code. So really nice work, foreign.