Adding Custom App to Microsoft Teams Meeting Using Microsoft Graph APIs.

Published in

Microsoft Azure

4 min readOct 27, 2021

One can enhance participants meeting experience by using the meeting extensibility feature, by integrating your apps within Microsoft Teams meetings. Meeting organisers can add/install custom apps to the Teams meeting using the Teams client after setting up the meeting.

Use Case

For the scenario, where you want to add/install app in Teams meeting programmatically for app to show up automatically in the meeting experience. Objective of this blog is to explore how using Microsoft Graph APIs we can programmatically add app in Teams meetings.

For any interactions with Teams one can use Microsoft Graph APIs.

Drawing Board

Let’s explore how using Graph APIs we can add app in teams meeting. We need to execute below high level steps to adding app.

Get the Teams app ID for your app in the app catalog. (Note that this is different than the app ID in your manifest)
Get the chat thread ID for the online meeting (see the chatInfo property for the threadId).
Add your app to the Teams chat associated with the meeting.
Add your tab to the Teams chat associated with the meeting.

Minimalist

One shall need Teams meeting app added to tenant app catalog. For more details on Apps for team meeting refer Teams Meeting App.
We would need below permissions to install app, so you need Graph access token with below scopes

AppCatalog.Read.All
OnlineMeetings.ReadWrite
TeamsTab.ReadWriteForChat.All
TeamsTab.ReadWriteForChat

These permission are need to find app in app catalog, creating event, installing app to meeting chat and adding app tab to meeting chat. Last two permission need admin consent.

Lets start with Details

1. Get the Teams app ID

We need Teams App ID, careful this is not the one we specify in app manifest.json but its is the ID that is generated in App Catalog. One can use GET /appCatalogs/teamsApps

This method supports the $filter, $select, and $expand OData query parameters to help customise the response.

Sample of the query with your App ID as in manifest

AppID used here is dummy and is for reference only

GET  https://graph.microsoft.com/v1.0/appCatalogs/teamsApps?$filter=externalId eq 'd367r4444-vb12-987d-f765-456e45678f3x'

Response shall be something like

{
   "value": [
     {
       "id": "69c15899-3b7a-4229-b092-1e3f649f79fc",
       "externalId": "d367r4444-vb12-987d-f765-456e45678f3x",
       "name": "Sample Tab App",
       "version": "1.0.0",
       "distributionMethod": "Organization"
     }
   ]
 }

In our scenario, Teams App ID we need is below one from the response

69c15899–3b7a-4229-b092–1e3f649f79fc

2. Create Online Meeting

One can use the create onlineMeeting Graph API to create one

POST /me/onlineMeetings

Sample request

POST https://graph.microsoft.com/v1.0/me/onlineMeetings
Content-Type: application/json{
  "startDateTime":"2019-07-12T14:30:34.2444915-07:00",
  "endDateTime":"2019-07-12T15:00:34.2464912-07:00",
  "subject":"User Token Meeting"
}

Sample response

HTTP/1.1 201 Created
Content-Type: application/json{
  "@odata.type": "#microsoft.graph.onlineMeeting",
  "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users('f4053f86-17cc-42e7-85f4-f0389ac980d6')/onlineMeetings/$entity",
  "audioConferencing": {
    "tollNumber": "+12525634478",
    "tollFreeNumber": "+18666390588",
    "ConferenceId": "2425999",
    "dialinUrl": "https://dialin.teams.microsoft.com/22f12fa0-499f-435b-bc69-b8de580ba330?id=2425999"
  },
  "chatInfo": {
    "threadId": "19:meeting_M2IzYzczNTItYmY3OC00MDlmLWJjMzUtYmFiMjNlOTY4MGEz@thread.skype",
    "messageId": "0",
    "replyChainMessageId": "0"
  },
  "creationDateTime": "2019-07-11T02:17:17.6491364Z",
  "startDateTime": "2019-07-11T02:17:17.6491364Z",
  "endDateTime": "2019-07-11T02:47:17.651138Z",
  "id": "MSpkYzE3Njc0Yy04MWQ5LTRhZGItYmZiMi04ZdFpHRTNaR1F6WGhyZWFkLnYy",
  "joinWebUrl": "https://teams.microsoft.com/l/meetup-join/19%3ameeting_M2IzYzczNTItYmY3OC00MDlmLWJjMzUtYmFiMjNlOTY4MGEz%40thread.skype/0?context=%7b%22Tid%22%3a%2272f988bf-86f1-41af-91ab-2d7cd011db47%22%2c%22Oid%22%3a%22550fae72-d251-43ec-868c-373732c2704f%22%7d",
  "participants": {
    "organizer": {
      "identity": {
        "user": {
          "id": "550fae72-d251-43ec-868c-373732c2704f",
          "displayName": "Heidi Steen"
        }
      },
      "upn": "upn-value"
    }
  },
  "subject": "User Token Meeting"
}

Few important properties from response

id: The ID of the online meeting
joinWebUrl: The URL you can use to join the meeting
chatInfo.threadId: The ID of the chat thread associated with the meeting.

3. Installing App to Teams Meeting

Once online meeting is created as described in above step, now we need to install app to associated chat thread using the add app to chat Graph API

POST /chats/{chat-id}/installedApps{
 "teamsApp@odata.bind":"https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/{app-id}"
 
}

where chat-id is the thread ID from the online meeting above, and app-id is your app ID that we retrieved above.

Response

HTTP/1.1 201 Created

4. Adding tab to Teams Meeting

Once App is installed we can add tab to the meeting, basically we shall add the tab to associated chat thread using add tab to chat Graph API.

POST https://graph.microsoft.com/v1.0/chats/{chat-ID}/tabs
Content-Type: application/json{
  "displayName": "My Contoso Tab",
  "teamsApp@odata.bind" : "https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/{App-ID}",
  "configuration": {
    "entityId": "{some-entity-id}",
    "contentUrl": "https://www.contoso.com/Orders/2DCA2E6C7A10415CAF6B8AB6661B3154/tabView",
    "websiteUrl": "https://www.contoso.com/Orders/2DCA2E6C7A10415CAF6B8AB6661B3154",
    "removeUrl": "https://www.contoso.com/Orders/2DCA2E6C7A10415CAF6B8AB6661B3154/uninstallTab"
  }
}

with the same chat-id and app-id as above. The contentUrl should point to the content you want to show in your meeting tab or side panel.

Woohoo, we are done. Let’s test its out.

Your app should now be added to the meeting! To try it out, use the join URL for the meeting to join the meeting. If your app is enabled for the meeting side panel, you should see your app icon at the top that you can click to open the side panel.

Summary

In this post, we explored using Graph APIs how we can add/install app in Teams meeting programmatically for app to show up automatically in the meeting experience.

References

Microsoft Graph APIs — Get started with the Graph APIs.
Teams Meeting App.— Get started with Apps for Teams Meetings.