Microsoft 365 Community Microsoft Teams, 22 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams Meeting app sample with link unfurling

Description

In this 17-minute developer focused demo – Anuj Gupta steps through how a user is able to share link to an asset in Teams, the link calls app and gets “unfurled” into an Adaptive Card with actions. User sends card via Bot to Recipient. Recipient may click “Review in Meeting” button (action) invoking a task module that creates a meeting for User and Recipient to collaborate. Web App creates side panel tab, task module, authenticates user, calls Graph APIs and deep links. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 22, 2022.

Demo Presenter: Anuj Gupta (Microsoft)

Supporting materials:
• Samples Repo – Link unfurling meeting sample | https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/msgext-link-unfurling-meeting/csharp
• Documentation - Bots in Microsoft Teams | https://docs.microsoft.com/microsoftteams/platform/bots/what-are-bots
• Tools – Bot Framework SDK | https://github.com/microsoft/botframework-sdk
• Documentation - Link unfurling | https://docs.microsoft.com/microsoftteams/platform/messaging-extensions/how-to/link-unfurling
• Documentation - Designing Adaptive Cards for your Microsoft Teams app | https://docs.microsoft.com/microsoftteams/platform/task-modules-and-cards/cards/design-effective-cards
• Documentation - Apps for Teams meetings | https://docs.microsoft.com/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings
• Documentation - Designing task modules for your Microsoft Teams app | https://docs.microsoft.com/microsoftteams/platform/task-modules-and-cards/task-modules/design-teams-task-modules
• Documentation - Create deep links | https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/deep-links

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

Hello: everyone, I'm anish kripta, I'm a software engineer at microsoft, uh we recently added a new sample for meeting apps using compiling and in this session you know we'll cover the important implementation details that will help you build similar scenarios and teams.

A

So, let's get to the agenda I'll, give you a brief overview of the main scenario this sample implements and then we'll look into the platform capabilities. The sample consumes we'll do a live demo of the application and we'll also go through the code and cover important implementation details and if time permits we'll do a live generation at the end. Otherwise, we'll answer the questions or something must be in checked so scenario overview.

A

The sample illustrates a common scenario where a user shares a link to a resource which is a dashboard in the sample with a group of users and they collaborate to review it in a meeting sounds simple right, but let's see how this looks like in microsoft teams.

A

So here you have a user who shares a link to a dashboard with other users ellen and john, and you will notice that as soon as user enters the link, the card is attached to that message with dashboard details, details like a preview image, a couple of action buttons to view or review it in a meeting.

A

Let's see what these buttons do, let's try the review and meeting button. So here a user clicks on the review meeting action which creates a new online meeting and sets up everything for the users by setup I mean you have the app added to that meeting. uh You can also see that the site panel tab where the dashboard that was originally shared, is available for users to look at and then user also automatically joins these meetings.

A

uh If you think about it, there are a lot of manual steps that have been avoided in this book. For example, you don't need to create a meeting by yourself or you don't need to add an application or a tab, or even click, to join that meeting. Everything is done by the app in single click, and this solution is contextual here. That means, if you're doing something like this you're sharing a link to a resource in an ongoing meeting which is pretty common.

A

It sets up the ongoing meeting for review, so you would have the app added to your existing ongoing meeting and also have the tab that points to the exact resource that we're looking at now. There are many platform capabilities that the sample consumes to build the experience uh we'll go over a few important ones, so, at high level the app has a bot which helps in link unfolding attaching an adaptive card to a message and authenticating the user.

A

It also has a web application that powers the meeting site panel tab a task module, helps in authenticating, the user and task module consumes craft apis to set up a meeting and also execute deep links to automatically join a meeting.

A

Let's understand what these capabilities mean. Controlling so apps can provide customers experience when a user shares a link that is associated with them. uh When you say associated apps can define a list of domains uh that are associated with the application. For instance, you see we have a domain property here and we've added one domain over here.

A

It's important to note that you should only add domains that you're in control of so something like a start or um xyz.com, where you don't really own xyz, isn't something that we go through so once you do that you have a capability to send back a collapsed and expanded card. We'll look at what these mean precisely when we go over this and like demo adaptive cards. I'm sure a lot of you are already aware of this. These are platform agnostics, snippets of ui, which are authored in json.

