Introduction

This solution will show how to integrate advance tab with Microsoft Teams. Here we will be integrating Power BI report within Iframe of tab. You can integrate other pages also with Iframe of Team’s Tab.

Prerequisites

• Visual Studio 2017
• Microsoft Office 365 tenant
• Microsoft Azure Subscription

Build and Run App

Download my developed Advance Tab app from Git (https://github.com/mindlabco/TeamsAdvanceTab.git).

git clone https://github.com/mindlabco/TeamsAdvanceTab.git

Once the repo is cloned, use Visual Studio to open the solution file TeamsAdvanceTab.sln from the root directory of the app solution and click Build Solution from the Build menu. You can run the sample by pressing F5 or choosing Start Debugging from the Debug menu.

When the app starts, you will see a browser window open with the root of the app launched. You can navigate to the URL http://localhost:3333 to verify that app is loading.

Host App for Advance Tab in Azure

Follow Steps given on https://docs.microsoft.com/en-us/microsoftteams/platform/get-started/get-started-dotnet-in-azure to deploy TeamsAdvanceTab to azure.

Once deployment is completed Azure app will be opened in browser automatically. Take a note of this URL. It will be used in manifest file of solution.

Example: Assume we have Azure Web App URL: https://yourteamsapp.ngrok.io

Create a Bot for Microsoft Teams

We need unique ID to distinguish our app from others on the Microsoft Teams platform. We get this ID by creating Bot in Teams. Create a bot for Microsoft Teams.

Refer steps from https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/bots/bots-create to create new bot in Teams.

Collect APP Id and Password for future reference

Update Manifest.json and Web.Config Files

Go to Manifest folder and open manifest.json file. Make changes as below.

• set the value of the “id” property to the AppID returned by BotFramework.
  
• Change the URLs that point to yourteamsapp.ngrok.io to the URL where the app is hosted (Azure Web App URL). Microsoft Teams will load your app from this location.
  

Add credentials for the bot

• Update web.config within solution folder. Update MicrosoftAppId and MicrosoftAppPassword in following section.
  

Once all changes are completed Rebuild solution file and publish to Azure Web App again.

• Once app is republished to azure web app. Take Zip package (helloworldapp.zip) from bin folder of project solution.
• We need this zip package to be deployed to Microsoft Teams.
  

Upload Zip Package to Microsoft Teams

Go to Microsoft teams Store

Upload Zip — It Will add your app to Microsoft Team Store for you.

Refer URL https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/apps/apps-upload for more details about Upload Package to Microsoft Teams.

Install TeamsAdvanceTab to your Microsoft Teams.

• Go to Store in your Teams. Add App from app section.
  
• Select Appropriate Teams and Install app.
  
• Once we installed TeamsAdvance app, after configuring tab it will look as below.
  

Change Iframe Within Microsoft Team’s Tab

Here I will show you how to change Iframe for tab. This will help you to put your required page in Iframe.

Go to Views -> Home and find First.cshtml. Update Iframe as per your requirement.