Converted samples to use dialog.open and dialog.submit [Don't Merge] (#…

…762)

* tab product inspection sample changes

* added more samples to use dialog

* Update README Task Module to Dialogs

* Updated PR Comments

* Updated PR Comments

* Updated Reamde and sample json

* Updated code comments

* Update Task -Module to Teams Dialog (referred as task modules in TeamsJS v1.x)

* Updated Reamde and images

* Updated Readme

* Update Task Module to Teams Dialogs

* Nodejs Reamde updated

* Updated Readme

---------

Co-authored-by: Harikrishnan Rajandiran <[email protected]>

README.md

@@ -219,7 +219,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 
 |    | Sample Name    | Description                                                                      | C#    | JavaScript      |App Manifest|
 |:--:|:---------------|:---------------------------------------------------------------------------------|:------|:----------------|:-------|
-|1|Task Modules          | Sample app showing off the Teams Task Module, a way to invoke custom code from a bot, a tab, or both! |[View][bot-task-module#cs]     |[View][bot-task-module#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/bot-task-module/csharp/demo-manifest/bot-task-module.zip)
+|1|Teams Dialogs (referred as task modules in TeamsJS v1.x)         | Sample app showing off the Teams Dialogs(referred as task modules in TeamsJS v1.x), a way to invoke custom code from a bot, a tab, or both! |[View][bot-task-module#cs]     |[View][bot-task-module#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/bot-task-module/csharp/demo-manifest/bot-task-module.zip)
 |2|Authentication        | Sample illustrating seamless inline authentication for Microsoft Teams apps.                      | | [View][app-auth#ts]
 |3|Complete Samples      | Sample covering multiple scenarios - dialogs, ME, and facebook auth.                                      |[View][app-complete#cs]        |[View][app-complete#ts] ![toolkit-icon](assets/toolkit-icon.png) 
 |4|Region Selection App | This app contains a bot and Tab which is helpful to set the region |[View][region-selection-app#cs]     ||[View](/samples/app-region-selection/csharp/demo-manifest/app-region-selection.zip)

samples/bot-task-module/csharp/Bots/TeamsTaskModuleBot.cs

@@ -77,10 +77,10 @@ private static void SetTaskInfo(TaskModuleTaskInfo taskInfo, UISettings uIConsta
 
         private static Attachment GetTaskModuleHeroCardOptions()
         {
-            // Create a Hero Card with TaskModuleActions for each Task Module
+            // Create a Hero Card with TaskModuleActions for each Dialogs (referred as task modules in TeamsJS v1.x)
             return new HeroCard()
             {
-                Title = "Task Module Invocation from Hero Card",
+                Title = "Dialogs (referred as task modules in TeamsJS v1.x) Invocation from Hero Card",
                 Buttons = new[] { TaskModuleUIConstants.AdaptiveCard, TaskModuleUIConstants.CustomForm, TaskModuleUIConstants.YouTube }
                             .Select(cardType => new TaskModuleAction(cardType.ButtonTitle, new CardTaskFetchValue<string>() { Data = cardType.Id }))
                             .ToList<CardAction>(),
@@ -89,12 +89,12 @@ private static Attachment GetTaskModuleHeroCardOptions()
 
         private static Attachment GetTaskModuleAdaptiveCardOptions()
         {
-            // Create an Adaptive Card with an AdaptiveSubmitAction for each Task Module
+            // Create an Adaptive Card with an AdaptiveSubmitAction for each Dialogs (referred as task modules in TeamsJS v1.x)
             var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 2))
             {
                 Body = new List<AdaptiveElement>()
                     {
-                        new AdaptiveTextBlock(){ Text="Task Module Invocation from Adaptive Card", Weight=AdaptiveTextWeight.Bolder, Size=AdaptiveTextSize.Large}
+                        new AdaptiveTextBlock(){ Text="Dialogs (referred as task modules in TeamsJS v1.x) Invocation from Adaptive Card", Weight=AdaptiveTextWeight.Bolder, Size=AdaptiveTextSize.Large}
                     },
                 Actions = new[] { TaskModuleUIConstants.AdaptiveCard, TaskModuleUIConstants.CustomForm, TaskModuleUIConstants.YouTube }
                             .Select(cardType => new AdaptiveSubmitAction() { Title = cardType.ButtonTitle, Data = new AdaptiveCardTaskFetchValue<string>() { Data = cardType.Id } })

samples/bot-task-module/csharp/Pages/Configure.cshtml

@@ -12,7 +12,7 @@
     <p>
         <label for="tabChoice">Select the tab you would like to see: </label>
         <div>
-            <input type="radio" name="tabType" value="tasks" onclick="onClick()">Task Module<br>
+            <input type="radio" name="tabType" value="tasks" onclick="onClick()">Teams Dialogs<br>
             <input type="radio" name="tabType" value="helloworld" onclick="onClick()"> Hello World
         </div>
     </p>
@@ -27,7 +27,7 @@
             microsoftTeams.settings.setSettings({
                 entityId: "tasks",
                 contentUrl: @Json.Serialize(Configuration["BaseUrl"])+"/tasks",
-                suggestedDisplayName: "Task Module CSharp",
+                suggestedDisplayName: "Teams Dialogs CSharp",
                 websiteUrl: @Json.Serialize(Configuration["BaseUrl"])+"/tasks"
             });
         } else {
@@ -46,4 +46,4 @@
         microsoftTeams.settings.setValidityState(true);
     }
 
-</script>
+</script>

samples/bot-task-module/csharp/Pages/CustomForm.cshtml

@@ -14,18 +14,18 @@
             padding-right: 4px;
         }
     </style>
-    <title>Microsoft Teams Task Module Tester - Custom Form</title>
+    <title>Microsoft Teams Dialogs (referred as task modules in TeamsJS v1.x) Tester - Custom Form</title>
 </head>
 <body>
     <script>
-        microsoftTeams.initialize();
+        microsoftTeams.initialize(); 
         function validateForm() {
             var customerInfo = {
                 name: document.forms["customerForm"]["name"].value,
                 email: document.forms["customerForm"]["email"].value,
                 favoriteBook: document.forms["customerForm"]["favoriteBook"].value
             }
-            microsoftTeams.tasks.submitTask(customerInfo, "@Model.MicrosoftAppId");
+            microsoftTeams.dialog.submit(customerInfo, "@Model.MicrosoftAppId");
             return true;
         }
     </script>

samples/bot-task-module/csharp/Pages/HelloWorld.cshtml

@@ -4,5 +4,5 @@
     Layout = "~/Pages/Shared/_Layout.cshtml";
 }
 <p>
-    Welcome to Microsoft Teams Task Module Sample App (C#)
-</p>
+    Welcome to Microsoft Teams Dialogs (referred as task modules in TeamsJS v1.x) Sample App (C#)
+</p>

samples/bot-task-module/csharp/Pages/PowerApp.cshtml

@@ -9,7 +9,7 @@
 <iframe width="720" height="520" style="width: 94%;" src="https://web.powerapps.com/webplayer/iframeapp?source=iframe&amp;screenColor=rgba(104,101,171,1)&amp;appId=/providers/Microsoft.PowerApps/apps/f998c01d-522c-46ad-9690-f67f271afdfe"></iframe>
 <div class="surface" id="powerAppError" style="display: none; padding: 20px;">
     <p>
-        This task module shows an "Asset Checkout" PowerApp (you'll find more information on it <a href="https://powerusers.microsoft.com/t5/Community-Apps-Gallery/Asset-Checkout-Microsoft-sample/td-p/43221" target="_blank">here</a>). Unfortunately, PowerApps
+        This dialogs (referred as task modules in TeamsJS v1.x)  shows an "Asset Checkout" PowerApp (you'll find more information on it <a href="https://powerusers.microsoft.com/t5/Community-Apps-Gallery/Asset-Checkout-Microsoft-sample/td-p/43221" target="_blank">here</a>). Unfortunately, PowerApps
         are tenant-specific. The one in this sample only works on the Microsoft.com tenant.
     </p>
     <p>To create your own:</p>
@@ -37,4 +37,3 @@
         }
     });
 </script>
-

samples/bot-task-module/csharp/Pages/Shared/_EmbedPage.cshtml

@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
-    <script src="https://statics.teams.cdn.office.net/sdk/v1.5.2/js/MicrosoftTeams.min.js" asp-append-version="true"></script>
+    <script src="https://res.cdn.office.net/teams-js/2.6.1/js/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
 
     @RenderSection("scripts", required: false)
 </head>
@@ -32,7 +32,7 @@
         //- Handle the Esc key
         document.onkeyup = function (event) {
             if ((event.key === 27) || (event.key === "Escape")) {
-                microsoftTeams.tasks.submitTask(null); //- this will return an err object to the completionHandler()
+                microsoftTeams.dialog.submit(null); //- this will return an err object to the completionHandler()
             }
         }</script>
     <div id="embed-container">@RenderBody()</div>

samples/bot-task-module/csharp/Pages/Shared/_Layout.cshtml

@@ -6,7 +6,8 @@
     <link rel="stylesheet" href="~/css/Custom.css" />
     <link rel="stylesheet" href="~/css/Site.css" />
 
-    <script src="https://statics.teams.cdn.office.net/sdk/v1.5.2/js/MicrosoftTeams.min.js" asp-append-version="true"></script>
+    <script src="https://res.cdn.office.net/teams-js/2.6.1/js/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
+    </script>
 
     @RenderSection("scripts", required: false)
 </head>

samples/bot-task-module/csharp/Pages/Tasks.cshtml

@@ -13,9 +13,9 @@
     DeeplinkHelper deepLinkHelper = new DeeplinkHelper(@Json.Serialize(Configuration["MicrosoftAppId"]).ToString(), @Json.Serialize(Configuration["BaseUrl"]).ToString());
 }
 
-<div class="font-semibold font-title">Microsoft Teams Task Modules Demo</div>
+<div class="font-semibold font-title">Microsoft Teams Dialogs (referred as task modules in TeamsJS v1.x) Demo</div>
 <p>
-    A task module allows Teams app developers to create one or more custom, modal experiences with custom code for their users, particularly useful for initiating and/or completing tasks using a GUI that does not litter a Teams conversation with superfluous,
+    A dialog (referred as task modules in TeamsJS v1.x) allows Teams app developers to create one or more custom, modal experiences with custom code for their users, particularly useful for initiating and/or completing tasks using a GUI that does not litter a Teams conversation with superfluous,
     intermediate task completion information.
 </p>
 <p>
@@ -39,50 +39,56 @@
 <p></p>
 <script src="~/Scripts/teamsapp.js"></script>
 <script>
-    microsoftTeams.initialize();
+    microsoftTeams.app.initialize();
 
-    submitHandler = (err, result) => {
+    submitHandler = (err) => {
             console.log(`Submit handler - err: ${err}`);
         };
 
         function Submit(type) {
             let taskInfo = {
                 title: null,
-                height: null,
-                width: null,
+                size: null,
                 url: null,
                 card: null,
                 fallbackUrl: null,
                 completionBotId: null,
             };
 
-            taskInfo.title = "Task Module Demo";
-            taskInfo.height = "medium";
-            taskInfo.width = "medium";
+            let taskModuleSize = {
+                height: 400,
+                width: 400,
+            };
+
+        taskInfo.title = "Teams Dialogs Demo";
 
             if (type.includes('youtube')) {
             taskInfo.url = @Json.Serialize(Configuration["BaseUrl"]) + "/youtube";
                 taskInfo.title = "@(TaskModuleUIConstants.YouTube.Title)";
-                taskInfo.height = "@(TaskModuleUIConstants.YouTube.Height)";
-                taskInfo.width = "@(TaskModuleUIConstants.YouTube.Width)";
+                taskModuleSize.height = "@(TaskModuleUIConstants.YouTube.Height)";
+                taskModuleSize.width = "@(TaskModuleUIConstants.YouTube.Width)";
+                taskInfo.size = taskModuleSize;
             }
             else if (type.includes('powerapp')) {
             taskInfo.url = @Json.Serialize(Configuration["BaseUrl"]) + "/powerapp";
                 taskInfo.title = "@(TaskModuleUIConstants.PowerApp.Title)";
-                taskInfo.height = "@(TaskModuleUIConstants.PowerApp.Height)";
-                taskInfo.width = "@(TaskModuleUIConstants.PowerApp.Width)";
+                taskModuleSize.height = "@(TaskModuleUIConstants.PowerApp.Height)";
+                taskModuleSize.width = "@(TaskModuleUIConstants.PowerApp.Width)";
+                taskInfo.size = taskModuleSize;
             }
             else if (type.includes('customform')) {
             taskInfo.url = @Json.Serialize(Configuration["BaseUrl"]) + "/customform";
                 taskInfo.title = "@(TaskModuleUIConstants.CustomForm.Title)";
-                taskInfo.height = "@(TaskModuleUIConstants.CustomForm.Height)";
-                taskInfo.width = "@(TaskModuleUIConstants.CustomForm.Width)";
+                taskModuleSize.height = "@(TaskModuleUIConstants.CustomForm.Height)";
+                taskModuleSize.width = "@(TaskModuleUIConstants.CustomForm.Width)";
+                taskInfo.size = taskModuleSize;
             }
             else {
                 taskInfo.card =  @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(AdaptiveCardHelper.GetAdaptiveCard()));
                 taskInfo.title = "@(TaskModuleUIConstants.AdaptiveCard.Title)";
-                taskInfo.height = "@(TaskModuleUIConstants.AdaptiveCard.Height)";
-                taskInfo.width = "@(TaskModuleUIConstants.AdaptiveCard.Width)";
+                taskModuleSize.height = "@(TaskModuleUIConstants.AdaptiveCard.Height)";
+                taskModuleSize.width = "@(TaskModuleUIConstants.AdaptiveCard.Width)";
+                taskInfo.size = taskModuleSize;
             }
 
             // Set fallback URL
@@ -91,6 +97,6 @@
             if (type.includes('bot'))
             taskInfo.completionBotId = @Json.Serialize(Configuration["MicrosoftAppId"]);
 
-            microsoftTeams.tasks.startTask(taskInfo, submitHandler);
+            microsoftTeams.dialog.open(taskInfo, submitHandler);
         }
 </script>

samples/bot-task-module/csharp/README.md

@@ -1,6 +1,6 @@
 ---
 page_type: sample
-description: This sample app demonstrate how to use Task Module using Bot Framework v4
+description: This sample app demonstrate how to use Dialogs (referred as task modules in TeamsJS v1.x) using Bot Framework v4
 products:
 - office-teams
 - office
@@ -13,24 +13,24 @@ extensions:
 urlFragment: officedev-microsoft-teams-samples-bot-task-module-csharp
 
 ---
-# Teams Task Module
+# Teams Dialog (referred as task modules in TeamsJS v1.x)
 
-Bot Framework Teams Task Module sample.
+Bot Framework Teams Dialogs (referred as task modules in TeamsJS v1.x) sample.
 
-This bot has been created using [Bot Framework](https://dev.botframework.com). It shows how to fetch a Task Module from Hero Card or Adaptive Card buttons and receive input from the Task Module in the bot.
+This bot has been created using [Bot Framework](https://dev.botframework.com). It shows how to fetch a Dialog (referred as task modules in TeamsJS v1.x) from Hero Card or Adaptive Card buttons and receive input from the Dialog (referred as task modules in TeamsJS v1.x) in the bot.
 
 ## Included Features
 * Bots
 * Tabs
-* Task Modules
+* Dialogs (referred as task modules in TeamsJS v1.x)
 
 ## Interaction with bot
 ![bot-task-module ](Images/Bot_Tab_TaskModule.gif)
 
 ## Try it yourself - experience the App in your Microsoft Teams client
 Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app manifest (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, [see steps here](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading)).
 
-**Teams Task Module:** [Manifest](/samples/bot-task-module/csharp/demo-manifest/bot-task-module.zip)
+**Teams Dialogs (referred as task modules in TeamsJS v1.x):** [Manifest](/samples/bot-task-module/csharp/demo-manifest/bot-task-module.zip)
 
 ## Prerequisites
 
@@ -124,35 +124,35 @@ the Teams service needs to call into the bot.
 
 > Note this `manifest.json` specified that the bot will be installed in "personal", "team" and "groupchat" scope which is why you immediately entered a one on one chat conversation with the bot. You can at mention the bot in a group chat or in a Channel in the Team you installed it in. Please refer to Teams documentation for more details.
 
-You can interact with this bot by sending it a message. The bot will respond with a Hero Card and Adaptive Card with buttons which will display a Task Module when clicked. The Task Modules demonstrate retrieving input from a user, or displaying custom web page content.
+You can interact with this bot by sending it a message. The bot will respond with a Hero Card and Adaptive Card with buttons which will display a Dialog (referred as task modules in TeamsJS v1.x) when clicked. The Dialogs (referred as task modules in TeamsJS v1.x) demonstrate retrieving input from a user, or displaying custom web page content.
 
 - **Personal Scope Interactions:**
 
-![ps-AddApp ](Images/ps-AddApp.png)
+![1.InstallApp ](Images/1.InstallApp.png)
 
-![ps-Cards ](Images/ps-Cards.png)
+![2.Dialogs ](Images/2.Dialogs.png)
 
-![ps-AC-TaskModule ](Images/ps-AC-TaskModule.png)
+![2.GroupDialogs ](Images/2.GroupDialogs.png)
 
-![ps-AC-TaskModule-Submit ](Images/ps-AC-TaskModule-Submit.png)
+![3.AdaptiveCard ](Images/3.AdaptiveCard.png)
 
-- **Group Chat Scope Interactions:**
+![4.ThanksAdaptiveCard ](Images/4.ThanksAdaptiveCard.png)
 
-![gc-Interaction ](Images/gc-Interaction.png)
+![5.CustomForm ](Images/5.CustomForm.png)
 
-- **Team Scope Interactions:**
+![6.Results ](Images/6.Results.png)
 
-![ts-Interaction ](Images/ts-Interaction.png)
+![7.YouTube ](Images/7.YouTube.png)
 
-![tasks](Images/tasks.png)
+![8.Task ](Images/8.Task.png)
 
-![youtube](Images/youtube.png)
+![9.PowerApp ](Images/9.PowerApp.png)
 
-![Customform](Images/Customform.png)
+![10.GroupChat ](Images/10.GroupChat.png)
 
-![customformregister](Images/customformregister.png)
+![11.GroupCustomForm ](Images/12.GroupCustomForm.png)
 
-![TabAdaptiveCard](Images/Tab_AdaptiveCard.png)
+![12.GroupResults ](Images/13.GroupResults.png)
 
 ## Deploy the bot to Azure
 
@@ -164,6 +164,6 @@ To learn more about deploying a bot to Azure, see [Deploy your bot to Azure](htt
 - [Bot Basics](https://docs.microsoft.com/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0)
 - [Azure Bot Service Introduction](https://docs.microsoft.com/azure/bot-service/bot-service-overview-introduction?view=azure-bot-service-4.0)
 - [Azure Bot Service Documentation](https://docs.microsoft.com/azure/bot-service/?view=azure-bot-service-4.0)
-- [Task modules](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/what-are-task-modules)
+- [Dialogs](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/what-are-task-modules)
 
 <img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/bot-task-module-csharp" />

samples/bot-task-module/csharp/TeamsApp/appPackage/manifest.json

@@ -15,12 +15,12 @@
     "outline": "outline.png"
   },
   "name": {
-    "short": "Task Module",
-    "full": "Simple Task Module"
+    "short": "Teams Dialogs",
+    "full": "Teams Dialog (referred as task modules in TeamsJS v1.x)"
   },
   "description": {
-    "short": "Test Task Module Scenario",
-    "full": "Simple Task Module Scenario Test"
+    "short": "Teams Dialog (referred as task modules in TeamsJS v1.x)",
+    "full": "This is an sample application which showcases how to invoke dialog (referred as task modules in TeamsJS v1.x) from adaptive and hero cards."
   },
   "accentColor": "#FFFFFF",
   "configurableTabs": [

samples/bot-task-module/csharp/assets/sample.json

@@ -2,11 +2,11 @@
   {
     "name": "officedev-microsoft-teams-samples-bot-task-module-csharp",
     "source": "officeDev",
-    "title": "Task Module using Bot Framework v4",
-    "shortDescription": "This sample app demonstrate how to use Task Module using Bot Framework v4",
+    "title": "Dialogs (referred as task modules in TeamsJS v1.x) using Bot Framework v4",
+    "shortDescription": "This sample app demonstrate how to use Dialog (referred as task modules in TeamsJS v1.x) using Bot Framework v4",
     "url": "https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-task-module/csharp",
     "longDescription": [
-      "This sample app demonstrate how to use Task Module using Bot Framework v4"
+      "This sample app demonstrate how to use Dialog (referred as task modules in TeamsJS v1.x) using Bot Framework v4"
     ],
     "creationDateTime": "2019-10-17",
     "updateDateTime": "2022-12-06",
@@ -36,7 +36,7 @@
         "type": "image",
         "order": 100,
         "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-task-module/csharp/Images/Bot_Tab_TaskModule.gif",
-        "alt": "Solution UX showing Task Module using Bot Framework v4"
+        "alt": "Solution UX showing Dialog (referred as task modules in TeamsJS v1.x) using Bot Framework v4"
       }
     ],
     "authors": [