Adaptive Card - Dynamically Generated Choices V1.5 - adaptive-cards

I have the following old Adaptive card from a Playbook which I need to update to v1.5. But I stumble upon a problem with the choices which are dynamically generated from a logic app body. I have made the part of the code bold. There is a value that is not JSON proof so it should be required to convert it to JSON that way.
{
"type": "Input.ChoiceSet",
"choices": #{body('LogicApp_-_Get_tagged_playbooks')}, #THIS IS THE LINE THAT NEEDS TO BE CHANGED
"placeholder": "IP Playbooks",
"isMultiSelect": true,
"style": "expanded",
"id": "playbooks"
}
Full Code:
{
"msTeams": {
"width": "full"
},
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"size": "large",
"color": "accent",
"text": "**Microsoft Sentinel Alert - **#{triggerBody()?['object']?['properties']?['incidentNumber']} - #{triggerBody()?['object']?['properties']?['title']}",
"wrap": true
},
{
"type": "TextBlock",
"text": "Please Select the playbooks to run for the incident:",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "Available tagged Logic App playbooks",
"wrap": true,
"weight": "Bolder",
"color": "Accent"
},
{
"type": "Input.ChoiceSet",
"choices": #{body('LogicApp_-_Get_tagged_playbooks')},
"placeholder": "IP Playbooks",
"isMultiSelect": true,
"style": "expanded",
"id": "playbooks"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
Could someone help me converting only that part of the choices to v1.5 so I can properly generate the choices myself? Or do I need to make my card legacy supported and drop it back to v1.2? I really want to use the card designer so I can make it easier.
Thanks in advance.

Related

Adaptive Cards ColumnSets with 2 Input.Text can't set the input to the "id"

I've been working on a chatbot and i'm using the Microsoft Adaptive Cards for my bot ui.
Currently i am im trying to create a a row that contains 2 textblocks and 2 input.text.
But when entering a value into these input.text they don't seem to set the value to the given id.
This does work however when the input.text are not in a coulmn set but instead are stacked on top of each other.I think its the Azure BotService not handling the JSON right.
I've tried using diffrent channels. Web-Chat, Teams-Chat. It does work on the adaptive card designer but not with any other service. Anyone else got this problem?
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "New TextBlock",
"wrap": true
},
{
"type": "Input.Text",
"id": "inputOne",
"placeholder": "Placeholder text"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "New TextBlock",
"wrap": true
},
{
"type": "Input.Text",
"id": "inputTwo",
"placeholder": "Placeholder text"
}
]
}
]
}
]
}
I tried to reproduce the issue and the pattern which was mentioned in the code block is having some blockage due to some input fields calling structure problem. Try to check the below code block for sample and replace with the current requirements.
Data JSON:
{
"title": "Tell us about yourself",
"body": "We just need a few more details to get you booked for the trip of a lifetime!",
"disclaimer": "Don't worry, we'll never share or sell your information.",
"properties": [
{
"id": "myName",
"label": "Your name (Last, First)",
"validation": "^[A-Z][a-z]+, [A-Z][a-z]+$",
"error": "Please enter your name in the specified format"
},
{
"id": "myEmail",
"label": "Your email",
"validation": "^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$",
"error": "Please enter a valid email address"
},
{
"id": "myTel",
"label": "Phone Number (xxx-xxx-xxxx)",
"validation": "^[0-9]{3}-[0-9]{3}-[0-9]{4}$",
"error": "Invalid phone number. Use the specified format: 3 numbers, hyphen, 3 numbers, hyphen and 4 numbers"
}
],
"thumbnailUrl": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg",
"thumbnailAlt": "Diver in the Great Barrier Reef"
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "${title}",
"weight": "bolder",
"size": "medium",
"style": "heading"
},
{
"type": "TextBlock",
"text": "${body}",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "${disclaimer}",
"isSubtle": true,
"wrap": true,
"size": "small"
},
{
"type": "Container",
"$data": "${properties}",
"items": [
{
"type": "Input.Text",
"label": "${label}",
"id": "${id}",
"regex": "${validation}",
"errorMessage": "${error}",
"isRequired": true
}
]
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "Image",
"url": "${thumbnailUrl}",
"altText": "${thumbnailAlt}",
"size": "auto"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
The result adaptive card looks like below screen as the sample.

Adaptive card container create empty div blocks

I'm user adaptive card via React framework. I have an array of complex objects (customer.attributes). I want to filter the array's items and diplay the items that respect a condition ("isVisible": "${attributeCode == ##CC3##}"). This works fine, the adaptive card display only the items I want.
However, all the items that don't respect the condition create a empty div. These divs create blank spaces. How can I get rid of them ?
For information, I also tried to use the $when attribut with the same result
I tried to hard code "isVisible": false in the template. The empty divs are still here but have a "display: none" properties in their css. Therefore, they're not visible, and that's perfect. Why isn't it working with the condition ?
Thank you for your help,
Template :
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "${customer.firstName} ${customer.lastName}",
"size": "Large"
},
{
"type": "Container",
"$data": "${customer.attributes}",
"spacing": "medium",
"items": [
{
"type": "TextBlock",
"isSubtle": "true",
"text": "${attributeLabel}",
"isVisible": "${attributeCode == ##CC3##}"
},
{
"type": "TextBlock",
"isVisible": "${attributeCode == ##CC3##}",
"text": "${attributeValue.textValue}",
"weight": "Bolder"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Data:
{
"customer": {
"customerId": "id",
"firstName": "David",
"attributes": [
{
"attributeCode": "CC1",
"attributeType": "TEXT",
"attributeLabel": "Texte libre 1",
"attributeValue": "test1"
},
{
"attributeCode": "CC3",
"attributeType": "TEXT",
"attributeLabel": "Texte libre 3",
"attributeValue": "test3"
}
],
"loyaltyEligible": true,
"loyaltyAccounts": []
}
}
Result div :

BotFrameworkV4- Images are not getting displayed in the Adaptive Card in Microsoft Teams

I'm just beginning to work with BotFramework. I'm trying to display an Adaptive Card in Microsoft Teams and I'm working with the code I downloaded from https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/50.teams-messaging-extensions-search
I see that the image URL being returned in the response JSON is correct and I can paste it in the browser and the image displays just fine, but in the card, the image is displayed as "undefined". I see that Teams changes the URL to - https://urlp.asm.skype.com/v1/url/content?url=[original_url]
I've tried changing the Azure Blob Firewall settings to "Allow All Networks" and I have added my application domain and urlp.asm.skype.com to the validDomains[] configuration in the manifest.json, but I still have the issue with my images.
The JSON I'm using is as follows -
the ${thumbnailurl} contains the url to the thumbnail image.
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"backgroundImage": "https://www.beautycolorcode.com/abcdef.png",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"size": "large",
"style": "default",
"width": "100px",
"spacing": "extraLarge",
"url": "http://<myHostname>/xdownload/thumbnail/%257B%2522app%2522%253A%2522NH-vanilla-search%2522%252C%2522id%2522%253A%2522%255C%252FFS%255C%252FDemo%2BFiles%255C%252F%257CEnron%2BData%255C%252Fenron1992.pdf%2522%257D/file.jpg"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Enron Documents 1992 ENRON CORP",
"wrap": true,
"color": "accent",
"size": "medium",
"weight": "bolder",
"spacing": "padding",
"fontType": "default",
"horizontalAlignment": "left"
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "DC 20585 | 5 -- ': ... L. Lay Chairman and CEO **Enron** Corporation\r\nP.O. Box 1188 Houston, ... 1992, and for your comments... fired\r\nelectricity generation over the ... gas prices currently offered by\r\n**Enron** and others. Natural gas power ... coal or nuclear plants. In\r\naddition... America's strengths to achieve aggressive ... L. Lay,\r\nchairman and CEO of **Enron** Corp., in testimony today before the ...\r\nproductivity, prosperity and global leadership\r\n",
"wrap": true,
"maxLines": 6,
"spacing": "padding",
"fontType": "default",
"weight": "default",
"size": "small"
}
]
},
{
"type": "FactSet",
"facts": [
{
"title": "Source:",
"value": "\r\n /File System/Sample Data/Enron Data/\r\n"
},
{
"title": "Format:",
"value": "pdf"
},
{
"title": "Relevancy:",
"value": "85.04401%"
}
],
"separator": true,
"spacing": "extraLarge"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Document Preview",
"url": "http://<myHostname>/app/NH-vanilla-search/#/preview?id=%2FFS%2FDemo+Files%2F%7CEnron+Data%2Fenron1992.pdf&query=%7B%22name%22%3A%22Custom_Query%22%2C%22text%22%3A%22enron+data%22%7D",
"style": "positive",
"width": "stretch"
}
]
}
I'd greatly appreciate your inputs here.
Thanks!
Teams cannot access that image. Any image you expect pretty much any channel client to display will need to be publicly accessible. Use a public image URL.

