Merge pull request OfficeDev#1182 from OfficeDev/v-pritka/tab-stage-v…

…iew-update added changes for opening stage view through deep link
igecloudsdev · Apr 16, 2024 · 44a2ad3 · 44a2ad3
2 parents ac2f441 + 3af1b13
commit 44a2ad3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 9 deletions.
diff --git a/samples/bot-all-cards/csharp/demo-manifest/bot-all-cards.zip b/samples/bot-all-cards/csharp/demo-manifest/bot-all-cards.zip
diff --git a/samples/tab-stage-view/csharp/TabInStageView/Bots/ActivityBot.cs b/samples/tab-stage-view/csharp/TabInStageView/Bots/ActivityBot.cs
@@ -24,6 +24,7 @@ public class ActivityBot : TeamsActivityHandler
     {
         private readonly string _appId;
         private readonly string _applicationBaseURL;
+        public static string _threadId;
 
         /// <summary>
         /// Initializes a new instance of the <see cref="ActivityBot"/> class.
@@ -45,6 +46,10 @@ public ActivityBot(IConfiguration configuration)
         protected override async Task OnMembersAddedAsync(IList<ChannelAccount> membersAdded, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)
         {
             var welcomeText = "Hello and welcome!, Please type any bot command to see the stage view feature";
+
+            // Set thread Id
+            _threadId = turnContext.Activity.Conversation.Id;
+
             foreach (var member in membersAdded)
             {
                 if (member.Id != turnContext.Activity.Recipient.Id)

diff --git a/samples/tab-stage-view/csharp/TabInStageView/Models/TabInfoAction.cs b/samples/tab-stage-view/csharp/TabInStageView/Models/TabInfoAction.cs
@@ -5,6 +5,7 @@
 namespace TabInStageView.Models
 {
     using Newtonsoft.Json;
+    using System;
 
     /// <summary>
     /// Tab info action model class.
@@ -22,5 +23,16 @@ public class TabInfoAction
         /// </summary>
         [JsonProperty("tabInfo")]
         public TabInfo TabInfo { get; set; }
+
+        /// <summary>
+        /// Gets or sets tab info.
+        /// </summary>
+        [JsonProperty("threadId")]
+        public string? ThreadId { get; set; } = string.Empty;
+
+        public TabInfoAction()
+        {
+            ThreadId = "";
+        }
     }
 }
diff --git a/samples/tab-stage-view/csharp/TabInStageView/Views/Home/SampleTab.cshtml b/samples/tab-stage-view/csharp/TabInStageView/Views/Home/SampleTab.cshtml
@@ -1,26 +1,47 @@
-<!DOCTYPE html>
+@page
+@model TabInStageView.Models.TabInfoAction
+
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
-    <script
-          src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js"
-          integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4"
-          crossorigin="anonymous">
+    <script src="https://res.cdn.office.net/teams-js/2.8.0/js/MicrosoftTeams.min.js"
+            integrity="sha384-/DJ9oJEFZSpGiUQx9Na5Yb5svOPPqSb3khKxJ/YgoZ2GtrkzWgSTBpESy3LvMPVk"
+            crossorigin="anonymous">
     </script>
     <script>
-        microsoftTeams.app.initialize().then(() => {
-        });
+        // App Initilize
+        microsoftTeams.app.initialize();
+
         function createLink() {
+
             // Client id
             var appId = '@(ViewBag.AppId)';
 
+            // Get thread id by this format "19:***********thread.v2";
+            var threadId = "@TabInStageView.Bots.ActivityBot._threadId";
+
             // Application base url and this redirects to Index view
             var contentUrl = window.location.origin;
 
+            var context = {
+                appId: appId,
+                contentUrl: contentUrl,
+                websiteUrl: contentUrl,
+                name: "DemoStageView",
+                openMode: "popoutWithChat",
+                threadId:threadId
+            }
+
+            const encodedContext = encodeURIComponent(JSON.stringify(context));
+
             // Passing the values and encoding the url while implementing the deeplink from tab
-            let url = "https://teams.microsoft.com/l/stage/" + appId + "/0?context={\"contentUrl\":\"" + contentUrl + "\",\"websiteUrl\":\"" + contentUrl +"\",\"name\":\"DemoStageView\"}";
+            let url = "https://teams.microsoft.com/l/stage/" + appId + "/0?context=" + encodedContext;
+
+            console.log("eoncoded URL",url);
+
             microsoftTeams.app.openLink(url);
-            };
+        };
     </script>
 </head>