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.
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:
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.
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.
September 10, 2020 at 11:54 am
Hi, we have adapted this app into a desk booking system for our return to the office. It’s working great, but the following are the most-requested features I’ve come across:
1. Booking on behalf of another person. PAs need to be able to book desks for their bosses.
2. Per-neighbourhood approvals (which I see you’ve already covered in another blog)
3. View others desk bookings.
4. Ability to select multiple days for a single desk in one go.
5.Set approvals to go to a specific person rather that line manager.
Also, we’ve found a bug. Each space (renamed “desk” in our case) is created in a building (which we’ve renamed “neighbourhood”) with a capacity of 1. If two users have the same neighbourhood and date open in the app they will both see that a desk is free. If they both click to book then it will allow 2 bookings against a desk that has a capacity of 1. After a refresh this desk will then show as booked but with an availability of -1.