Teams and Groups

Microsoft 365 groups address the various needs of group collaboration and having 19 Microsoft 365 applications endpoints including Microsoft Teams. All Microsoft group features are applicable to Microsoft Teams. Every Team associated with a group communicates in the context of a specific team. Group members communicate by group conversations, which are email conversations that occur in the context of a group in Outlook. To differentiate the group associated with the team, any group that has a team has a ‘resourceProvisioningOptions’ property that contains “Team.” Do not change “Team” from the ‘resourceProvisioningOptions’ property or the result will be incorrect when you list all the teams.

Team Templates

Spin up new teams quickly with preconfigured templates that include things like channels, owner settings, and preinstalled apps.

Set Up Your Team Using Graph API

You can configure your team when you create it or update it later.

Add Apps and Tabs Using Graph API

Archive Your Team

When the time comes, use Graph to archive your team in an agile manner and if necessary, un-archive the team.

Graph and Bots: Better Together

A Teams app with a bot can proactively send messages to a chat or channel. It can only send messages to conversations. If it has the right information for a 1:1 chat, the bot needs to be installed in a group chat or channel the user is a part of or installed as a personal app for that user. The bot must store a reference to that user when they are made aware of them.

With Graph, you can install the app for any user, enabling proactive messaging regardless of where the app is previously installed. This is particularly useful in scenarios where you need to message a large portion of your organization reliably.

What’s in the Microsoft Graph Toolkit?

Why Use the Microsoft Graph Toolkit?

The Microsoft Graph Toolkit makes it quick and easy to integrate common experiences powered by Microsoft Graph into your own applications.

Templates in the Microsoft Graph Toolkit

Microsoft Graph Toolkit Playground

To find a tool used for interacting with the Microsoft Graph Toolkit, try out the components in this playground: https://mgt.dev . See Figure 8-3.

Microsoft Graph Explorer

Microsoft Graph Explorer is a tool to explore graph APIs, and you can see the image in Figure 8-4 of the screenshot of the Microsoft Graph Explorer that I have captured. As you can see, this console gives you the option to type in the API or address of a specific entity type or object for which you are looking for some information, and then you also need to sign in with a specific account that has the privilege to query this particular API, Next it will also show you some of the sample queries that you can use to understand the explorer. You can access Graph Explorer at: https://developer.microsoft.com/graph/graph-explorer

The following example shows a request that returns information about joinedteams in my tenant.

A status code and message are displayed after a request is sent and the response is shown in the Response Preview tab.

Postman

Postman is a collaboration platform for API development that you can use to build and test Microsoft Graph API requests. You can download Postman from https://www.getpostman.com . To interact with Microsoft Graph in Postman, you use the Microsoft Graph collection. To learn more about postman, refer here: https://learning.postman.com/

Microsoft Teams Toolkit for Visual Studio Code

The Microsoft Teams Toolkit extension enables you to create, debug, and deploy Teams apps directly from Visual Studio Code.

To access the Microsoft Teams Toolkit: - https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension . See Figure 8-5.

Enable Microsoft Teams Toolkit Extension for Visual Studio Code

Install Microsoft Teams Toolkit from the Extensions tab on the left sidebar in Visual Studio Code. See Figure 8-6.

Build Microsoft Teams Tab

Here are the steps (Figure 8-7):

1. 1.

   Open Visual Studio Code

    
2. 2.

   Select Microsoft Teams icon on the left sidebar in Visual Studio Code and Sign in

    
3. 3.

   Log in with your tenant account

    

1. 4.

   Navigate to “Create a New Teams app” and Click to enter new app name (Figure 8-8)

    

1. 5.

   Press ‘Enter’ to select the app path

    
2. 6.

   Choose Tab to create Microsoft Teams Tab (Figure 8-9)

    

1. 7.

   Click Next button

    
2. 8.

   Select Personal tab (Figure 8-10)

    

1. 9.

   Click the Finish button to create the Teams app (Figure 8-11)

    

Implement Microsoft Graph Toolkit

Set Up Ngrok for Tunneling

Follow these steps:

• Go to the ngrok(https://ngrok.com/) website and log in with your tenant id

• Download ngrok.exe and Complete the setup and installation guide

• Copy the Authtoken from the ngrok site

• Save Authtoken in the default configuration file C:Users[user name].ngrok> (Figure 8-12)

• Run the script below (Figure 8-13) to create an ngrok tunnel for https://localhost:3000

• Go to your project .publish > Development.env, and replace baseUrl0 with ngrok URL (Figure 8-14), https://51d71653c83c.ngrok.io

• Go to your project public > index.html, replace YOUR-NGROK-URL with ngrok URL https://51d71653c83c.ngrok.io in mgt-teams-provider > auth-popup-url (Figure 8-15).

npm install

npm start

Register Your App in Azure Active Directory

Now we register the app:

1. 1.

   Go to the Azure Portal, then Azure Active Directory ➤ App Registration and select New Registration

    
2. 2.

   Azure Active Portal URL - https://aad.portal.azure.com/

    
3. 3.

   Login

    
4. 4.

   Click Azure Active Directory

    
5. 5.

   Select App registrations

    
6. 6.

   Then Click New Registration (Figure 8-17)

    

1. 7.
   Fill in the Details for registering an app:

   • Name: TeamsTabApp

   • Supported Account type : Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g., Skype, Xbox)

   • Redirect URL for web: https://REPLACE_NGROKDOMAIN.ngrok.io/auth.html

   • Click ‘Register’ button to register an application (Figure 8-18)

    

1. 8.

   Go to the Authentication tab and Enable Implicit grant by selecting Access tokens and ID tokens (Figure 8-19)

    

1. 9.

   Click Save

    
2. 10.
   Go to API permissions tab (Figure 8-20), select Add a permission ➤ Microsoft Graph ➤ Delegated permissions and add permission

   1. a.

      Calendar.Read

       
   2. b.

      Calendar.ReadWrite

       
   3. c.

      Directory.AccessAsUser.All

       
   4. d.

      Directory.Read.All

       
   5. e.

      Directory.ReadWrite.All

       
   6. f.

      User.Read

       
   7. g.

      User.Read.All

       
   8. h.

      User.ReadWrite.All

       
   9. i.

      Mail.Read

       
    

1. 11.

   Then, select Grant admin consent (Figure 8-21)

    

1. 12.

   Go to Overview tab and copy Application (client) ID (Figure 8-22)

    

1. 13.

   Then go to your project public > index.html, and replace YOUR-CLIENT-ID with Application (client) ID in mgt-teams-provider > auth-popup-url (Figure 8-23).

    

Test Your App in Microsoft Teams

It is time to test it:

1. 1.

   Go to Microsoft Teams (https://teams.microsoft.com )

    
2. 2.

   Go to … ➤ open App Studio (Figure 8-24)

    

1. 3.

   Select Manifest Editor and select Import an existing app (Figure 8-25)

    

1. 4.

   Select Development.zip under your project folder ➤ .publish (Figure 8-26)

    

1. 5.

   Scroll down and select Test and distribute, then click Install (Figure 8-27)

    

1. 6.

   Click the Add button to install the app (Figure 8-28)

    

1. 7.

   Click Sign in for the authentication using an AAD registered app (Figure 8-29)

    

1. 8.

   Give consent to the AAD registered app you created (Figure 8-30)

    

In this exercise, you have learned how to use Microsoft Teams Toolkit for Visual Studio code with Microsoft Graph API toolkit within Microsoft Teams for a tab app.