1

My web application is created in angular. Can I check whether web application is accessed from browser or Teams custom apps.

As I know this features is available for app which are created in react. example :- import { useTeams } from "msteams-react-base-component"; const [{ inTeams, theme, context }] = useTeams();

Above inTeams return boolean, which tells whether app is accessed from browser or custom app.

So I get this in angular as well?

Parth Agrawal
  • 63
  • 2
  • 10

2 Answers2

4

You can take the function from msteams-react-base-component, it's very simple:

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

export const checkInTeams = (): boolean => {
    // eslint-disable-next-line dot-notation
    const microsoftTeamsLib = microsoftTeams || window["microsoftTeams"];

    if (!microsoftTeamsLib) {
        return false; // the Microsoft Teams library is for some reason not loaded
    }

    if ((window.parent === window.self && (window as any).nativeInterface) ||
        window.name === "embedded-page-container" ||
        window.name === "extension-tab-frame") {
        return true;
    }
    return false;
};

Source

eniel.rod
  • 855
  • 8
  • 12
1

There is a property on the Teams Context object called hostClientType, which I think is/was meant to deal with this. It contains values like 'web' and 'desktop', and it used to be documented here but this doc has been updated to remove this property (amongst others). Here is an older version of the same doc which contains more info. The property still exists, and it holds this info, but I'm not sure why it was removed from the documents (perhaps the property has been deprecated).

Hilton Giesenow
  • 9,809
  • 2
  • 10
  • 24