Bridge Communications

Saturday, September 16, 2017

Getting Started with Microsoft Teams Tabs - Part 2

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

When it comes to Teams tabs, and what will soon be know as Teams apps, a secure website is how you will interact with the Teams client.  Today we will focus on the configuration page.  If you remember the manifest discussion from last week you will recall this section.

"configurableTabs": [ { "configurationUrl": "https://taburl.com/config.html", "canUpdateConfiguration": true, "scopes": [ "team" ] } ],


So when we install our Teams app we have the option to specify a custom configuration page.  Why would we want to do this?  Let's say our app was going to map the current location of our Teams members.  We may want to give the users the option to user Google Maps, or Bing.  The configuration page will let them choose when the app is set up.

Requirements

There are 2 requirement that have to be met for a configuration page.

1.  You must host it in a https secure location
2.  You will need to call microsoftTeams.initialize() in your js code

Here is a sample of our map selection configuration page.

<html> <body> <form> <input type="radio" name="maptype" value="bing" onclick="onClick()"> Bing Maps<br> <input type="radio" name="maptype" value="google" onclick="onClick()"> Google Maps </form> <script src="https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js"></script> <script type="text/javascript"> microsoftTeams.initialize(); microsoftTeams.settings.registerOnSaveHandler(function(saveEvent){ var radios = document.getElementsByName("maptype"); if (radios[0].checked) { microsoftTeams.settings.setSettings({ entityId: "bing", contentUrl: "https://www.bing.com/maps/embed", suggestedDisplayName: "Bing Map", websiteUrl: "https://www.bing.com/maps", removeUrl: "https://teams-get-started-sample.azurewebsites.net/tabremove.html", }); } else { microsoftTeams.settings.setSettings({ entityId: "google", contentUrl: "https://www.google.com/maps/embed", suggestedDisplayName: "Google Map", websiteUrl: "https://www.google.com/maps", removeUrl: "https://teams-get-started-sample.azurewebsites.net/tabremove.html", }); } saveEvent.notifySuccess(); }); function onClick() { microsoftTeams.settings.setValidityState(true); } </script> </body> </html>



One important thing to note in the sample is the addition of this js file;

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

This is essential for communication between your app, and the Teams app.  Don't forget to add it to the top of your <body> tag.

The other important thing to note is this line;

microsoftTeams.settings.setValidityState(true);

This piece of code lets Teams know that you have satisfied the configuration, things are valid, and the installation can proceed.  Without this you'll be stuck in a loop and not able to use your app.  Once you have save settings using  microsoftTeams.settings.setSettings  then you will use the getSettings to retrieve them in the application page.

Next week we'll start to look at what hooks our application page can have back to the Teams client.



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