-
Notifications
You must be signed in to change notification settings - Fork 3
Elements
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. All the answers to every element contain an type field that has the same value of the one in the question(element) that originated that answer.
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"
}The value field in the answer can be true or false depending on the user's answer.
{
"type": "boolean",
"value": {"true", "false"}
}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. The icon field allows to choose between squarered or circular checkboxes (defaults to circle).
{
"type": "checkbox",
"name": "checkbox title",
"choices": [
"item1",
"item2",
"item3",
...
],
"icon": {"square", "circle"}
}The value field contains an array with the selected options, the array elements can only be a combinations of the ones in the choices array mentioned before.
{
"type": "checkbox",
"value": [
"item2",
...
]
}Text box where the user can leave a comment up to 240 characters. This element is ideal for larger text inputs.
{
"type": "comment",
"name": "comment title"
}The answer's value holds the text inserted by the user.
{
"type": "comment",
"value": "This is a test comment."
}Allows user to select one single output in a dropdown menu of choices.
{
"type": "dropdown",
"name": "dropdown title",
"choices": [
"item1",
"item2",
"item3",
...
]
}The value field contains the option selected from the question choices array via the dropdown.
{
"type": "dropdown",
"value": "item3"
}A read-only component to deploy an expression to the user.
{
"type": "expression",
"name": "expression title",
"commentText": "Other (describe)"
}This element does not produce an answer.
This element allows the user to pick and upload a file from its device. This file will encoded in base64 and sent as part of the answer to the survey. The maxSize prop is used to set a maximum size of the selected files, in the current version this is functionality is not implemented.
{
"type": "file",
"name": "file title",
"maxSize": 0
}The answer's value field will have the base64 file data.
{
"type": "file",
"value": "TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyBy..."
}Form element that displays the code html code received through the html field. In the form page this element will render a display area with a limited height, it is possible to expand the display area by clicking on it. Allow the user to visualize the entire html if the default height is not enought to do so. The might be some issues with font size of the displayed html, this can be solve by adding to the html code the head with the meta showed below.
{
"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>"
}This element does not produce an answer.
Form element that displays an Image to the user, having an imageLink prop containing the link of the image to be rendered. The image is rendered with its original size (width and height).
{
"type": "image",
"name": "image title",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
}This element does not produce an answer.
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. All the images displayed in the grid are grouped inside the choices array. Optionally, there is 3 customization fields to this element: numberPerLine that determines the number of images per line, imageSize that defines the size of the images to be displayed ("small", "medium" or "big") and singleChoice, a boolean value that allows multiple choices or not.
{
"type": "imagepicker",
"name": "imagepicker title",
"numberPerLine": 2,
"imageSize": "medium",
"singleChoice": true,
"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"
},
...
]
}The answer will have an array in the value field containing the values associated with the picked images.
{
"type": "imagepicker",
"value": [
"lion",
"giraffe",
...
]
}Form element 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",
...
]
}The answer's value is an array where each of its elements is another array with the values selected for each columns of a certain row.
{
"type": "matrixdropdown",
"value": [
[
{
"column": "Column 1",
"row": "Row 1",
"value": 1
},
{
"column": "Column 2",
"row": "Row 1",
"value": 2
},
...
],
[
{
"column": "Column 1",
"row": "Row 2",
"value": 5
},
{
"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 element that displays 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",
...
]
}In the answer can be found an array containing objects with the combination of rows and columns selected by the user.
{
"type": "matrix",
"value": [
{
"column": "Column 1",
"row": "Row 1"
},
{
"column": "Column 2",
"row": "Row 2"
},
...
]
}Provides multiple simple text input box, allowing the user to submit text data for each displayed box. Each simple text input have a maximum number of 40 characters.
{
"type": "multipletext",
"name": "multipletext title",
"items": [
{
"name": "text1"
},
{
"name": "text2"
},
...
]
}The answer's value is an array of objects, where is object has a name corresponding to the title given to the input field of the form and a value with the text inserted by the user.
{
"type": "multipletext",
"value": [
{
"name": "text1",
"value": "teste 1"
},
{
"name": "text2",
"value": "teste 2"
},
...
]
}{
"type": "paneldynamic",
"name": "paneldynamic title"
}{
"type": "panel",
"name": "panel title"
}Provides choices to the user in a Radio choice system, having a single output after submission.
{
"type": "radiogroup",
"name": "radio title",
"choices": [
"item1",
"item2",
"item3"
]
}The value field will have one of the options from the choices array mention previously.
{
"type": "radiogroup",
"value": "item3"
}Allows user to evaluate in a 0 to 5 star rating system. The element uses star icons to represent the classification instead of numbers.
{
"type": "rating",
"name": "rating title"
}The answer's value contains the rating value given by the user.
{
"type": "rating",
"value": 4
}Provides a simple text input box, allowing the user to submit text data up to 40 characters.
{
"type": "text",
"name": "text title"
}The answer's values field holds the inputed text.
{
"type": "text",
"value": "text input data"
}The Extra Elements are not comprised by the SurveyJS tool but where developed to provide more options to the users of this package.
This element allow the user to take a pictures using the device's camera, the taken photo is then previewed in the form page. When the form is submit the photo data is collected in base64.
{
"type": "camera",
"name": "Camera Title"
}{
"type": "camera",
"value": "TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyBy..."
}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": {"auto, "manual"}
}The value field in the answer holds the date collected by the component in a dd:mm:yyyy format.
{
"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": {"auto, "manual"}
}The value field in the answer holds the time collected by the component in a hh:mm:ss format.
{
"type": "timepicker",
"value": "14:19: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
}The answer will have a value field with the value selected using the slider bar.
{
"type": "range",
"value": 124,
}