Merge pull request #1425 from OfficeDev/v-hrajandira/UpdateBotFormatt…

…ingCardsSample

Added Fluent Icon, Media Elements, and Star Ratings in Adaptive Cards (Csharp, Nodejs)

samples/bot-formatting-cards/csharp/BotFormattingCards/Bots/DialogBot.cs

@@ -15,6 +15,7 @@
 using Microsoft.Bot.Schema;
 using Microsoft.Bot.Schema.Teams;
 using Microsoft.Extensions.Logging;
+using Newtonsoft.Json.Linq;
 
 namespace Microsoft.BotBuilderSamples
 {
@@ -106,11 +107,21 @@ protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivi
                 await turnContext.SendActivityAsync(MessageFactory.Text("Type anything to see all card."), cancellationToken);
 
             }
+            else if (turnContext.Activity.Value != null && turnContext.Activity.Text == null)
+            {
+                JObject activityValue = (JObject)turnContext.Activity.Value;
+                // Star ratings in Adaptive Cards
+                if (activityValue.ContainsKey("rating1") && activityValue.ContainsKey("rating2"))
+                {
+                    await turnContext.SendActivityAsync(MessageFactory.Text("Ratings Feedback: " + turnContext.Activity.Value), cancellationToken);
+                }
+            }
             else
             {
                 // Run the Dialog with the new message Activity.
                 await Dialog.RunAsync(turnContext, ConversationState.CreateProperty<DialogState>(nameof(DialogState)), cancellationToken);
             }
+
         }
     }
 }

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

@@ -239,5 +239,64 @@ public static Attachment SendRoundedCornerCard()
             return RoundedCornersCardAttachment;
         }
 
+        /// <summary>
+        /// Generates an Adaptive Card attachment that includes Fluent icons. 
+        /// This method reads the adaptive card JSON from a resource file and 
+        /// deserializes it to be included as an attachment with Fluent icons in the card.
+        /// Fluent icons provide a modern and visually appealing way to enhance the UI within Adaptive Cards.
+        /// </summary>
+        /// <returns>
+        /// Returns an Attachment object that contains the Adaptive Card with Fluent icons.
+        /// </returns>
+        public static Attachment SendFluentIconsCard()
+        {
+            var paths = new[] { ".", "Resources", "adaptiveCardFluentIcon.json" };
+            var adaptiveCardFluentIconsJson = File.ReadAllText(Path.Combine(paths));
+
+            var FluentIconsCardAttachment = new Attachment()
+            {
+                ContentType = contentType,
+                Content = JsonConvert.DeserializeObject(adaptiveCardFluentIconsJson),
+            };
+
+            return FluentIconsCardAttachment;
+        }
+
+        /// <summary>
+        /// Creates and returns an Attachment containing an adaptive card with media elements.
+        /// </summary>
+        /// <returns>An Attachment object with a media elements adaptive card.</returns>
+        public static Attachment SendMediaElementsCard()
+        {
+            var paths = new[] { ".", "Resources", "adaptiveCardMediaElements.json" };
+            var adaptiveCardMediaElementsJson = File.ReadAllText(Path.Combine(paths));
+
+            var MediaElementsCardAttachment = new Attachment()
+            {
+                ContentType = contentType,
+                Content = JsonConvert.DeserializeObject(adaptiveCardMediaElementsJson),
+            };
+
+            return MediaElementsCardAttachment;
+        }
+
+        /// <summary>
+        /// Sends a star ratings card as an attachment for displaying or collecting user feedback.
+        /// </summary>
+        /// <returns>An Attachment object containing the star ratings card, which can display read-only ratings or collect ratings from users.</returns>
+        public static Attachment SendStarRatingsCard()
+        {
+            var paths = new[] { ".", "Resources", "adaptiveCardStarRatings.json" };
+            var adaptiveCardStarRatingsJson = File.ReadAllText(Path.Combine(paths));
+
+            var StarRatingsCardAttachment = new Attachment()
+            {
+                ContentType = contentType,
+                Content = JsonConvert.DeserializeObject(adaptiveCardStarRatingsJson),
+            };
+
+            return StarRatingsCardAttachment;
+        }
+
     }
 }

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

