Merge pull request #1180 from OfficeDev/v-harikrishnan/AdaptiveCardRe…

…sponsiveLayou

Adaptive Card responsive layout(C# and NodeJS)

samples/bot-formatting-cards/csharp/BotFormattingCards/Cards/AllCards.cs

@@ -193,6 +193,23 @@ public static Attachment sendPersonaCardSetIcons()
 
             return PersonaCardSetIconAdaptiveCardAttachment;
         }
+        /// <summary>
+        /// Adaptive Card updated to be responsive using targetWidth.
+        /// </summary>
+        /// <returns>Return Microsoft.Bot.Schema.Attachment results.</returns>
+        public static Attachment sendResponsiveLayoutCard()
+        {
+            var paths = new[] { ".", "Resources", "adaptiveCardResponsiveLayout.json" };
+            var adaptiveCardlayoutJson = File.ReadAllText(Path.Combine(paths));
+
+            var LayoutCardAdaptiveCardAttachment = new Attachment()
+            {
+                ContentType = contentType,
+                Content = JsonConvert.DeserializeObject(adaptiveCardlayoutJson),
+            };
+
+            return LayoutCardAdaptiveCardAttachment;
+        }
 
     }
 }

samples/bot-formatting-cards/csharp/BotFormattingCards/Dialogs/MainDialog.cs

@@ -113,6 +113,10 @@ private async Task<DialogTurnResult> SelectCardAsync(WaterfallStepContext stepCo
                     // Sends Persona Card Set Icons
                     reply.Attachments.Add(AllCards.sendPersonaCardSetIcons());
                     break;
+                case "Layout":
+                    // Adaptive Card responsive layout
+                    reply.Attachments.Add(AllCards.sendResponsiveLayoutCard());
+                    break;
                 default:
                     reply.Attachments.Add(AllCards.sendInfoMasking());
                     reply.Attachments.Add(AllCards.sendFullWidthCardAdaptiveCard());
@@ -122,6 +126,7 @@ private async Task<DialogTurnResult> SelectCardAsync(WaterfallStepContext stepCo
                     reply.Attachments.Add(AllCards.sendCardWithEmoji());
                     reply.Attachments.Add(AllCards.sendPersonaCardIcons());
                     reply.Attachments.Add(AllCards.sendPersonaCardSetIcons());
+                    reply.Attachments.Add(AllCards.sendResponsiveLayoutCard());
                     break;
             }
 
@@ -155,6 +160,7 @@ private IList<Choice> loadAllCards()
                     new Choice() { Value = "CardWithEmoji", Synonyms = new List<string>() { "CardWithEmoji" } },
                     new Choice() { Value = "Persona", Synonyms = new List<string>() { "Persona" } },
                     new Choice() { Value = "PersonaSet", Synonyms = new List<string>() { "PersonaSet" } },
+                    new Choice() { Value = "Layout", Synonyms = new List<string>() { "Layout" } },
                 };
 
                 return returncardOptions;

samples/bot-formatting-cards/csharp/BotFormattingCards/Resources/adaptiveCardResponsiveLayout.json

@@ -0,0 +1,62 @@
+{
+  "type": "AdaptiveCard",
+  "body": [
+    {
+      "type": "ColumnSet",
+      "columns": [
+        {
+          "type": "Column",
+          "targetWidth": "atLeast:narrow",
+          "items": [
+            {
+              "type": "Image",
+              "style": "Person",
+              "url": "https://aka.ms/AAp9xo4",
+              "size": "Small"
+            }
+          ],
+          "width": "auto"
+        },
+        {
+          "type": "Column",
+          "spacing": "medium",
+          "verticalContentAlignment": "center",
+          "items": [
+            {
+              "type": "TextBlock",
+              "weight": "Bolder",
+              "text": "David Claux",
+              "wrap": true
+            },
+            {
+              "type": "TextBlock",
+              "targetWidth": "atMost:narrow",
+              "spacing": "None",
+              "text": "Platform Architect",
+              "isSubtle": true,
+              "wrap": true
+            }
+          ],
+          "width": "auto"
+        },
+        {
+          "type": "Column",
+          "targetWidth": "atLeast:standard",
+          "spacing": "medium",
+          "items": [
+            {
+              "type": "TextBlock",
+              "text": "Platform Architect",
+              "isSubtle": true,
+              "wrap": true
+            }
+          ],
+          "width": "stretch",
+          "verticalContentAlignment": "center"
+        }
+      ]
+    }
+  ],
+  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+  "version": "1.5"
+}

samples/bot-formatting-cards/csharp/README.md

@@ -249,6 +249,14 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
 ![PersonaCardSetIcon](BotFormattingCards/Images/13.PersonaCardSetIcon.png)
 
