Sp-dev-docs: Detect environment that Application Customizer is running in

[lworkman]

Category

• [x] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

I'm wondering if it's possible to detect the environment a SPFX Application Customizer is running in. A company wide solution isn't rendering properly in embed SharePoint pages in teams or in the SharePoint mobile app, and we want to hide the solution under these scenarios.

I wasn't able to find anything in the context object, and the usual tricks (looking at location or window parent) don't seem to be working.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[andrewconnell]

Not clear... you mean this? https://docs.microsoft.com/en-us/javascript/api/sp-core-library/environment

[bcameron1231]

To add to Andrew's Comment. Correct me if I'm wrong... here is the list of environment types available https://docs.microsoft.com/en-us/javascript/api/sp-core-library/environmenttype?view=sp-typescript-latest.

I believe if you need to check if you are loading in MS Teams, there is teams context object, this.context.microsoftTeams you can check. You can find more in this documentation https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction

[lworkman]

Thanks for the responses, but it doesn't look like the Environment class or checking for this.context.microsoftTeams works.

Let me try and explain the situation a bit more thoroughly. In Microsoft Teams, you can embed SharePoint pages as tabs. When a SharePoint page with my application customizer is embed, I want to hide the customizer. However, the normal tricks (checking if you're in an iframe, checking the URL, etc.) don't work. Checking for this.context.microsoftTeams also doesn't work. I've attached a picture of a test application customizer running in an embedded page in Teams.

In addition to this, I also want to hide the application customizer when you're in the SharePoint mobile app. In much the same way, the usual tricks don't work there either. Even more troublesome, I still want to show the application customizer when you're in a web browser, just not the mobile app, so checking the user agent isn't a viable solution.

Basically, I want to make sure the user is in an actual web browser before I run my application customizer.

[bcameron1231]

Ah, I was thinking a web part. My apologies for leading you down that rabbit hole.

[patmill]

With SPFx solutions getting broader (teams integration, etc.) we'll be adding some additional functionality to know the environment it is being loaded into. It's kind of exploding, so we'll probably have a few different parameters. It won't be "PageHostedInTeamsTabHostedInIosTeamsApp" (which I think is the broadest set of environments available) but rather something like knowing you are in teams, or you are in an app vs. a browser, etc. Stay tuned for more info.

[VesaJuvonen]

We will be releasing updated information on this topic as part of the General Availability of this feature, so closing this one.

[PeterHeibrink]

I cannot really find the answer in the release notes. Where can we find the way to detect if the Application Customizer is ran from Teams? I could only find using the user agent string, but that doesn't work when someone uses Teams via their browser.

[pvranich]

Do we know when this feature will reach GA?

If it has already reached GA is there a link to the documentation?

[jonathanhotono]

any update over this?

[lworkman]

Can we re-open this ticket? We're coming up on a year and this is still an issue

[netti01]

We simply use "window.navigator.userAgent" in order to check if our SPO page is running in Microsoft Teams. If it runs in teams you will find "Teams" and "Electron" within its value.

We also tried to embed the Teams SDK within our Application Customizers, but without any success. There seem to be different conflicts when initiating the JS on an SPO modern page. Perhaps this only works for "Team" SPFX Webparts.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues