Microsoft 365 Community Community Demos, 28 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Dynamically Create a Microsoft Teams Meeting using Microsoft Graph

Description

In this 14-minute developer focused demo, Ayça Baş shows how to leverage Microsoft Graph and Azure functions to automate the creation of a Teams meeting link rather than going to the calendar, creating an invite, copying/pasting link for ACS, etc. Ideal for customers using ACS in a custom app while customer service agent is using Teams – both parties use same URL to join meeting. Step through Microsoft Graph client (with authentication) setup and meeting creation code. Module 4 in this series.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 28, 2023.

Demo Presenter
• Ayça Baş (Microsoft) | @aycabs

Supporting materials
• Tutorial - Audio/Video Calling from a Custom App into a Teams Meeting | aka.ms/mscloud-acs-teams-tutorial
• Integrations - Microsoft Cloud Integration Scenarios | aka.ms/microsoft-cloud
• Repo - Microsoft Cloud Integrations (code samples, videos, documentation) | https://github.com/microsoft/MicrosoftCloud
• Library - Azure Communication Services – UI Library | aka.ms/acs-ui-library
• Documentation - Azure Functions documentation | aka.ms/msazure-functions
• Tool – Graph Explorer | aka.ms/ge

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

A

Thank you for joining the session for the ones who don't know me. My name is aichabash I'm A, Cloud, developer Advocate at Microsoft, and today I will be talking about one part of the series. The overd started I, think at the beginning, or at the beginning of February or end of January.

A

So um my colleague Daniel in already delivered three sessions about this series and in the first one he talked about how to integrate audio and video calling from a custom app into a team tweeting in the second one. He showed how to create Azure, Communication Service uh resource on Azure and last week he went through how to integrate ACS calling feature into react app. If you're interested in diving into those sessions, you can go to the um M365 Community Channel on YouTube and watch the recordings. Today.

A

We will talk about how we can dynamically create a meeting in teams uh using Microsoft graph, because so far we were just creating the teams meeting and then using the URL through ACS and also on teams. But at this point we would like to leverage from Microsoft graph to automate some of these stuff and I. Will just walk you through quickly how we can do that and just to let you know next week.

A

I will be here again and I will talk about how you can dynamically create ACS, identity and token, instead of just going Grand grabbing them and copying and pasting, and we will just automate that process too and in the final week then we'll be back again just to show you how you can deploy your app on azure just to quickly walk you through.

A

What's going to be the app look like in the customer Viewpoint, we will have a custom ACS app where our customers can leverage from then will be our customer here as soon as he stores the call the customer agent customer service agent will receive a meeting on the calendar and she can jump in the call and um also yet the guest person in which is our customer.

A

um So in this demo we see that customer is requesting to join and both of them are in. The only difference is that customer is using the ACs custom app and the agent is using teams to join this meeting. So so far, if you're trying to build this experience by using Azure communication, Services Microsoft teams and graph and in the process, as as you can imagine, we're consuming Microsoft teams meeting URL so today we will learn how we can create that meeting link dynamically.

A

um So obviously you can go ahead and create a teams meeting and consume the URL from ACS, but at the same time, instead of doing that, you can leverage some of the automation tools, such as Azure functions in this case, if you're using Azure functions, HTTP trigger to cold Microsoft graph automatically, whenever a customer requests to meet with an agent and today I will show you how you can do that, but to start with I just want to quickly show you.

A

If you don't know what graph is I want to show you a great place to start. So let me go here okay, so we have a great place, probably if you're in the community for a long time.

A

You know what graph is, but if you're new Microsoft graph is the unified API for Microsoft 365 data and intelligence, if you're looking forward to getting data from- let's say uh popular apps on Microsoft such as Outlook teams to do planner, you can leverage from graph.microsoft.com and you can change the url such as in this case and logged in with my demo account and when I run. This I can get the personal. The person profile information about me, but also I, can change this data by just updating the URL.

A

I can get calendar um events, for example, while I'm doing that I I get all of the events from my calendar, but also I can create new calendar event by just doing a simple post request to this URL. So the only thing I have to do is just defining. uh What's going to be the event details such as name time and so on, and today we will consume exactly this API to dynamically, create teams, meeting URL in the calendar invite behind the scenes.

A

So um let me get back to my slides: let's go through the code really quickly, just to start with. In the setup we will need graph client and to do that, we will need authentication um we because we cannot get anyone's information without asking their permission. So in this part of the code, we are just doing the uh app only oauth so that we are consuming Azure, active directory app to get the registration and then create graph client. When we create the authorization provider, we will just create the graph client in the next step.

A

We are doing something exciting, which is the graph call, and we Define start and end time of the meeting, and we are actually doing that in this app.

A

Specifically, we are doing that by using the time at the moment and then we're adding one hour on top of it as an end time, and then we create Microsoft graph URL to call in our case it's calendar, slash events and we are using user ID here instead of slash me because we want to Dynamic create this for all the customer agents, not not only one person, so user ID might be user. Id will be different for each and every agent.

