CODEWITHSUNDEEP
microsoft-teams
gatsby
gatsby

Reputation: 86

Is there a way to tell if your app is running in Microsoft Teams

I have a web app that needs to execute specific code if it is running in Microsoft Teams, however I haven't yet figured out if there is any way to tell if your app is running in teams. Any ideas or insight?

edit:

for anyone wondering we ended up using a combination of the two answers below, on app start it will check the url of the app to see if it contains "/teams". The teams app is told specifically to point to {app_name}/teams, if this case is true it will run the following code block:

import * as microsoftTeams from '@microsoft/teams-js';


if (window.location.pathname.includes('teams')) {
    microsoftTeams.initialize(() => {
      microsoftTeams.getContext(context => {
        store.dispatch(teamsDetected(context.hostClientType!));
        try {
          microsoftTeams.settings.registerOnSaveHandler(saveEvent => {
            microsoftTeams.settings.setSettings({
              websiteUrl: window.location.href,
              contentUrl: `${window.location.href}&teams`,
              entityId: context.entityId,
              suggestedDisplayName: document.title
            });
            saveEvent.notifySuccess();
          });
          microsoftTeams.settings.setValidityState(true);
        } catch (err) {
          console.error('failed to set teams settings')
        }
      });
    });
  }

Upvotes: 5

Views: 3463

Answers (2)

dotcoder
dotcoder

Reputation: 2921

As of 2022, Microsoft released version 2.0 of teams-js library. You can check https://www.npmjs.com/package/@microsoft/teams-js. You can now use the app module to check whether it is initialized.

import { app } from '@microsoft/teams-js';

bool initialized = app.isInitialized()

Upvotes: 1

NickHodge
NickHodge

Reputation: 313

As you have probably experienced, a call to microsoftTeams.getContext(...) never returns if you are not in Teams.

So I have a flag that I monitor with a setInterval and if this._teamsContext is truthy, and has sane values; and only if if has this._hasAttemptedConnection

It is a bit of a round-a-bout way.

Another mechanism I implemented a little later was passing in a flag with the URL entrypoint (in our case: this is a Teams Tab) https://<oururl>?context=teams and only using the Teams codepath when in Teams.

I have seen requests in the Microsoft Teams .js github to return a failure from the microsoftTeams.getContext(...) refer: is there any API to detect running in Teams or not?

Prior to the flag, I had some Typescript code that looks like

 WireTeams(): Promise<boolean> {
        this._hasAttemptedConnection = false
        return new Promise<boolean>((resolve, reject) => {
            microsoftTeams.initialize()
            microsoftTeams.getContext((context) => {
                if (context === null || context === undefined) {
                    resolve(false)
                }
                this._teamsContext = context
              })
           })
       this._hasAttemptedConnection = true
}

Upvotes: 6

Related Questions