How to extend choice in adaptive card when option in ChoiceSet selected? - adaptive-cards

I have no idea how to use "Only show when" property in my ChoiceSet. I want "Version" ChoiceSet to be displayed when second option in the first ChoiceSet is selected. Maybe I need to save responce from the first ChoiceSet to a variable but I also have no idea how to do it.
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Online",
"value": "Online"
},
{
"title": "On-Premise",
"value": "OnPremise"
}
],
"placeholder": "Placeholder text",
"style": "expanded",
"id": "EnvironmentType"
},
{
"type": "TextBlock",
"text": "choose version",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "2019",
"value": "2019"
},
{
"title": "2016",
"value": "2016"
}
],
"placeholder": "Version",
"isVisible": false,
"id": "ChoiceSetId"
}
]
}

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 cards version 1.3

Can anyone tell me how can we use adaptive card version 1.3, When I'm using any card with version 1.3 and viewing it in-app studio it says?
Tried an adaptive card of version 1.3 both in App Studio and MS Teams and it worked fine.Could you please try upgrading your version and check if it works. Attaching the json below which i tested:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"speak": "Tom's Pie is a pizza restaurant which is rated 9.3 by customers.",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "PIZZA"
},
{
"type": "TextBlock",
"text": "Tom's Pie",
"weight": "bolder",
"size": "extraLarge",
"spacing": "none"
},
{
"type": "TextBlock",
"text": "4.2 ★★★☆ (93) · $$",
"isSubtle": true,
"spacing": "none"
},
{
"type": "TextBlock",
"text": "**Matt H. said** \"I'm compelled to give this place 5 stars due to the number of times I've chosen to eat here this past year!\"",
"size": "small",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"label": "Select a user",
"isMultiSelect": false,
"choices": [
{
"title": "User 1",
"value": "User1"
},
{
"title": "User 2",
"value": "User2"
},
{
"title": "User 3",
"value": "User3"
},
{
"title": "User 4",
"value": "User4"
},
{
"title": "User 5",
"value": "User5"
}
],
"style": "filtered"
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "Image",
"url": "https://picsum.photos/300?image=882",
"size": "auto"
}
]
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "More Info",
"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
]
}

Adapative Card passing selected value

i need some help here.. I am trying to pass the selected value to my "actions" form, i've googled it, but without no solutions sadly, so i hope theres someone who can help me with this issue. I posted the code below, thanks.
local ChooseId = [==[{
"$schema": "https://microsoft.github.io/AdaptiveCards/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Vælg karakter",
"weight": "Lighter"
},
{
"type": "Input.ChoiceSet",
"isMultiSelect": false,
"value": "0",
"choices": [
{
"title": "]==] .. charnames[1][1] .. [==[",
"id": "1"
},
{
"title": "]==] .. charnames[2][1] .. [==[",
"id": "2"
}
],
"style": "expanded"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Sumbit",
"style": "positive",
}
]
}]==]
to get the select input you have to do a few minior changes to your card.
The ChoiceSet as such needs to have an ID set, the choices don't need ID but need value properties. Once changed you get something similar to this on submit:
"data": {
"choice": "2",
}
Updated card for reference:
{
"$schema": "https://microsoft.github.io/AdaptiveCards/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Vælg karakter",
"weight": "Lighter"
},
{
"type": "Input.ChoiceSet",
"isMultiSelect": false,
"value": "0",
"id": "choice",
"choices": [
{
"title": "]==] .. charnames[1][1] .. [==[",
"value": "1"
},
{
"title": "]==] .. charnames[2][1] .. [==[",
"value": "2"
}
],
"style": "expanded"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Sumbit",
"style": "positive"
}
]
}

Set Adaptive Card to Currency With Parameter From Apply to Each?

In the image above it changes the adaptive card to Currency. How can I add this with a parameter from somewhere else? I am trying to do this but it is not working.
"value": "${formatNumber(#{items('Apply_to_each')?['Cost Each']}, 2)}"
How can I get this code to show as currency? It seems to be that when I use "#{items" it will not work. Any suggestions?
Here is the adaptive card. I am looping through Excel data and want to put the Parameters I received from Excel into an Adaptive Card and use the $$ Format.
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": "**PART APPROVAL**"
}
],
"width": "stretch"
}
]
}
],
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"text": "New Part Approval",
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "FactSet",
"spacing": "Large",
"facts": [
{
"title": "Part #:",
"value": "**#{items('Apply_to_each')?['Part Number']}**"
},
{
"title": "Description:",
"value": "#{items('Apply_to_each')?['Description']}"
},
{
"title": "Quantity:",
"value": "#{items('Apply_to_each')?['AOQ']}"
},
{
"title": "Cost Each:",
"value": "#{items('Apply_to_each')?['Cost Each']}"
},
{
"title": "Sell Each:",
"value": "#{items('Apply_to_each')?['Sell Each']}"
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"style": "positive",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "approve"
},
"id": "ApproveID"
},
{
"type": "Action.ShowCard",
"title": "Reject",
"style": "destructive",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "RejectCommentID",
"placeholder": "Please specify an appropriate reason for rejection.",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQ8dJlUeMVi7ZMEzYVf",
"action": "reject"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
},
"id": "RejectID"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
sorry for that.
Just asked a colleague and the new Adaptive Expressions, the one you're using there to format currencies are actually not working on Power Automate yet.
Power Automate is not updated to the latest Adaptive Cards version so some of the things you can do with cards are not available in flows yet.
Tim

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
}
}
] }