Got an interesting request this week. One of our customers would like to create a button on left side of Teams (where the custom apps are hosted) and redirect to a custom tab in a specific channel created in a team. That can be easily achieved using what we call deep links. Deep links in Teams can be used for:

  • Navigating the user to content within one of your app’s tabs. For instance, your app may have a bot that sends messages notifying the user of an important activity. When the user taps on the notification, the deep link navigates to the tab so the user can view more details about the activity.
  • Your app automates or simplifies certain user tasks, such as creating a chat or scheduling a meeting, by pre-populating the deep links with required parameters. This avoids the need for users to manually enter information.

Using deep links in custom apps is very powerful. It is possible, for example, to create a gateway application that coordinates navigation to multiple teams, channels and tabs. You can have buttons that guide the user to custom apps actually running in different channels across Teams.

Coming back to the specific request, there are some steps to follow:

Create the tab in the channel

No need to describe the required steps here. You just need to click on the channel you want to create the tab, click the + sign and add the tab that will be the target for your navigation.

Get the deep link for the tab

With the tab created, click … on the upper right hand side and select Copy link to tab. Take a note of the link, we will need in the next steps.

Annotation 2020-06-12 170004

Create a html page embedding the Teams client SDK

Now you need to create a simple HTML page and reference the Teams Client SDK. That will allow us to use a set of functions to actually interface with the teams client and execute the navigation from the personal tab on the left hand side in the client to the tab you just saved the link to.

The code of my HTML page is below:

Annotation 2020-06-12 171120

You need to paste the deep link in the executeDeepLink function in the code above. Now put the html file in a public webserver.

Create the custom app using Teams App Studio

Install Teams App Studio in your teams client, click on the Manifest Editor and create a new App. In Capabilities, create a new personal tab pointing to your webpage. That’s it, now when you click in your app icon on the left hand side the default custom tab will execute the deep link and navigate to your custom tab created in a channel.

Annotation 2020-06-12 171456

Main reference:

Disclaimer – The information contained in this blog post doesn’t represent the official Microsoft guidance or best practices. It is just the view of the author on current alternatives, implementations and workarounds for common issues and/or business needs. Please refer to official Microsoft documentation and evaluate carefully any steps, code or procedures documented herein. The author doesn’t offer any warranty. Use this information at your own risk.