I'm using the C# library to render an appaptive card.
I have a simple card template which is bound to a data template.
I expand the data template into the basic card below, and can see that the values for the checkbox values are correct.
I then render the Adaptive Card using the C# library.
Unfortuantely the HTML content rendered for the inputs does not have the "checked" property for any items which should be checked.
Anyone any ideas about this, am I doing something wrong, or misunderstanding what the library should actually be doing.
I'm including the sample Card, JSON and CS Program below.
Kind Regards
Program
using AdaptiveCards;
using AdaptiveCards.Rendering.Html;
using System;
using System.IO;
namespace CardLoader
{
class Program
{
static void Main(string[] args)
{
var basePath = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);
var cardJson = File.ReadAllText($"{basePath}/BasicCheckList.json");
var sampleData = Newtonsoft.Json.JsonConvert.DeserializeObject(File.ReadAllText($"{basePath}/SampleJsonData.json"));
var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
var cardPayload = template.Expand(sampleData);
var card = AdaptiveCard.FromJson(cardPayload);
AdaptiveCardRenderer renderer = new AdaptiveCardRenderer();
RenderedAdaptiveCard renderedCard = renderer.RenderCard(card.Card);
HtmlTag html = renderedCard.Html;
}
}
}
Sample Data
{
"status": {
"code": "Pending",
"label": "Pending",
"url": "https://adaptivecards.io/content/pending.png"
},
"approveItems": [
{
"id": "pay-docs",
"title": "Received Proof of Payment",
"value": "true",
"separator": false
}
]
}
Sample Card
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "**CLAIMS APPROVAL**",
"wrap": true,
"size": "Large",
"weight": "Bolder"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "${status.url}",
"altText": "${status.label}",
"height": "30px"
}
]
}
]
}
],
"style": "emphasis",
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"$data": "${approveItems}",
"type": "Input.Toggle",
"title": "${title}",
"value": "${value}",
"separator": "${separator}",
"id": "${id}"
}
]
}
]
}
],
"style": "warning"
}
]
}
If the data is like you've shown in your sample data, the value property is wrong here.
You want to have a boolean value (for the checkbox) but you're sending a bool wrapped in a string.
Wrong:
"approveItems": [{
"id": "pay-docs",
"title": "Received Proof of Payment",
"value": "true", <-- this is a string
"separator": false
}]
Correct:
"approveItems": [{
"id": "pay-docs",
"title": "Received Proof of Payment",
"value": true, <-- This has to be a bool
"separator": false
}]
Related
We are working on a cross-platform bot. Adaptive card buttons doesn't seems to respond in MS Teams when used on iOS mobile. There is no response from bot at all. The card responds as expected when MS Teams is accessed via web browser or MS Teams application on desktop computer or via Android devices.
Here is the JSON, of which the text is replaced run-time.
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "<heading>",
"wrap": true
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "<Option1>",
"horizontalAlignment": "Center",
"weight": "Light",
"separator": true,
"color": "Accent"
}
],
"id": "1",
"selectAction": {
"type": "Action.Submit",
"title": "actionButton",
"data": {
"msteams": {
"type": "imBack",
"value": "{3}"
}
}
},
"horizontalAlignment": "Center",
"style": "emphasis"
},
{
"type": "Column",
"width": "stretch",
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "<Option2>",
"horizontalAlignment": "Center",
"weight": "Light",
"separator": true,
"color": "Accent"
}
],
"id": "2",
"selectAction": {
"type": "Action.Submit",
"title": "actionButton",
"data": {
"msteams": {
"type": "imBack",
"value": "{4}"
}
}
},
"horizontalAlignment": "Center",
"style": "emphasis"
}
]
}
]
}
],
"$schema": "http:adaptivecards.ioschemasadaptive-card.json"
}
I doubt this is the actual cause, but your schema is wrong - it should be:
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
I have made a bot framework V4 using C#. I have made star rating in adaptive card but I need to add comment box and submit button in it,but my submit button is not working.In debugging mode its not hitting the any method of bot.Kindly help me. I am also attaching the code of my rating card having comment box and submit button in it.
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"color": "Accent",
"text": "Rate your experience!"
},
{
"type": "TextBlock",
"separator": true,
"text": "Please rate your experience! Your feedback is very appreciated and will help improve your
experience in the future. ",
"wrap": true
},
{
"type": "ColumnSet",
"spacing": "Medium",
"columns": [
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "awful"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Awful"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "bad"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Bad"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "ok"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Ok"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "good"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Good"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "terrific"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Terrific"
}
],
"width": "stretch"
}
]
},
{
"type": "Input.Text",
"id": "comment",
"placeholder": "Add a comment",
"isMultiline": true
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"actions": [
{
"type": "Action.Submit",
"title": "Ok",
"data": "ok"
}
]
}
There's a couple of issues with your card JSON that you need to fix:
Your actions don't have titles.
You should make data an object instead of a string. String works, mostly, but is less consistent.
You can find/fix most errors with your card by copy/pasting your code in the Designer and looking for errors:
I've recreated your card so that it works:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Rate your experience!",
"weight": "Bolder",
"color": "Accent",
"size": "Medium"
},
{
"type": "TextBlock",
"text": "Please rate your experience! Your feedback is very appreciated and will help improve your experience in the future. ",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"altText": "",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg",
"selectAction": {
"type": "Action.Submit",
"data": { "rating": "awful" },
"title": "awful"
}
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"altText": "",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg",
"selectAction": {
"type": "Action.Submit",
"data": { "rating": "bad" },
"title": "bad"
}
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"altText": "",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg",
"selectAction": {
"type": "Action.Submit",
"data": { "rating": "ok" },
"title": "ok"
}
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"altText": "",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg",
"selectAction": {
"type": "Action.Submit",
"data": { "rating": "good" },
"title": "good"
}
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"altText": "",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg",
"selectAction": {
"type": "Action.Submit",
"data": { "rating": "terrific" },
"title": "terrific"
}
}
]
}
]
},
{
"type": "Input.Text",
"placeholder": "Add a comment",
"isMultiline": true,
"id": "comment"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"actions": [
{
"type": "Action.Submit",
"title": "Ok"
}
]
}
Note, that the feedback will come in Activity.Value.rating
Can somebody please help me, what is wrong with this card?
It works in https://adaptivecards.io/designer/ but I get this exception when trying in my bot in emulator:
Exception thrown: 'Jurassic.JavaScriptException' in Jurassic.dll
Exception thrown: 'Jurassic.JavaScriptException' in
System.Private.CoreLib.dll
Microsoft.Bot.Builder.Integration.AspNet.Core.BotFrameworkHttpAdapter:Error: Exception caught : Error: Invalid value type: undefined
The exception occurs when I try to transform the template and the data:
var cardJson = transformer.Transform(cardtemplate, carddata);
The carddata is an empty json in my test. In production, I can receive different responses (like: hit, miss or gameover), where some of the data is missing.
Update: I think, I narrowed it down, the problem seems that the engine doesn't like if a referenced data is missing in the $when property like:
"$when": "{result.shipStatus== 'HIT'}". Is there any workaround for this issue, that can be solved inside the card, or with very small change in the code? Like a propert to handle missing data as false?
card json:
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"id": "playing",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Shots: {result.score.nrMoves}"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Hits: {result.score.nrHits}"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Missed: {result.score.nrMisses}"
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "{result.shipStatus}",
"horizontalAlignment": "Center",
"height": "stretch",
"color": "{if(result.shipStatus == 'HIT', 'good', 'attention')}",
"size": "ExtraLarge"
}
],
"horizontalAlignment": "Center"
}
],
"separator": true
},
{
"type": "Container",
"$when": "{result.shipStatus== 'HIT'}",
"items": [
{
"type": "TextBlock",
"text": "{result.hitShip.name}",
"size": "Large",
"weight": "Bolder",
"color": "Accent",
"horizontalAlignment": "Center"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Target:",
"horizontalAlignment": "Right",
"height": "stretch",
"weight": "Bolder",
"size": "Medium"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Text",
"placeholder": "A1",
"value": "",
"id": "id_x"
}
]
}
]
},
{
"type": "ActionSet",
"id": "",
"actions": [
{
"type": "Action.Submit",
"title": "Shoot",
"id": "",
"style": "positive",
"data": {
"action": "shoot"
}
}
]
}
],
"$when": "{result.gameProgress == 'PLAYING'}"
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Game Over!",
"color": "Accent",
"size": "ExtraLarge",
"fontType": "Monospace",
"weight": "Bolder",
"horizontalAlignment": "Center"
}
],
"id": "gameover",
"$when": "{result.gameProgress == 'GAMEOVER'}"
},
{
"type": "Input.Text",
"value": "{result.gameUid}",
"size": "Small",
"wrap": true,
"id": "GameID",
"isVisible": false
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
I am trying to find a way to sum the prices held in an array, the way I am doing it now is to save the document to CosmosDB then run an additional sum(foo) query on it but I am thinking there must be a way so simply do that directly before I save the document to CosmosDB to save the extra round trip to the DocumentDB.
Example Document below.
The values I want to summarise are under:
ApiInputObject.TransactionDetails.Items.Price and there can of course be many items in the array.
I can only figure out how to get a single value out but that seems very inefficient.
{
"InternalTransactionlId": "XXX",
"DocumentType": "order",
"ExternalTransactionId": "externalIdTest2",
"OrderBotResponse": {
"id": "XXX",
"status": "pending",
"checkoutUrl": "https://www.example.com",
"items": [
{
"attributes": {
"color": "Midnight blue",
"size": "L"
},
"price": "500",
"quantity": "1",
"shipping": "0.0",
"title": "ACME Title",
"url": "https://example.com",
"product_id": "XXX",
"imageUrl": "https://example.com/image.jpg",
"status": "pending",
"shippingMethod": "default",
"totalPrice": 500
}
],
"reference": "XXX",
"currency": "SEK",
"country": "SE",
"language": "sv-se",
"provider": "acme",
"callback": {
"refund": "http://example.com",
"success": "http://example.com"
},
"shippingAddress": {},
"logs": [
{
"t": "2019-08-24T20:58:04.844+08:00",
"m": "Created"
}
],
"meta": {
"error": 0
}
},
"ApiInputObject": {
"ApiKey": "XXX",
"OrderType": "directTransaction",
"SourceSystem": {
"SourceSystemName": "ACME"
},
"SourceSystemCountry": "SE",
"DestinationSystem": {
"DestinationSystemName": "acme.com"
},
"DestinationSystemCountry": {
"DestinationSystemCountryName": "SE"
},
"Brand": {
"BrandName": "ACME"
},
"RequestedFeatures": [
"NONE"
],
"ExternalTransactionId": "externalIdTest2",
"TransactionDetails": {
"callback": {
"refund": "http://example.com",
"success": "http://example.com"
},
"items": [
{
"attributes": {
"color": "Midnight blue",
"size": "L"
},
"price": "500",
"quantity": "1",
"shipping": "0.0",
"title": "ACME",
"url": "https://example.com"
}
],
"test": "true",
"reference": "XXX"
}
},
"id": "XXX",
"_rid": "XXX",
"_self": "XXX",
"_etag": "XXX",
"_attachments": "attachments/",
"_ts": 111
}
You can try to use SelectToken to get your JSON data value. then use linq SUM
JObject obj = JObject.Parse(data);
var value = obj.SelectToken("ApiInputObject.TransactionDetails.items").Sum(x=>((int)x["price"]));
c# online
I have generated an adaptive card using JSON format with two buttons submit and cancel which are returning a "messageBack" message as submit and cancel respectively.
I am using C# to access the reply but I am not able to figure out how to access the reply from the adaptive card.
My json is
{
"type": "AdaptiveCard",
"selectAction": {
"type": "Action.Submit"
},
"body": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"size": "Large",
"weight": "Bolder",
"color": "Accent",
"text": "Meeting Composer Create"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"spacing": "Medium",
"size": "Medium",
"weight": "Bolder",
"color": "Accent",
"text": "Attendees:"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"id": "attendeeVal",
"text": "a"
}
],
"width": "stretch"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"color": "Accent",
"text": "Subject:"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"id": "subVal",
"text": "meeting"
}
],
"width": "stretch"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"color": "Accent",
"text": "Date:"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"id": "dateVal",
"text": "17/11/2018 10.30 AM"
}
],
"width": "stretch"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"color": "Accent",
"text": "Document Name:"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"id": "docVal",
"text": "Document1"
}
],
"width": "stretch"
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "I clicked this button",
"text": "text to bots",
"value": "Submit"
}
}
},
{
"type": "Action.Submit",
"title": "Cancel",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "I clicked this button",
"text": "text to bots",
"value": "Cancel"
}
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
my C# is
var response = getCard(stepContext, "Aditya Rao, Vishal Subramaniam" , "Scrum Meeting" , "17/11/1028, 10:30AM" , "Scrum Sprint.pptx");
await stepContext.Context.SendActivityAsync(response).ConfigureAwait(false);
my additional function to support are
private static Attachment CreateAdaptiveCardAttachment(string filePath, string names, string subj , string datee, string docs)
{
var adaptiveCardJson = File.ReadAllText(filePath);
dynamic obj = JsonConvert.DeserializeObject(adaptiveCardJson);
obj["body"][1]["columns"][1]["items"][0]["text"] = names;
obj["body"][2]["columns"][1]["items"][0]["text"] = subj;
obj["body"][3]["columns"][1]["items"][0]["text"] = datee;
obj["body"][4]["columns"][1]["items"][0]["text"] = docs;
var adaptiveCardAttachment = new Attachment()
{
ContentType = "application/vnd.microsoft.card.adaptive",
Content = obj,
};
return adaptiveCardAttachment;
}
// Create an attachment message response.
private Activity CreateResponse(Activity activity, Attachment attachment)
{
var response = activity.CreateReply();
response.Attachments = new List<Attachment>() { attachment };
return response;
}
private Activity getCard(WaterfallStepContext stepContext, string names, string subj , string datee, string docs)
{
var jsonFilePath = #".\Dialogs\CardTemplates\MeetingComposerCreate.json";
var activity = stepContext.Context.Activity;
var adCard = CreateAdaptiveCardAttachment(jsonFilePath,names,subj,datee,docs);
var response = CreateResponse(activity, adCard);
return response;
}
How do I access the values response once submit or cancel is clicked?
Also if someone can help me find how to get reply from input.choice to get the checkbox data of the selected cards.
How do I access the values response once submit or cancel is clicked?
We can get the value that user submit from adaptive card via Activity.Value property.
if(turnContext.Activity.Value!= null)
{
reply.Text = $"submit data: {turnContext.Activity.Value}";
}
Test Result:
Output in emulator:
Also if someone can help me find how to get reply from input.choice to get the checkbox data of the selected cards.
To display choice options for user selecting and get the selected option, you can refer to the following code snippet.
In json file:
{
"type": "Input.ChoiceSet",
"id": "optionSelection",
"isMultiSelect": true,
"style": "compact",
"choices": [
{
"title": "option1",
"value": "option1"
},
{
"title": "option2",
"value": "option2"
},
{
"title": "option3",
"value": "option3"
}
]
}
Using same code to get user's selection:
reply.Text = $"submit data: {turnContext.Activity.Value}";
Test Result: