Adaptive Cards: Visibility of element depending on value of a ChoiceSet - adaptive-cards

I am trying to show TextBlock elements on my adaptive card depending in the value selected in a ChoiceSet (radio buttons). And I am not getting it to work properly.
The ChoiceSet does not have an ActionSet integrated, so I cannot call a ToggleVisibility action on selection. Then I tried to use the selectAction Property, but neither the Input.ChoiceSet nor Input.Choice support this property.
The last approach was to use the "$when" property on the element I want to toggle and bind it to the value of the ChoiceSet. Depending on which value it has, the element should be shown or hidden. But I do not get it to work, I tried
"$when": "{damagepart=2}" but it seems that only works with some kind of data binding?!
I am not able to find a proper example of that in the decumentation or in the samples of adaptivecards.io...
Does anyone have an example or some hints on how to get this task solved?

While this can theoretically be done in Web Chat using the extensibility features of Adaptive Cards, you may also not that this feature is in the Adaptive Cards roadmap: https://portal.productboard.com/adaptivecards/1-adaptive-cards-features/c/25-client-side-update-card-upon-input-changes-or-button-presses

I made this example that might be useful for you.
The column section that contain a text box and a action hyperlink will hide and show depending on the condition or the value of the variable.
card payload editor
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "This line will visible when the condition meet:",
"wrap": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "Any button you want to show"
}
]
}
]
}
],
"$when": "${$root.MatchVariableValue == \"yes\"}"
}
]
}
use the following sample on Data editor to see how the section appear and hide depending on your input/value.
{"MatchVariableValue":"yes"}
or use
"$when": "${$root.MatchVariableValue}"
if your data is as simple as
{"MatchVariableValue":true}

Related

How to use $when in an adaptive card template to find out the length of an incoming data payload and drop an input block

I have an adaptive card in the form of a JSON file, which contains an Input.ChoiceSet. This is provided with a data payload, which is dynamic and so it is not the same amount of data every time. I want to be able to drop this Input.ChoiceSet if it breaks a certain threshold based on the length of the array of data that I'm going to pass to it. Is it possible to write this as an condition inside the Input.ChoiceSet using %when to carry this out?
This is currently what I have, but it is not working as I would've hoped:
{
"type": "Input.ChoiceSet",
"id": "CompactSelectVal1",
"$when": "${$data.length < 400}",
"placeholder": "Select a value",
"choices": [
{
"$data": "${data}",
"title": "${name}",
"value": "${tag}"
}
],
"label": "Input"
}
Using .length here was just a guess here, not based on any documentation. The documentation I have used to find out about $when is the following https://learn.microsoft.com/en-us/adaptive-cards/templating/language.
Any help on this would be much appreciated.
You can use "count" property instead of "length" and also remove the extra '$' inside the curly bracket "${$data.length < 400}".
Try this:
{
"type": "Input.ChoiceSet",
"id": "CompactSelectVal1",
"$when": "${count(data) < 400}",
"placeholder": "Select a value",
"choices": [
{
"$data": "${data}",
"title": "${name}",
"value": "${tag}"
}
],
"label": "Input"
}
If the condition is true then the choice button will hide from the adaptive card.

Vega-lite - Change position of binding inputs

I was looking for a way to change the position of binding inputs. In the attached vega-lite chart, am having 2 select dropdown which are one below another and they are displayed at the bottom of the view. Is there any configuration available which allows to show the 2 dropdowns side by side when they are displayed below or can they be displayed on the right or left side of chart view just like legends.
Refer the below configurations or editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart of flight statistics, aggregated by the selected time unit.",
"height": "container",
"width": "container",
"params": [
{
"name": "timeunit",
"value": ["day"],
"bind": {
"input": "select",
"options": [["year"], ["month"], ["date"], ["day"], ["hours"]]
}
},
{
"name": "measure",
"value": "delay",
"bind": {"input": "select", "options": ["count", "delay"]}
}
],
"data": {"url": "data/flights-20k.json"},
"transform": [
{
"calculate": "timeFormat(datetime(datum.date), timeUnitSpecifier([timeunit]))",
"as": "formattedDate"
}
],
"mark": "bar",
"encoding": {
"x": {"field": "formattedDate"},
"y": {"field": "delay", "type": "quantitative", "stack": false}
},
"config": {}
}
AFAIK there is no way to specify the position of binding inputs using the vega-lite spec. However you could always use CSS.
The HTML generated by vega-lite lends itself to a variety of styling options. There is a parent <div> element which contains the graph element (<svg> or <canvas>), and, if binding inputs are present, a sibling element <form class="vega-bindings">.
To position the two inputs side by side, the bare minimum CSS could be:
.vega-bindings {
display: flex;
}
To achieve something more aesthetically pleasing, you would need to do some additional styling. But this should be relatively simple depending on your skill with CSS.
Or, if you wanted to place the inputs on the right side similar to a legend, you might start with this:
div#my-parent-element {
display: flex;
}
Again, further styling would be needed depending on the level of polish desired, and the particulars of your design.

