-
Notifications
You must be signed in to change notification settings - Fork 2
Home
In this page is explained how to use each element in the json file that defines the form. Each of these elements can be added to the elements array mentioned in the README.
All the available elements must have the type field which must take the value one of the values exemplified bellow. The name field is also required and common to all the elements, it must be a string that will be displayed above the input of each element in the form.
In the Core Elements can found all the elements that are obtainable when creating a JSON form using SurveyJS. The JSON for these elements follows the exact syntax used by the SurveyJS tool.
Switch button that can take the value of true(switch ON) or false(switch OFF). The labelTrue and labelFalse props are not used, they are just there for a compatibility issue with SurveyJS.
{
"type": "boolean",
"name": "boolean title",
"labelTrue": "Yes",
"labelFalse": "No"
}{
"type": "boolean",
"value": true,
}List of options that can be selected/unselected on press. State is shown with a checkbox icon. The choices array contains the items to be displayed in the list.
{
"type": "checkbox",
"name": "checkbox title",
"choices": [
"item1",
"item2",
"item3",
...
]
}{
"type": "checkbox",
"value": Array [
"item2",
],
}Text box where the user can leave a comment up to 240 characters.
{
"type": "comment",
"name": "comment title"
}{
"type": "comment",
"value": "This is a test.",
}Allows user to select one single output in a dropdown menu of choices.
{
"type": "dropdown",
"name": "dropdown title",
"choices": [
"item1",
"item2",
"item3",
...
]
}{
"type": "dropdown",
"value": "item3",
}A read-only component to deploy an expression to the user.
{
"type": "expression",
"name": "expression title",
"commentText": "Other (describe)"
}{
"type": "file",
"name": "file title",
"maxSize": 0
}Form that displays to the user in a new window the html code provided.
{
"type": "html",
"name": "question10",
"html": "<html><head><meta name='viewport' content='width=device-width, initial-scale=1'></head><body><div><p>Html Element</p></div></body></html>"
}Form element that displays an Image to the user, having an imageLink prop containing the link of the image to be rendered.
{
"type": "image",
"name": "image title",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
}Allows user to select image(s) displayed in a grid. Each image has a imageLink prop containing the link of the image to be rendered, having a value associated with it.
{
"type": "imagepicker",
"name": "imagepicker title",
"choices": [
{
"value": "lion",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
},
{
"value": "giraffe",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
},
...
]
}{
"type": "imagepicker",
"value": Array [
"lion",
"camel",
],
},Form displayed as a matrix that allows user to choose a value from the choices prop for each column and row with a dropdown menu system.
{
"type": "matrixdropdown",
"name": "matrixdropdown title",
"columns": [
{
"name": "Column 1"
},
{
"name": "Column 2"
},
...
],
"choices": [
1,
2,
3,
...
],
"rows": [
"Row 1",
"Row 2",
...
]
}{
"type": "matrixdropdown",
"value": Array [
Array [
Object {
"column": "Column 1",
"row": "Row 1",
"value": 1,
},
Object {
"column": "Column 2",
"row": "Row 1",
"value": 2,
},
],
Array [
Object {
"column": "Column 1",
"row": "Row 2",
"value": 5,
},
Object {
"column": "Column 2",
"row": "Row 2",
"value": 4,
},
],
],
}{
"type": "matrixdynamic",
"name": "matrixdynamic title",
"columns": [
{
"name": "Column 1"
},
{
"name": "Column 2"
},
...
],
"choices": [
1,
2,
3,
...
]
}Form displayed as a matrix that allows user to choose a column for each row with a radio buttons system.
{
"type": "matrix",
"name": "matrix title",
"columns": [
"Column 1",
"Column 2",
"Column 3",
...
],
"rows": [
"Row 1",
"Row 2",
...
]
}{
"type": "matrix",
"value": Array [
Object {
"column": "Column 1",
"row": "Row 1",
},
Object {
"column": "Column 2",
"row": "Row 2",
},
],
}Provides multiple simple Text Input Box, allowing the user to submit text data for each displayed box.
{
"type": "multipletext",
"name": "multipletext title",
"items": [
{
"name": "text1"
},
{
"name": "text2"
}
]
}{
"type": "multipletext",
"value": Array [
Object {
"name": "text1",
"value": "teste 1",
},
Object {
"name": "text2",
"value": "teste 2",
},
],
}{
"type": "paneldynamic",
"name": "paneldynamic title"
}{
"type": "panel",
"name": "panel title"
}Provides choiches to the user in a Radio choice system, having a single output after submission.
{
"type": "radiogroup",
"name": "radio title",
"choices": [
"item1",
"item2",
"item3"
]
}{
"type": "radiogroup",
"value": "item3",
}Allows user to evaluate in a 0 to 5 star rating system.
{
"type": "rating",
"name": "rating title"
}{
"type": "rating",
"value": 4,
}Provides a simple Text Input Box, allowing the user to submit text data.
{
"type": "text",
"name": "text title"
}{
"type": "text",
"value": "test",
}The Extra Elements are not comprised by the SurveyJS tool but where developed to provide more options to the users of this package.
Date and time pickers. Props type selects if the element will allow to pick a date(datepicker) or a time(timepicker). The mode prop allows to pick date and time manually(manual) or to automatically(auto) select the current date or time.
{
"type": "camera",
"name": "Camera Title"
}Allows user to pick a specific date. The mode prop allows to pick it manually(manual) or to automatically(auto) select the current date.
{
"type": "datepicker",
"name": "Datepicker Title",
"mode": "manual"
}{
"type": "datepicker",
"value": "26-7-2020",
}Allows user to pick a specific time. The mode prop allows to pick it manually(manual) or to automatically(auto) select the current time.
{
"type": "timepicker",
"name": "Timepicker Title",
"mode": "manual"
}{
"type": "timepicker",
"value": "4:9:30",
}Slider bar that will allow the user to choose a value between min and max with a precision of step, being this last one set to 1 by default if not defined by user.
{
"type": "range",
"name": "Range Title",
"min": 0,
"max": 200,
"step": 1
}{
"type": "range",
"value": 124,
}