@@ -123,6 +123,18 @@ private async Task<DialogTurnResult> SelectCardAsync(WaterfallStepContext stepCo
                 case "RoundedCorners":
                     reply.Attachments.Add(AllCards.SendRoundedCornerCard());
                     break;
+                case "FluentIcons":
+                    // Adaptive Card Fluent Icons
+                    reply.Attachments.Add(AllCards.SendFluentIconsCard());
+                    break;
+                case "MediaElements":
+                    // Media elements in Adaptive Card
+                    reply.Attachments.Add(AllCards.SendMediaElementsCard());
+                    break;
+                case "StarRatings":
+                    // Star ratings in Adaptive Cards
+                    reply.Attachments.Add(AllCards.SendStarRatingsCard());
+                    break;
                 default:
                     reply.Attachments.Add(AllCards.sendInfoMasking());
                     reply.Attachments.Add(AllCards.sendFullWidthCardAdaptiveCard());
@@ -135,6 +147,9 @@ private async Task<DialogTurnResult> SelectCardAsync(WaterfallStepContext stepCo
                     reply.Attachments.Add(AllCards.sendResponsiveLayoutCard());
                     reply.Attachments.Add(AllCards.SendBorderCard());
                     reply.Attachments.Add(AllCards.SendRoundedCornerCard());
+                    reply.Attachments.Add(AllCards.SendFluentIconsCard());
+                    reply.Attachments.Add(AllCards.SendMediaElementsCard());
+                    reply.Attachments.Add(AllCards.SendStarRatingsCard());
                     break;
             }
 
@@ -171,6 +186,9 @@ private IList<Choice> loadAllCards()
                     new Choice() { Value = "Layout", Synonyms = new List<string>() { "Layout" } },
                     new Choice() { Value = "Border", Synonyms = new List<string>() { "Border" } },
                     new Choice() { Value = "RoundedCorners", Synonyms = new List<string>() { "RoundedCorners" } },
+                    new Choice() { Value = "FluentIcons", Synonyms = new List<string>() { "FluentIcons" } },
+                    new Choice() { Value = "MediaElements", Synonyms = new List<string>() { "MediaElements" } },
+                    new Choice() { Value = "StarRatings", Synonyms = new List<string>() { "StarRatings" } },
                 };
 
                 return returncardOptions;

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

