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/
Related
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.
I am trying to use Action.Submit in my adaptive card to hit my Google Cloud Function. Where do I specify where to send the submission to? The reason I am doing this is I want to skip building a full chat server due to time constraint.
Example of Adaptive Card, no property to specify post URL:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Present a form and submit it back to the originator"
},
{
"type": "Input.Text",
"id": "firstName",
"placeholder": "What is your first name?"
},
{
"type": "Input.Text",
"id": "lastName",
"placeholder": "What is your last name?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Action.Submit",
"data": {
"x": 13
}
}
]
}
Adaptive cards aren't developed specifically for bot service.
so working with them needs some tricks , in your case if you are trying to send a request that contain adaptive card inputs you need to know :
when the user click the submit button the adaptive card will send a message to bot activity handler on behalf of the user, this message contains a JSON object (you can view this object by adding this line in the bot onMessage function.
console.log(context.activity)
you can get the data from this meesage by using :
context.activity.value.firstName (to get the firstName sent by the adaptive card)
Now you can send your request to the server i prefer using Axios .
I'm following instructions on shopify developers to create a 'How did you hear about us form field' for my website. FYI I am using safari on a Mac. Everything was working fine until I got to the step of 'Add theme settings for configuration.' In the Config. directory of settings_schema-json, the current code (below) already exists:
[
{
"name": "theme_info",
"theme_name": "Themekit template theme",
"theme_version": "1.0.0",
"theme_author": "Shopify",
"theme_documentation_url": "https:\/\/github.com\/Shopify\/themekit",
"theme_support_url": "https:\/\/github.com\/Shopify\/themekit\/issues"
}
]
I'm trying to add to that code with the code pasted below from shopify developers, which I'm told to paste on a new line below the closing curly bracket (above). But each time I do that and hit save, two error messages come up (see attached screenshot at bottom of post). The messages read 'An error prevented settings_schema.json from being saved' and 'Invalid JSON: unexpected token.' Does anybody have any idea what's going wrong here? I would be very grateful as I'm brand new to coding and this is the first time I've tried to make any changes to my website!
Thanks, Cosmo.
{
"name": "Hear About Us",
"settings": [
{
"type": "text",
"id": "hau_form_options",
"label": "Form options",
"default": "Facebook, Twitter, Google, Instagram, Youtube",
"info": "Separate each option with a comma"
},
{
"type": "header",
"content": "Form validation"
},
{
"type": "checkbox",
"id": "hau_form_validation",
"label": "Enable form validation",
"default": true
},
{
"type": "text",
"id": "hau_error_message",
"label": "Error message",
"info": "The error message that is displayed when no selection is made",
"default": "Please select an option below"
},
{
"type": "text",
"id": "hau_error_message_other",
"label": "Other field error message",
"info": "The error message that is displayed when there is no input in the 'Other' field",
"default": "Please fill the text field below"
},
{
"type": "header",
"content": "Error styling"
},
{
"type": "color",
"id": "hau_error_color",
"label": "Color",
"default": "#ff0000"
}
]
},
screenshot error message
Missing a comma ,, correct it and works fine
Update:
I have the following adaptive card JSON code that has three Input.Toggle's. Is there a way to throw an error when the user clicks "Submit" and all three Input.Toggle's are not set to true? I saw in the Schema Explorer (Schema Explorer Input.Toggle) that they have Inherited properties called "fallback" and "requires", is that what I need? If so, how do I implement "fallback" and "requires" into this JSON code?
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"placeholder": "1.1 Business Office Coordinator - RFQ Receipt",
"type": "Input.Text",
"id": "Title"
},
{
"text": "Quote ##{body('Get_response_details')?['b194cde8837234ccc80fu5017c1b0f869']} ",
"type": "TextBlock",
"id": "textBlock1"
},
{
"type": "Input.Toggle",
"title": "Customer Acknowledgement",
"valueOn": "custYes",
"valueOff": "custNo",
"id": "Customer"
},
{
"type": "Input.Toggle",
"title": "Create RFQ Log Number and Enter Information into RFQ Log",
"valueOn": "RFQYes",
"valueOff": "RFQNo",
"id": "RFQ"
},
{
"type": "Input.Toggle",
"title": "Populate Quote Folder with Customer Data",
"valueOn": "PopulateYes",
"valueOff": "PopulateNo",
"id": "Populate"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"id": "9876543210"
}
}
]
}
this is part of input validation which as of today is not available yet.
I'm afraid what you're asking for is not possible right now but will hopefully be soon.
You can follow the feature request here: https://portal.productboard.com/adaptivecards/1-adaptive-cards-features/c/21-input-validation-and-evolution , add your own vote to it aswell if you want to.
Depending on where you use the card however, you can get this working. In MS Teams you could verify the card submission in your own code and return an error. Its not client side but that way you can still do the check.
I have to build an Angular application that has a single task: It receives JSON data that describe a form structure, e.g.:
{
"textbox": {
"type": "string",
"name": "name",
"maxlength": 30,
"description": "Full Name"
},
"textbox": {
"type": "string",
"name": "email",
"maxlength": 40,
"description": "Email"
},
"date": {
"name": "birthdate",
"description": "Birthdate"
},
"checkbox": {
"name": "subscribe",
"options": [
"Yes",
"No"
],
"default": "No",
"description": "Subscribe?"
},
"button": {
"type": "submit",
"description": "Send"
}
}
And it should display it: (All forms are different with varying elements.)
I'm relatively new to Angular and my initial approach would be to create a simple template that has an ngFor in it, and inside many ngIfs (one for text fileds, one for text area, another for radio button, and so on...) that examine for the "type" of the given form element, and if there is a match, it gets displayed with its attributes written in the JSON.
Is it a good idea to start like this, or should I first learn some more Angular to be able to come up with a more professional solution?
Are things like dynamic and reactive forms in Angular for this purpose, or which part of Angular should I have a deeper understanding in for this task?