teamsTab deep link not working in Microsoft Teams app - microsoft-graph-api

Question

In our teams app we have two kind of tabs - one static and teamsTabs. ( A teamsTab is a tab that's pinned (attached) to a channel within a team. There is a code that add it to a meeting and there is one tab per meeting. ) We want a button in the static tab to open one of the teamsTab. According to the documentation, we can find the webUrl, which is a deep link URL of the tab instance. But following this url does not navigate to the needed tab. It just reloads the current static tab. How can we make this work?
How we add the tab to a meeting:
addAppTabToMeeting(accessToken: string, meetingId: string, appId: string): any {
const signInDeferred = $.Deferred();
const getMessageUrl = this.graphRestUrlBeta + "/chats/" + meetingId + "/tabs";
const meetingData = {
"displayName": "testapp",
"teamsApp#odata.bind": this.graphRestUrlBeta + "/appCatalogs/teamsApps/" + appId,
"configuration": {
"entityId": meetingId.replace(/\W/g, ""),
"contentUrl": ConfigHelper.getConfig("teamsBaseUri") + "content"
}
};
fetch(getMessageUrl, {
method: 'POST',
headers: new Headers({
'Authorization': 'Bearer ' + accessToken,
'Content-Type': 'application/json'
}),
body: JSON.stringify(meetingData)
}).then(response => response.json())
.then(meetings => {
console.log(meetings);
signInDeferred.resolve(meetings);
});
return signInDeferred.promise();
}
Snippet from manifest.json:
"configurableTabs": [
{
"configurationUrl": "https://localhost:3000/config",
"canUpdateConfiguration": true,
"scopes": [
"groupchat"
],
"context": [
"meetingChatTab",
"meetingDetailsTab",
"meetingSidePanel"
]
}
],
"staticTabs": [
{
"entityId": "testapp.create.meeting",
"scopes": [
"personal"
],
"name": "Display name of tab",
"contentUrl": "https://localhost:3000/intro"
}
],
"permissions": [
"identity",
"messageTeamMembers"
],
"devicePermissions": [
"openExternal"
],
How the deep link is consumed:
{props.hearing.tabUrl && <Button content="Deep Link" onClick={()=>{
if (props.hearing.tabUrl) microsoftTeams.executeDeepLink(props.hearing.tabUrl);
}}/>}
Examples of obtained teamsTabs webUrls:
https://teams.microsoft.com/l/entity/b4eb8705-8e3a-4d17-be5c-5ffc3c2a26bf/_djb2_msteams_prefix_821ac114-71b2-4ae3-ad68-bafad1c54f1f?label=testapp&context=%7b%0d%0a++%22context%22%3a+%22chat%22%2c%0d%0a++%22chatId%22%3a+%2219%3ameeting_ZWI3YzhjOWEtNTYyMi00MjQ2LWJkNTEtOWEzYTM1YTAzNjhj%40thread.v2%22%2c%0d%0a++%22subEntityId%22%3a+null%0d%0a%7d&tenantId=1fa1032b-7875-4a35-aaf9-2cbfb3cd341b
https://teams.microsoft.com/l/entity/b4eb8705-8e3a-4d17-be5c-5ffc3c2a26bf/_djb2_msteams_prefix_94ce4d73-9146-4a46-89ca-ddcdd8cc2c31?label=testapp&context=%7b%0d%0a++%22context%22%3a+%22chat%22%2c%0d%0a++%22chatId%22%3a+%2219%3ameeting_OTM1ZjFjNWItNTQxNS00MzcwLWI5NDctMjg4NzM3MTIyYzRl%40thread.v2%22%2c%0d%0a++%22subEntityId%22%3a+null%0d%0a%7d&tenantId=1fa1032b-7875-4a35-aaf9-2cbfb3cd341b
Edit 0: It is interesting that, if we replace "context" with "contextType" and use the resulting url in an empty browser tab, it opens the needed tab. But the following code, doesn't achieve the same result. A button click just reloads the current page.
{props.hearing.tabUrl && <Button content="Deep Link" onClick={()=>{
if (props.hearing.tabUrl) microsoftTeams.executeDeepLink(props.hearing.tabUrl.replace("%22context%22", "%22contextType%22"));
}}/>}

Answer 1

Decode the url as below and try. It worked in this way:
var contentUrl = "https://localhost:3000/intro";
var channelId = "19:meeting_ZWI3YzhjOWEtNTYyMi00MjQ2LWJkNTEtOWEzYTM1YTAzNjhj#thread.v2";
microsoftTeams.executeDeepLink("https://teams.microsoft.com/l/entity/b4eb8705-8e3a-4d17-be5c-5ffc3c2a26bf/_djb2_msteams_prefix_821ac114-71b2-4ae3-ad68-bafad1c54f1f?label=testapp&context={\"canvasUrl\":\"" + contentUrl + "\",\"channelId\":\"" + channelId + "\",\"subEntityId\":\"null\"}&tenantId=36a708ef-700d-4d60-9de0-0a5f7b7693df");