Getting Started with Microsoft Teams Tabs - Part 3 #MicrosoftTeams

Microsoft Teams is a chat-based collaboration tool that is part of the Office 365 suite of services. Teams enables local and co-workers to work together and collaborate through a common work-space, using features such as team chat, one-on-one chat and document collaboration.

Web Content (Continued)

Last week we looked at how to created the configuration page for our Microsoft Teams tab.  This week we'll look at the api a little closer and examine some of the things our content page can gather from the running teams client (parent) it resides in. 

If you remember from week 1, there are 3 basic requirements you need to have in place for your website/app to be able to interact with Teams.

1.  You need to include the Teams api JS.

<script src="https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js" />

2.  You will need to initialize it, before you try to do anything with it.

microsoftTeams.initialize()

3.  You need to make sure your site is listed in the validDomains section in the manifest.

Mechanically how it works, is the teams tab is a website itself, and your website is hosted as an iframe of that site.  Your page can then interact with the parent side using the javascript library, and more specifically the microsoftTeams object that library initializes.

Context

For now the data available from Teams resides in the contact entity of the microsoftTeams object.  It's not hard to imagine that at some point, there will be an audio or video entity allowing your app to manipulate those objects in the near future either.

Here is a super basic example of how to read the context.  In this same we are going to look at the theme, and adjust our text color so it can be seen, since black on black is not a great user experience.

 microsoftTeams.getContext(function (context)

            {

                if (context.theme == "dark") {

                    $("body").css("color", "#ffffff");

                }

                else {

                    $("body").css("color", "#111111");

                }

            });

You can see we are getting the context and storing it in a variable named context.  One of the elements teams passes us is the current theme so in the case of dark we make the page font color white, and in every other theme (default, high contrast) we make it dark.

Other elements of the context are;

teamId - The guid of the current team. (kind of)

channelId - The guid of the current channel (kind of)

locale - lower case representation of the part of the world ie en-us

theme - what color theme the user has their client set to

entityId - the entity name you specified in your config page

subEntityId - the sub entity you specified in your config page

upn - the user in email format

tid - guid of the tenant

groupId - guid of the office 365 group

That's all that is available right now.  Also when I say (kind of) above here is what I mean.  You don't actually get a guid in string format you can can just use, you get this for some reason.

The number 19, a colon, your guid, and then @thread.skype 

For some inexplicable reason, it is always in that format, which begs the questions if the 19: and the @thread.skype are static, why on earth are they included.  So be prepared to do some parsing.  You are probably thinking, Doug why do I care about the guids anyway?  Well if you look in the beta section of Microsoft graph there are a few things for Teams, and they will come in very handy there.

So what happens if I set my colors, then the user changes the theme?

microsoftTeams.registerOnThemeChangeHandler(function(theme) 

{

  

  //Read the new theme value here and do something with it.

  });

Next week we'll continue with more.

Doug Routledge, Teams, Skype for Business, SQL, Exchange, UC, Full Stack Developer  BridgeOC Bridge Operator Console Twitter - @droutledge @ndbridge