A

So, after that we defined a meeting event details such as subject sort and and time zone, and after that we will just send event. Data to Microsoft using the Microsoft graph, client and I will show the real code as well, but just going through really quickly in the react app side when we will get triggered which we will get triggered whenever user effect hook runs, um we we trigger that user effect uh hook whenever a customer start on the start, call button.

A

That means that whenever someone click on start call, then we will call Azure functions which will get all the data from Microsoft graph, so we will trigger Azure functions, which will create teams URL to join the meeting by using Microsoft graph. And finally, we will return the meeting link and it will be used by Azure, Communication Service. Also, the same thing: our agent will join by using Microsoft teams.

A

Okay, let's get into the demo I think I have time for that cool. So where is my demo? Okay, so I have two pieces in this demo and one is my own react app and the other one is azure functions um just to get started easily. I just first want to show you how my app looks like at the moment. This is my react app and you can find the react. App under acs-2 teams, meeting clients react and underneath you can go to app TSX, and this will be our app.

A

The main area for us in this Dynamic functionality is use effect. Whenever we trigger this, then we call react app teams meeting function. This is defined behind the scenes in that EnV file. Let's go and check, it is defined as my function HTTP trigger. So whenever I click on the join the call button, then I trigger this function.

A

Let's take a look quickly how my function looks like and if you're looking for the server the function as your functions part, you can go to server, Dash, typescript and underneath you will see, teams meeting function and index. Ts will be the place you. You will be seeing all the function details. The only thing we do in the HTTP trigger to be honest, is only calling the graph function on another folder, so we create a new meeting by using this function and let's go quickly check.

A

What does that function do on the top I already showed in the slides? We have the authentication app only and then at the bottom. We are using the graph client we created on top just to make a graph call here. We Define start time, which is now end time. One hour later, we create graph URL to call user, slash user ID, calendar events, after that we Define the details of the event name start and, and finally, we make the graph call at the end of this function.

A

We return the entire event, but let's go back one step and check what we return in Azure functions as buddy of the meeting we get all the details about the calendar. Invite, including the URL and one critical thing I forgot to mention- is that when you're creating an event you will have to Define. This is on the online meeting. True because, as default, it's coming as false, and if you want to create this event in might as teams meeting, then you will have to Define this as true here.

A

We return all the details about the event, but we only want to get meeting that online meeting that join URL, which is the teams meeting link, and we pass this through. Our react. App and here, as you can see, link is defined as response, and that means that our link is delivered until this part just to be consumed by ACS feature in our react app. So this is how our app code looks like, and we already have the link to share with you. You can take a look and try by yourself too.

A

Let me show you how the app the actual app looks like it runs on localhost 3000 and you you've seen that our functions are running it behind the scenes as well. So the only thing for us at this moment is just to run the app and test out if it will create the calendar, invite with the teams URL, so our agent and the customer can meet in the same link.

A

Okay, let me turn on my camera. Hi um and I will click on start the call as a customer I'm waiting to join the call because I'm the guest, let's go to teams and check out the calendar. Yes, so we have the meeting created already I will turn off everything just to prevent Echo and join the meeting.

A

And see that our guest is here, I will admit it, and both of us will be here, live yay. So behind the scenes, the only thing we did is we created the teams meeting link um dynamically by using Microsoft graph so that we don't have to go to the calendar, create the invite copy paste, the link for ACS, so on so forth.

A

So everything is automated and finally, I don't want to miss the opportunity to share all the resources, because usually I missed this part I'm, always out of time, if you're interested in trying this tutorial. The second link here is the GitHub repo, and it's there's also tutorial available step by step. You can check out our repo and take a look at the solution as well as you can follow the tutorial to complete the entire sample built from scratch.

A

If you're also interested in other Microsoft cloud interrogation scenarios, then Walden and I work on different types of scenarios and it's available under ak.com Microsoft cloud and there's also samples repo available, which is a third link, and if you are new to ACS and if you like, the UI we use in the react, there's actually a library, you can leverage uh the fourth link, ak.ms acs-ui, Dash Library. You can find all the goodies for the UI and use them.

A

It's really easy to call resume and if you're new to functions, there are different types of functions in this example. I use HTTP trigger. But if you want to learn more what types of functions available other than what we used, you can also check Azure functions. And, finally, if you're new to Microsoft graph, the graph Explorer is the best place to discover graph and if you're, a dotnet developer, we are waiting all of you to join hack together, starting from tomorrow, don't forget to register.

A

Thank you. Everyone. If you have any questions, I can answer in the chat. I, don't want to take too much of your time because there are two more presentations coming out. Yes,.

B

Excellent, that guy shot really really cool stuff and a great demo really really awesome demo um just showcasing the value here.

A