+**Adaptive Card updated to be responsive using targetWidth:**
+
+![Layout](BotFormattingCards/Images/14.Layout.png)
+
+**Mobile:**
+
+![Layout](BotFormattingCards/Images/15.LayoutMobile.png)
+
 ## Deploy the bot to Azure
 
 To learn more about deploying a bot to Azure, see [Deploy your bot to Azure](https://aka.ms/azuredeployment) for a complete list of deployment instructions.

samples/bot-formatting-cards/nodejs/Readme.md

@@ -235,7 +235,15 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
 **Code Block in Adaptive Card:**
 
-![PersonaSet](Images/CodeBlocks.png)
+![CodeBlock](Images/12.CodeBlocks.png)
+
+**Adaptive Card updated to be responsive using targetWidth:**
+
+![Layout](Images/13.Layout.png)
+
+**Mobile:**
+
+![LayoutMobile](Images/14.LayoutMobile.png)
 
 ## Deploy the bot to Azure
 

samples/bot-formatting-cards/nodejs/bots/botFormattingCards.js

@@ -13,6 +13,7 @@ const CardWithEmoji = require('../resources/adaptiveCardWithEmoji.json');
 const PeoplePersonaCardIcon = require('../resources/adaptivePeoplePersonaCardIcon.json');
 const PeoplePersonaCardSetIcon = require('../resources/adaptivePeoplePersonaCardSetIcon.json');
 const CodeBlocksCard = require('../resources/codeBlocksCard.json');
+const AdaptiveCardResponsiveLayout = require('../resources/AdaptiveCardResponsiveLayout.json');
 
 class BotFormattingCards extends ActivityHandler {
     constructor() {
@@ -29,9 +30,8 @@ class BotFormattingCards extends ActivityHandler {
         this.onMessage(async (context, next) => {
             const text = context.activity.text;
 
-
             // Create an array with the valid card options.
-            const adaptiveFormatCards = ['CodeBlock', 'MentionSupport', 'InfoMasking', 'FullWidthCard', 'StageViewImages', 'OverflowMenu', 'HTMLConnector', 'CardWithEmoji','Persona','PersonaSet'];
+            const adaptiveFormatCards = ['CodeBlock', 'MentionSupport', 'InfoMasking', 'FullWidthCard', 'StageViewImages', 'OverflowMenu', 'HTMLConnector', 'CardWithEmoji','Persona','PersonaSet','Layout'];
 
             // If the `text` is in the Array, a valid card was selected and sends.
             if (adaptiveFormatCards.includes(text)) {
@@ -76,6 +76,10 @@ class BotFormattingCards extends ActivityHandler {
                     case "CodeBlock":
                         await context.sendActivity({ attachments: [this.sendCodeBlock()] });
                         break;
+
+                    case "Layout":
+                        await context.sendActivity({ attachments: [this.sendLayoutCard()] });
+                        break;                            
                 }
 
                 await context.sendActivity(`You have Selected <b>${text}</b>`);
@@ -120,6 +124,13 @@ class BotFormattingCards extends ActivityHandler {
         return CardFactory.adaptiveCard(CodeBlocksCard);
     }
 
+    /**
+    * Adaptive Card updated to be responsive using targetWidth.
+    */
+    sendLayoutCard() {
+        return CardFactory.adaptiveCard(AdaptiveCardResponsiveLayout);
+    }
+
     /**
     * Sends Sample Adaptive Card With Full Width
     */
@@ -234,6 +245,11 @@ class BotFormattingCards extends ActivityHandler {
                 title: 'CodeBlock',
                 value: 'CodeBlock'
             },
+            {
+                type: ActionTypes.ImBack,
+                title: 'Layout',
+                value: 'Layout'
+            },
             {
                 type: ActionTypes.ImBack,
                 title: '',
@@ -248,4 +264,4 @@ class BotFormattingCards extends ActivityHandler {
     }
 }
 
-module.exports.BotFormattingCards = BotFormattingCards;
+module.exports.BotFormattingCards = BotFormattingCards;

samples/bot-formatting-cards/nodejs/resources/AdaptiveCardResponsiveLayout.json

@@ -0,0 +1,62 @@
+{
+    "type": "AdaptiveCard",
+    "body": [
+      {
+        "type": "ColumnSet",
+        "columns": [
+          {
+            "type": "Column",
+            "targetWidth": "atLeast:narrow",
+            "items": [
+              {
+                "type": "Image",
+                "style": "Person",
+                "url": "https://aka.ms/AAp9xo4",
+                "size": "Small"
+              }
+            ],
+            "width": "auto"
+          },
+          {
+            "type": "Column",
+            "spacing": "medium",
+            "verticalContentAlignment": "center",
+            "items": [
+              {
+                "type": "TextBlock",
+                "weight": "Bolder",
+                "text": "David Claux",
+                "wrap": true
+              },
+              {
+                "type": "TextBlock",
+                "targetWidth": "atMost:narrow",
+                "spacing": "None",
+                "text": "Platform Architect",
+                "isSubtle": true,
+                "wrap": true
+              }
+            ],
+            "width": "auto"
+          },
+          {
+            "type": "Column",
+            "targetWidth": "atLeast:standard",
+            "spacing": "medium",
+            "items": [
+              {
+                "type": "TextBlock",
+                "text": "Platform Architect",
+                "isSubtle": true,
+                "wrap": true
+              }
+            ],
+            "width": "stretch",
+            "verticalContentAlignment": "center"
+          }
+        ]
+      }
+    ],
+    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+    "version": "1.5"
+  }