Unable to get data to show in Adaptive Card FactSet

I am trying to create an adaptive card with a fact set. However, I can't seem to get the actual facts to display. Even the example at https://adaptivecards.io/designer/ is not working. Instead of pulling in the data from the properties element as specified, it just shows ${key} and ${value} as the pair. You can see the output and the full JSON at the link above, but here are the relevant sections for my issue/query:
Adaptive card specification
{
"type": "FactSet",
"facts": [
{
"$data": "${properties}",
"title": "${key}:",
"value": "${value}"
}
]
}
Data object
"properties": [
{
"key": "Board",
"value": "Adaptive Cards"
},
{
"key": "List",
"value": "Backlog"
},
{
"key": "Assigned to",
"value": "Matt Hidinger"
},
{
"key": "Due date",
"value": "Not set"
}
]
As this or similar questions came up multiple times recently. You have to make sure to use the "Preview" button
Elements bound to any array in JSON are not rendered during design time or only when the specific array element is referenced with array[x].xx. Dynamically generated elements currently are only rendered in preview mode when working in the web editor version https://adaptivecards.io/designer
If you need a design time experience for array bound elements you can use Adaptive Cards Studio the Visual Studio Code Extension for card authoring.

Adaptive Cards - Is it possible to enforce that the user typed something in Input Text Field before Action.Submit is allowed

I'm trying to use adaptive cards on MS Teams to capture some user input text before they click on submit. One of the things I would like to have is that I want the user to input some non-empty string before the Action.Submit is allowed to go through.
Is that an existing support feature?
Thanks!
This feature, called Input Validation, is part of the upcoming v1.3 release, which will be available in Teams in the next few months. Here is a same that uses the "required" property to indicate something must be entered.
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "Input.Text",
"id": "name",
"placeholder": "First, last",
"label": "Please enter your name",
"isRequired": true,
"errorMessage": "Name is required"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Save"
}
]
}
You can learn about it here. https://developer.microsoft.com/en-us/office/blogs/adaptive-cards-community-call-july-2020/

Display number in adaptive card

I have the following simple card:
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "{data}"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
When I apply the following data to the card (value is number), the text box is empty:
{
"data":11111
}
With text, the I can see the data in the card:
{
"data":"11111"
}
This is not a code issue, this is how it looks in the designer. Am I missing something, is there a type for a text box that lets display numbers or is this by design and I have to change all numeric fields to text?
This is a limitation of the preview (known as Type Coercion) that we hope to address before release. As another workaround you can include a space after the binding expression which will force it into a string. See the below example, notice the space after {data}
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "{data} "
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
I'm guessing you're using Adaptive Cards Templating for this. Remember, this is (a) in preview only and (b) just one option for constructing an Adaptive Card. Basically, at the end of the day, the Card is just a string of JSON text so you can create it in 3 main ways:
Using Templates, as you're doing now
Doing string replacement of your own (e.g. var card = '..."text": "##Number##"...' and then card = card.Replace("##Number##", formattedNumberValue)
Using strongly-typed options like the AdaptiveCards Nuget package for C#, for instance
So, I'd suggest, if this is not possible using Templating, to look more at options 2 or 3 above. I described this a bit more here, with some links to C# and Node examples.
Hope that helps
You can now use the function formatNumber(value, decimalplaces)
Eg:
{
"type": "TextBlock",
"text": "${formatNumber(somenumber), 2}"
}
You can read mode here:
https://learn.microsoft.com/en-us/azure/bot-service/adaptive-expressions/adaptive-expressions-prebuilt-functions?view=azure-bot-service-4.0#formatNumber