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 |