A

So it's pretty easy to author them and then you know, apps and services can openly exchange them when they're delivered to any specific client. uh The json is transformed into native ui that automatically adapts to its surroundings, so be it teams, outlook or office on mobile web or desktop it'll, just work for you and you don't have to worry about the you know: ui elements how they look like in mobile in different aspect ratio. All of that is taken care of for you in the sample.

A

We can see on the adaptive card to attach to the message that user is sending meeting site panel. So in teams you can develop experiences in meetings. In fact, you can integrate tabs parts and missing extensions in each stage of the meeting cycle, which is pre-meeting in meeting or post meeting in sample, we integrate a site panel, uh you can see the site panel over here to you know, let users view the dashboard that was shared them to review.

A

It also sets up uh you know, meeting, which is a pre-meeting stage where we add the app. We add the tab and specific tablet points to the resource that was shared task module. You can create model pop-up experiences in your team's apps with modules. These are really useful to display rich content, or you know when you want to complete a complex task in this screenshot. You see that you have a pop-up experience here, which we call task, module and user.

A

You know the app is trying to get user input, which is you know, relatively complex, to get in a message within a jack, so these come in very handy and they're built using an iframe and desktop or web fuse and mobile. So you know everything is in your control. You can power it with. You know web app and then you can control how you know your elements look like and what kind of input output you want to give to the user, and also this can be launched from almost anywhere.

A

So you can launch them from tabs or bought messages or adaptive cards uh in the sample. We'll see how we launch it from adaptive cards and then also missing extensions, deep links, so you can create links to information and features within teams. When you do so, teams will automatically navigate the users to whatever resource you're, pointing to, for example, you can create a link to a tab or an item within a tab to an existing chat and much more.

A

The sample here executes a date link which lets the user automatically join. The meeting that's created on the fly so now that we've covered teams platform capabilities consumed in the sample. Let's take another look at the scenario which we covered earlier and understand how it works and to end so the same scenario, where user shares the link with all the users, and then you know it gets unfold into an adaptive card with list of actions.

A

Let's see how this workflow works. So here we have a teams: user who's, interacting with the team's app the team's client of services, and then your sample app. The sample app here represents the bot uh and yeah we're specifically talking about how bot interacts in this workflow, so user shares a link to a dashboard uh in teams and teams will determine if that link is associated to your app. If it is, then it invokes an app. This link query to your app.

A

This is where your app is in control of what it wants to return back now in the sample. We do an optional user sign-in. We do a user sign-in to authenticate the user.

A

uh This is primarily useful if you're, you know looking at resource, that's not public, and you want to ensure that only users who have access to it are able to access it so an optional sign in which is a one-time sign in and look at how it looks like uh knowing end user experience, but once user is signed in the app then returns back an adaptive card with preview details like image and detail and action buttons, and then teams will automatically insert that card into compose box and user can send it to continue the workflow.

A

Let's look at the other scenario we'll be looking at, which is review in a meeting uh here again, a quick recap: user clicks on the reviewing meeting action and that opens a task module. Where you see you know the app is processing this request and then user is automatically given an option to join a meeting.

A

So in this workflow again we have a teams user who is going to click on this review and meeting action. We have kings, client or services. We have the task module which is powered by the web app, and then we have the sample app now here sample app represents bot and uh another. You know post end point that we've exposed to set up a meeting.

A

So let's start with the workflow user click sound review and meeting action. Okay, this is a one-time, app installation. So imagine you're sharing a link in a chat with users who don't have the app installed. So what happens? Teams will automatically handle that scenario.

A

They'll bring up the ui, which will prompt user to add the app and, once user adds the app it'll automatically continue with the workflow. That originated this installation that is it'll launch the task module for the user. The dash module works in this way. Your team's client will open your pop-up window, but it will also reach out to your bot saying that an invoke was fired to open a task module, and this is where your app is in control of uh you know showing uh what it wants to load in that class module.

A

Now here, the sample lab returns back, a link which specifically points to review a specific resource in a meeting and teams then opens that link in the task module again, because this process involves you know, user, creating a meeting and doing extra. You know steps like setting up and meeting installing app. We do require user consent, which is again a one-time user consent to get certain permissions if user consents.