json file formatting correctly, so LUIS can read the data

My program can read Intents from LUIS correctly and launch other adaptive cards using LUIS Intents, however with this column type, still is not possible. The Intents am trying to launch here are "user" and "myEmail" in "type": input.text. I know somehow the data field in json must be misplaced, or the title, or id. Here´s the file, any help...?
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Image",
"url": "lalala.png",
"size": "Medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "Einloggen",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "Input.Text",
"id": "myName",
"title": "user",
"data": "user",
"placeholder": "Benutzername oder email"
},
{
"type": "Input.Text",
"id": "myEmail",
"title": "myEmail",
"data": "myEmail",
"placeholder": "Passwort",
"style": "Email"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
},
{
"type": "Action.Submit",
"title": "Cancel"
}
]
}
I'm not 100% sure your question because nothing in the adaptive card really relates to LUIS. That said, you must specify a unique id for "remember me" toggle - the current null value won't work.
I'd also recommend the adaptivecards.io designer as a place to validate your cards.
adaptivecards.io/designer
Thanks for the suggestions, didn´t read before https://blog.botframework.com/2019/07/02/using-adaptive-cards-with-the-microsoft-bot-framework/ were the problem between action submit and data is better specified.
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "Einloggen",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "Input.Text",
"id": "myName",
"title": "user",
"placeholder": "Benutzername oder email"
},
{
"type": "Input.Text",
"id": "myEmail",
"title": "myEmail",
"placeholder": "Passwort"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"myName": true,
"myEmail": true
}
}
] }

