CODEWITHSUNDEEP
javascriptjquerysharepointmicrosoft-teamssharepoint-online
Smarter
Smarter

Reputation: 55

How to check if the SharePoint site is opened from MS teams or not

I have a SharePoint site and added it to Teams as an app , and it works fine. I want to check on a specific page of this site if the page is now running from MS Teams or not .  Is it possible to do that with jQuery-JavaScript or is it applicable or not? . Thank you in advance .

Upvotes: 0

Views: 422

Answers (1)

jimas13
jimas13

Reputation: 658

General Idea

  1. Deploy an SPFx Webpart that is executed in the context of the User and the Sharepoint Page.
  2. Use available React Packages to see in which Platform is the code executed.
  3. If step 2. succeeds, we will have all the available information about the Platform that the user is using in order to document it (e.g. a serverless API, Application Insights or something else...)

Create the SPFx WebPart

I have made a github repo containing the package, which you can easily build and deploy and check out that the Browser information is displayed once the Sharepoint Page is visited by the User.

In order to support my Proof of Concept, I utilized a React Library called react-platform-js which is just a wrapper of the platform.js script and is available in most JS frameworks, so you should not find it difficult to use it with JQuery, for example.

Inserting the below parchment in the code:

<Platform>
    {props => {
      return (
        <div>
          OS: {Platform.OS},
          OSVersion: {Platform.OSVersion},
          Browser: {Platform.Browser},
          BrowserVersion: {Platform.BrowserVersion},
          Engine: {Platform.Engine}
        </div>
      )
    }}
  </Platform>

in the .tsx of the WebPart Component, as per the documentation and rendering the available information we can see that once I visit the page from a Browser we get the below image: view rendered in Browser

Where it can be seen that the Browser in use is

OS: Windows, OSVersion: 10, Browser: Chrome, BrowserVersion: 106.0.0.0, Engine: Blink

After adding the same Sharepoint Page to a Teams Tab in order for Users to access it easily, we get the Below image: Teams Tab Rendered

The message has switched to

OS: Windows, OSVersion: 10, Browser: Electron, BrowserVersion: 10.4.7, Engine: Blink

Which is correct, as it is documented on the MS Docs site.

The above scenario, basically, means that it is possible to access the Platform Engine Information where the Sharepoint Page is rendered.

Afterwards - What do we do now that we have the Data?

There are some alternatives as to what you wish to achieve. I will list some of my thoughts below.

  1. The first and developer-y way to go, would be to create a custom Web API that is posted once the page is accessed with the information at hand, and afterwards, another automated procedure (Azure Function, for example) would be executed and would produce a report.
  2. We could utilise the Application Insights Service that Azure is able to provide, in order to monitor the Sharepoint Page Usage, and since you can modify the script that it provides you could document the percentage of users that visit the site via Browsers and via Teams, with custom events. Please be careful and read the note on the page which urges us to use SPFx application customizer solution for modern pages

Final Thoughts

There are many ways to extend the Sharepoint Platform, but all depends on what resources you have. I listed some ways to perform some basic metrics reports, but unfortunately, I cannot know which path suits you :P

If I was looking at a Production-based scenario, I would create an SPFx Application Customizer in order to have it deployed via a more automated way and not have a WebPart added to all pages of a site, but that's also personal preferences :)

I would be nice if you share which solution you chose and ping if there is something I can help with :)

Upvotes: 1

Related Questions