A

The app continues with the workflow and if you see, there's no user interaction beyond clicking on review and meeting action other than you know, one-time actions related to app installation or user consent for certain permissions.

A

uh The app will then fire uh set up, review or set up meeting requests to the web, app where it'll then create an online meeting install an app to the meeting. Add a tab with link to dashboard and return back the meeting details and the reading details will have a link to join that specific meeting which will then be executed in teams, client and user will be able to join the meeting.

A

I hope that helps you understand. uh You know the end-to-end workflow of how it works. Well, it looks quite simple from user's perspective. There's a lot going on behind the scenes. So, let's switch to a live demo. I'll share my screen.

A

So here I have a user, let's call him user administrator and then here I have another user, uh megan and they're in a comment chat. So let's, let's share a resource with me again.

A

So here what you see is that I'm sharing a link to a dashboard and that gets unfold into a card which has options to view or review it in a meeting. Let's send this card and if either clicks on view. Now this is a stage view. uh It's not the main scenarios have implemented, but something you know really useful where you want to display information in large window with switch media content, you can do so, but then let's look at it from another user's perspective.

A

So you get this um option to you know view or review it in a meeting again. You can view it just like there's the user date, but let's look at what review meeting does so here we have a task module which is now processing your request and as it is processing it should create a new meeting and set up everything for the user.

A

So we see that user is prompted as an option to join a meeting.

A

Let's see okay, so this is the meeting and then, if you see we have an app that is already added to this thing and when you click on that, you can look at the resource, and this is the exact resource that was originally shared, and now you can share it with other users. If any other user in the chat clicks on they've been meeting action, they will be added to the same meeting instance.

A

And they can now collaborate. You know over the content that the original user is sharing with them. I think it's taking some time to load the stage view. Okay, we have it here. So that's great, uh but let's look at the code. That's covering this experience here is the project, and here the web project basically has the bot implementation and the controller apis and the client apps.

A

The domain is where we handle the main logic to implement or setting up the review and meeting based on the context where it's shared, and then we have insta infrastructure, which provides the underlying infrastructure like where's the resource info coming from, or if you can give me the cards which I want to display in the chat, etc.

A

uh Let's start with the part implementation, so we talked about link controlling, and here we have the invoke action which is called when user shares the link with the users in a chat, and this is where your app is in control of it validates the url that, if it's pointing to a relevant resource- and this is where we optionally check for user sign in if you're not signed in, we ask the user to sign in.

A

We send back a sign in action response which, when you sign in then again calls back this action again and if everything is good, you, then you know check if the user, ideally, we should generally use well strikes to accessory results. It's kept in samples because this is, you know, heavily uh dependent on how you implement this, and then it returns back a card with information on previous image and option to review it. We talked about expanded and collapsed card. Expanded card uh I'll quickly.

A

Show you what they look like, but expanded card is the color people looking at where you have list of actions and the preview image and collapsed card is basically a small preview where you don't really have an option to add action, buttons and other stuff, um and then the other important implementation we should look at is how do we set up te review?

A

So the client or uh you know the task module eventually, when it processes, the request validates that things are right, sends a request to your app and says that hey set up an online meeting for this request and what the app does it tell its data checks. If the resource really exists, if it does, it prepares the conversation contacts. This is where we know.

A

If it's a you know, group conversation or team and whether it's a team team chat and then it calls a set of um meeting a sync function here, which essentially creates a unique external id for a meeting here. It's a combination of conversation id and a resource id. So anytime, you share the same results. In another conversation, it's going to create a unique or another online meeting, while in the same chat it's going to point the same online meeting.

A

We cache the results so that we can return quickly for subsequent requests, but when it's running the first time this will not return anything. So we create the meeting object that needs to be created, and then we ask the meeting set up class to set up the meeting. Let's see what it does, and here we have options to look at which context we are running in and then you know, based on the context set up the app and the tab for the users.

A

So that's from uh the demo. We have a list of resources that you can point to like link to sample app and parts and all the capabilities we talked about you can refer to them. If you want to learn about these features in detail- and that concludes our session thanks for listening to the session. Thank you. Let's, let's do the questions on the chat. Thank you for that. One.