@@ -0,0 +1,43 @@
+{
+  "type": "AdaptiveCard",
+  "speak": "3 minute energy flow with kayo video",
+  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+  "version": "1.5",
+  "body": [
+    {
+      "type": "Image",
+      "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/author-highlight-video/assets/video_image.png",
+      "altText": "3 Minute Energy Flow with Kayo Video"
+    },
+    {
+      "type": "TextBlock",
+      "text": "3 Minute Energy Flow with Kayo",
+      "wrap": true,
+      "size": "Large",
+      "weight": "Bolder"
+    },
+    {
+      "type": "ColumnSet",
+      "columns": [
+        {
+          "type": "Column",
+          "width": "stretch",
+          "items": [
+            {
+              "type": "Icon",
+              "name": "Calendar",
+              "size": "Medium",
+              "style": "Filled",
+              "color": "Accent",
+              "selectAction": {
+                "type": "Action.OpenUrl"
+              }
+            }
+          ],
+          "spacing": "Small",
+          "verticalContentAlignment": "Center"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,53 @@
+{
+  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+  "type": "AdaptiveCard",
+  "version": "1.6",
+  "fallbackText": "This card requires CaptionSource to be viewed. Ask your platform to update to Adaptive Cards v1.6 for this and more!",
+  "body": [
+    {
+      "type": "TextBlock",
+      "text": "YouTube video",
+      "wrap": true
+    },
+    {
+      "type": "Media",
+      "poster": "https://adaptivecards.io/content/poster-video.png",
+      "sources": [
+        {
+          "mimeType": "video/mp4",
+          "url": "https://www.youtube.com/watch?v=S7xTBa93TX8"
+        }
+      ]
+    },
+    {
+      "type": "TextBlock",
+      "text": "Vimeo video",
+      "wrap": true
+    },
+    {
+      "type": "Media",
+      "poster": "https://adaptivecards.io/content/poster-video.png",
+      "sources": [
+        {
+          "mimeType": "video/mp4",
+          "url": "https://vimeo.com/508683403"
+        }
+      ]
+    },
+    {
+      "type": "TextBlock",
+      "text": "Dailymotion video",
+      "wrap": true
+    },
+    {
+      "type": "Media",
+      "poster": "https://adaptivecards.io/content/poster-video.png",
+      "sources": [
+        {
+          "mimeType": "video/mp4",
+          "url": "https://www.dailymotion.com/video/x8wi5ho"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,62 @@
+{
+  "type": "AdaptiveCard",
+  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+  "version": "1.5",
+  "body": [
+    {
+      "type": "TextBlock",
+      "size": "Large",
+      "text": "Rating input"
+    },
+    {
+      "type": "Input.Rating",
+      "id": "rating1",
+      "label": "Pick a rating",
+      "size": "medium",
+      "isRequired": true,
+      "errorMessage": "Please pick a rating"
+    },
+    {
+      "type": "Input.Rating",
+      "id": "rating2",
+      "label": "Pick a rating",
+      "allowHalfSteps": true,
+      "size": "large",
+      "isRequired": true,
+      "errorMessage": "Please pick a rating",
+      "color": "marigold",
+      "value": 3
+    },
+    {
+      "type": "TextBlock",
+      "size": "large",
+      "text": "Read-only ratings",
+      "separator": true,
+      "spacing": "extraLarge"
+    },
+    {
+      "type": "Rating",
+      "value": 3.2,
+      "size": "medium"
+    },
+    {
+      "type": "Rating",
+      "max": 20,
+      "value": 3.2,
+      "color": "marigold"
+    },
+    {
+      "type": "Rating",
+      "style": "compact",
+      "value": 3.2,
+      "color": "marigold",
+      "count": 150
+    }
+  ],
+  "actions": [
+    {
+      "type": "Action.Submit",
+      "title": "Submit"
+    }
+  ]
+}

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

@@ -258,10 +258,58 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
 ![Rounded Corners](BotFormattingCards/Images/14.RoundedCorners.png)
 
+**Select Fluent Icon:**
+
+![FluentIconAdaptiveCard](BotFormattingCards/Images/16.FluentIconAdaptiveCard.png)
+
+**Fluent icon in an Adaptive Card:**
+
+![FluentIconsSelectCard](BotFormattingCards/Images/17.FluentIconsSelectCard.png)
+
+**Select Media elements:**
+
+![MediaElementsAdaptiveCard](BotFormattingCards/Images/18.MediaElementsAdaptiveCard.png)
+
+**Media elements in Adaptive Card:**
+
+![MediaElementsAdaptiveCard](BotFormattingCards/Images/19.MediaElementsAdaptiveCard.png)
+
+**All Media elements in Adaptive Card:**
+
+![MediaElementsAdaptiveCard1](BotFormattingCards/Images/20.MediaElementsAdaptiveCard1.png)
+
+**Play video media elements in an Adaptive Card:**
+
+![MediaElementsAdaptiveCard2](BotFormattingCards/Images/21.MediaElementsAdaptiveCard2.png)
+
+**Select Star Ratings:**
+
+![SelectStarRatings](BotFormattingCards/Images/22.SelectStarRatings.png)
+
+**Star ratings in Adaptive Cards:**
+
+![StarRatingsAdaptiveCards](BotFormattingCards/Images/23.StarRatingsAdaptiveCards.png)
+
+**Star ratings in Adaptive Cards validation:**
+
+![StarRatingsAdaptiveCardsValidation](BotFormattingCards/Images/24.StarRatingsAdaptiveCardsValidation.png)
+
+**Star Ratings Feedback:**
+
+![StarRatingsFeedback](BotFormattingCards/Images/25.StarRatingsFeedback.png)
+
 **Mobile:**
 
 ![LayoutMobile](BotFormattingCards/Images/15.LayoutMobile.png)
 
+**Star Ratings in Adaptive Cards:**
+
+![StarRatingsAdaptiveCards](BotFormattingCards/Images/26.StarRatingsAdaptiveCards.png)
+
+**Star Ratings Feedback:**
+
+![StarRatingsFeedback](BotFormattingCards/Images/27.StarRatingsFeedback.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.
@@ -270,6 +318,7 @@ To learn more about deploying a bot to Azure, see [Deploy your bot to Azure](htt
 - [Format cards in Microsoft Teams](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cdesktop%2Cconnector-html)
 - [Format cards with HTML](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cdesktop%2Cconnector-html#format-cards-with-html)
 - [People icon in an Adaptive Card](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cdesktop%2Cconnector-html#people-icon-in-an-adaptive-card)
-
+- [Fluent icon in an Adaptive Card](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?branch=pr-en-us-11655&tabs=adaptive-md%2Cdesktop%2Cconnector-html)
+- [Media elements in Adaptive Card](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/media-elements-in-adaptive-cards?branch=pr-en-us-11492&tabs=desktop%2Cdeveloper-portal-for-teams)
 
 <img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/bot-formatting-cards-csharp" />