Microsoft Teams | Generate Deep Link To Custom MSTeams Tab

 

Introduction

 

Deep Linking allows uses tor navigate within your apps. Your app can have MS Teams development instance like Bot, Messaging Extension, or Flow Bot send the message notification to user for an important activity. Deep Link navigates the user to the tab so that the user can view more details about activity.

 

Deep Linking with Tab 

 

Deep Links can be created for Teams entities. In a typical scenario, it is used to create a link that navigates to content and information within your tab. It reduces the context switch. It keeps the user within Teams context without refreshing.

 

Note

The tab can be defined at Personal Tab with personal scope, Channel or Group Tab with teams or group scope. 

 

The following format can be used for deep links in Bot, Connector, Messaging Extension Cards.

 

https://teams.microsoft.com/l/entity/<appId>/<entityId>?webUrl=<entityWebUrl>&label=<entityLabel>&context=<context>

 

The query parameters are, 

• appId 
  The ID from your manifest; for example, "fe4a8eba-2a31-4737-8e33-e5fae6fee194"
  
  
• entityId
  The ID for the item in the tab, which you provided when configuring the tab; for example, "id123"
  
  
• entityWebUrl or subEntityWebUrl
  An optional field with a fallback URL to use if the client does not support rendering the tab; for example, "https://tasklist.example.com/123" or "https://tasklist.example.com/list123/task456"
  
  
• entityLabel or subEntityLabel
  A label for the item in your tab, to use when displaying the deep link; for example, "Task List 123" or "Task 456"
  
  
• context
  A JSON object containing the following fields:
  
  
• subEntityId
  An ID for the item within the tab; for example, "task456"
  
  
• channelId
  The Microsoft Teams channel ID that is available from the tab context; for example, "19:cbe3683f25094106b826c9cada3afbe0@thread.skype". This property is only available in configurable tabs with a scope of "team". It is not available in static tabs, which have a scope of "personal".

To implement this, you can "copy link" action from Tab or action item. You can call this url on button click, which designed via adaptive cards. when you call or click the button which is configured with copy link based url. It will gte back into same context and your tab will be reloaded. 

 

Note

This deep link is different from the link provided by the copy link tab menu, its just generate deep link the points to tab.

• Navigate to Channel Tab, which you want to connect as deep link.
• Click on the "..." top right parllel to tab name.
• Click to "Copy link to tab"

Sample Url will be generate,

 

https://teams.microsoft.com/l/entity/b702977d-06e1-42cc-9166-25ad4d39a9f9/_djb2_msteams_prefix_1145688105?context=%7B%22subEntityId%22%3Anull%2C%22channelId%22%3A%22<<channel id>>%40thread.tacv2%22%7D&groupId=<<group id>>&tenantId=<<tenant id>>

 

Note

Sub Entitiy Id can used to pass as parameterize value, if we need to simply navigate to tab, In that scenario it can be used as null. 

 

Deep Link to tab embed into below adaptive Card, which used into power automate to send notification, On click on button, it will navigate to Tab as well as pass parameterize url.

1. {  
2.     "type": "AdaptiveCard",  
3.     "version": "2.0",  
4.     "body": [  
5.         {  
6.             "type": "TextBlock",  
7.             "text": "New Ticket Created",  
8.             "weight": "Bolder"  
9.         },  
10.         {  
11.             "type": "FactSet",  
12.             "facts": [  
13.                 {  
14.                     "title": "Ticket ID",  
15.                     "value": "@{triggerOutputs()?['body/ID']}"  
16.                 },  
17.                 {  
18.                     "title": "Ticket Detail",  
19.                     "value": "@{triggerOutputs()?['body/Title']}"  
20.                 },  
21.                {  
22.                     "title": "RequestedBy",  
23.                     "value": "@{triggerOutputs()?['body/RequestorName/DisplayName']}"  
24.                 },  
25.                {  
26.                     "title": "Severity",  
27.                     "value": "@{triggerOutputs()?['body/Severity/Value']}"  
28.                 },  
29.                {  
30.                     "title": "Category",  
31.                     "value": "@{triggerOutputs()?['body/Category/Value']}"  
32.                 }             
33.             ],  
34.             "spacing": "Medium"  
35.         },  
36.         {  
37.             "type": "ActionSet",  
38.             "actions": [  
39.                 {  
40.                     "type": "Action.OpenUrl",  
41.                     "title": "View Ticket",  
42.                     "url": "https://teams.microsoft.com/l/entity/b702977d-06e1-42cc-9166-25ad4d39a9f9/_djb2_msteams_prefix_1145688105?context=%7B%22subEntityId%22%3A@{triggerOutputs()?['body/ID']}%2C%22channelId%22%3A%2219%3A123c0abe7f0041c68066801eb8a0f8d2%40thread.tacv2%22%7D&groupId=e8312347-f8cd-4177-8661-88b335dab65b&tenantId=4cd94c60-104d-4a43-b441-e735fc34830b",  
43.                     "style": "positive"  
44.                 }  
45.             ]  
46.         }  
47.     ],  
48.     "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"  
49. }  

Finally, we need to find out, how to consume item id into SPFx webpart. It can be achived easily with the below steps.

 

Package needed to import,

1. import * as microsoftTeams from "@microsoft/teams-js";  

Initialize into constructor,

1. microsoftTeams.initialize();  

SubEntityId used to get the parameterized value, assigned to provided variable and same can be used further. 

1. public componentWillMount() {  
2.      
3.     microsoftTeams.getContext(teamsContext => {  
4.     this.itemId = teamsContext.subEntityId;  
5.     });  
6.   }  

How easy and quick it was to build a custom Custom Deep Link to Tab. 

 

I hope you have enjoyed and learned something new in this article and Happy Learning !!