Adaptive card conditional validation - json

I have an adaptive card like below
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"text": "Order Page",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Text",
"label": "Item",
"id": "item",
"isRequired": true,
"errorMessage": "Name is required"
},
{
"type": "Input.Text",
"label": "Quantity",
"isRequired": true,
"errorMessage": "Location is required",
"id": "quantity"
},
],
"actions": [
{
"type": "Action.Submit",
"title": "Cancel",
"data": {
"buttonClicked": "cancel"
}
},
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"buttonClicked": "submit"
}
}
]
}
I am using this in a chat bot.
Here the user has to enter the item name & the quantity if they wish to order by clicking Submit button.
On the other hand if they change their mind and not wish to order, they can just click Cancel button.
However, since I have "isRequired": true, the card starts to validate even when the user clicks Cancel button. So, how to do the validation ONLY when Submit button is clicked but not when Cancel button is clicked?

There is a solution available. You can use the property "associatedInputs" and set it to "none".
{
"type": "Action.Submit",
"title": "Cancel",
"associatedInputs": "none",
"data": {
"buttonClicked": "cancel"
}
},
You may find the relevant documentation here:
https://adaptivecards.io/explorer/Action.Submit.html

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.

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

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

Why is 'Error: Invalid JSON: unexpected token' coming up? (brand new to this!)

enter image description hereThis is the first time i've tried to add code into my website so I'm very new to the whole thing... What I'm trying to do is add the 'how did you hear about us' question to the checkout process on my website.
Specifically, I'm having trouble trying to add a theme setting to my website using coding instructions from 'shopify developers'. In the configuration directory of 'Themes', after clicking on settings_schema.json , I follow instructions to add some code after the first curly bracket }, but when I do so and try hit save, the error message 'Invalid JSON: unexpected token' comes up. If anyone can help me that would be hugely appreciated! I'm pasting below the existing code, and below that the snippet of code I'm trying to insert. Just FYI I am using safari.
Does anyone have any idea?
Best,
Cosmo
exisiting code
[
{
"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"
}
]
new code I'm trying to insert
{
"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"
}
]
},
I checked the JSON using JSONLint, and it looks like the trailing comma on the end is messing it up.
EDIT: I see the image now, the comma needs to be added before since you are adding it to an Array.
[{
"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"
},
{
"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"
}
]
}
]

template forms in prismic

I'm new to prismic and trying to figure out if this is right tool for what I need. I need to create multiple form templates. I want prismic user to be able to build out the template, which will get loaded into gatsby where each field will get built out as components based on a title, type, action, name.
Title will be the title or label.
type will be the type of form element, ex: input, button, radio action,
if its a button the action it needs to do.
name the name for the form element.
Does prismic seem like a good candidate for this and does anyone know of any examples of how I might go about setting up the prismic end. Most of what Ive seen so far is full pages with just title and images. Not exactly forms.
In their repository I only see these options to create elements am I missing some important ones ?
Title
Rich Text
Image
Content Relationship
Link
Link to Media
Date
Timestamp
color
number
key text
Select
Embed
GeoPoint
Group
How would I go about creating form elements, Is there a way to create custom objects to export? Every time I try to add a new filed or a custom object to the json editor it says. Unrecognized, property it will be ignored.
I'd like to be able to use the group to group a bunch of form elements together even if they are just custom objects that I can pass custom properties to so when I load the group into React I can use the custom properties to build out my components ?? Can anyone set me straight here on if this is possible using prismic.
Thanks!
I can't say if Prismic is the best tool for this particular job, but i think you're overestimating what exactly you need in order to render a html form.
Consider the following custom type. It really only consists of titles, structured texts, a repeatable zone and a select. What you do with that data is completely up to you on the front end.
{
"Main": {
"uid": {
"type": "UID",
"config": {
"label": "Form UID",
"placeholder": "Form UID"
}
},
"form_title": {
"type": "StructuredText",
"config": {
"single": "heading2",
"label": "Form Title",
"placeholder": "Form Title"
}
},
"action_title": {
"type": "StructuredText",
"config": {
"single": "heading2",
"label": "action title",
"placeholder": "Submit form"
}
},
"form_action_description": {
"type": "StructuredText",
"config": {
"single": "paragraph",
"label": "form action description",
"placeholder": "form action description"
}
},
"success_message": {
"type": "StructuredText",
"config": {
"single": "paragraph",
"label": "success message",
"placeholder": "success message"
}
},
"error_message": {
"type": "StructuredText",
"config": {
"single": "paragraph",
"label": "error message",
"placeholder": "error message"
}
},
"submit_button_text": {
"type": "StructuredText",
"config": {
"single": "paragraph",
"label": "submit button text",
"placeholder": "submit"
}
},
"body": {
"type": "Slices",
"fieldset": "Slice zone",
"config": {
"choices": {
"test": {
"type": "Slice",
"fieldset": "Form Section",
"description": "Section of a form",
"icon": "vertical_align_center",
"display": "list",
"non-repeat": {
"form_section_title": {
"type": "StructuredText",
"config": {
"single": "heading1",
"label": "Form Section title",
"placeholder": "Form Section title"
}
},
"form_section_description": {
"type": "StructuredText",
"config": {
"single": "paragraph",
"label": "Form Section Description",
"placeholder": "Form Section Description"
}
}
},
"repeat": {
"label": {
"type": "StructuredText",
"config": {
"single": "paragraph",
"label": "label",
"placeholder": "label"
}
},
"type": {
"type": "Select",
"config": {
"options": [
"text",
"textarea",
"checkbox",
"radio",
"submit"
],
"default_value": "text",
"label": "type"
}
},
"name": {
"type": "StructuredText",
"config": {
"single": "paragraph",
"label": "name",
"placeholder": "name"
}
}
}
}
}
}
}
}
}

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