Adaptive cards are converted to image in Facebook Messenger

I tried following example card picked up from Microsoft's website adaptivecards.io
var msg = new builder.Message(session)
.addAttachment({
contentType: "application/vnd.microsoft.card.adaptive",
content: {
type: "AdaptiveCard",
speak: "<s>Your meeting about \"Adaptive Card design session\"<break strength='weak'/> is starting at 12:30pm</s><s>Do you want to snooze <break strength='weak'/> or do you want to send a late notification to the attendees?</s>",
            "body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Publish Adaptive Card schema",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"size": "small",
"style": "person"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2017-02-14T06:08:39Z,SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
},
{
"title": "Assigned to:",
"value": "Matt Hidinger"
},
{
"title": "Due date:",
"value": "Not set"
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Date",
"id": "dueDate",
"title": "Select due date"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
},
{
"type": "Action.ShowCard",
"title": "Comment",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"placeholder": "Enter your comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
},
{
"type": "Action.OpenUrl",
"title": "View",
"url": "http://adaptivecards.io"
}
]
}
});
session.send("This is an adaptive card");
session.send(msg);
to see how it appears in Facebook and WebChat.
In WebChat emulator it renderes fine with options to interact with choices.
However, same thing renders as an image in Facebook Messenger, with one separate messsage to view options, which redirects to the website.
Should we assume that adaptive cards will not work on Facebook messenger? Or am I missing something basic here.
Unless Messenger natively supports adaptive cards, the best we can do is render to an image and attempt to map Actions to Messenger buttons. For example, an Action.OpenUrl should render as a button on Messenger. But more advanced scenarios, like input fields, etc, will get dropped as there is no way to express those as Messenger templates today.
This documentation lists the channels and their current support:
https://learn.microsoft.com/en-us/adaptive-cards/get-started/bots#channel-status