Hierarchy
- To access to the live survey, click on the picture above.
- To download the QEX file (inside example directory), click here.
- Version of the ADC: 2.0.5.
This ADC is really useful when dealing with long lists of answers that have some kind of hierarchical structure - for example, a list of car makes and models; regions and cities; brands and products, etc.
This control is compatible with a chapter.
Note: To use this control in good condition, the JavaScript database should not exceed 2Mb.
Parameters | Type | Comments and/or possible value |
General | ||
JavaScript database file path | String | ??ResPath??yourjsonfile.js [REQUIRE] Path of the JavaScript database file to include in the document. This property is dynamic, we recommend the usage of the ??ResPath?? and include the JavaScript file in the survey resources. The file must be generated with http://www.askia.com/Downloads/dev/adc/hierarchy/CSVConverter.html It contains the following code format: Hierarchy.databases["name_of_database"] = {/* Database information */ }; Example: Hierarchy.databases["vehicles"] = { /* Definition of levels */ "levels" : [ { "id" : "brand_id", "name" : "brand", "liveValues" : ["brand_id"] }, { "id" : "model_id", "name" : "model", "liveValues" : ["model_id", "model_code"] }, { "id" : "version_id", "name" : "version" }, { "id" : "option_id", "name" : "option" } ], /* Map name / index of table headers */ "header" : { "brand_id" : 0, "brand" : 1, "model_id" : 2, "model" : 3, "model_code" : 4, "version_id" : 5, "version" : 6, "option_id" : 7, "option" : 8, "id" : 9, "code" : 10 }, /* Records. Array of lines which contains an array of columns lines[columns[]] */ "records" : [ ["1", "CITROEN", "7", "C2", "Mo1", "24", "VU", "1", "CDV", "1", "A1"], ["1", "CITROEN", "9", "C4", "Mo1", "24", "VU", "1", "CDV", "2", "A2"], ["1", "CITROEN", "8", "C3", "Mo1", "24", "VU", "1", "CDV", "3", "A3"], ["2", "FIAT", "20", "Ducato 30", "Mo11", "19", "van", "2", "LCV", "11", "A11"], ["2", "FIAT", "21", "Ducato 33", "Mo11", "19", "van", "2", "LCV", "12", "A12"], ["2", "FIAT", "22", "Ducato 35", "Mo11", "10", "light van", "2", "LCV", "13", "A13"] ] }; |
Database name | String | vehicles [REQUIRE] Name of the database as it appear in the JavaScript database file |
Values to save | String | [REQUIRE] Name of fields separate with coma and surround by quotes or double-quotes. It indicates the fields to save on the latest level selection. Example: "id", "code", "brand_id", "model_id", "model_code", "version_id", "option_id" |
HTML Ids prefix | String |
[OPTIONAL] - If you use the control in a loop, you will need to have a different prefix for each iteration. You can use for instance !!CI(1)!!, so if the field to save is "brand_id" and the prefix is "vehicle!!CI(1)!!_", you must have a HTML input in your page with the id="vehicle!!CI(1)!!_brand_id" |
Display name of levels | String | [REQUIRE] Label of the dropdown for each levels. Each level must have a display names even if it's an empty name. All names must be surrounded by a double-quotes and separate with coma. It is require to generate the right number of dropdown Example: "Brands", "Models", "Versions"or if you have four levels "", "", "", "" |
Text of first dropdown options | String | [OPTIONAL] Text of the first dropdown options for each levels. All text must be surrounded by a double-quotes and separate with coma. Example: "Please select a brands", "Please select a models", "Please select a versions"Note: This option is used only if you set the "Dropdown size" parameter to 1 to show the levels as dropdown and not as list. |
Orientation | Combo box | Vertical or Horizontal Define if the different levels should be shown vertically or horizontally. Default: Vertical |
Horizontal space | String | [REQUIRE] Size of the horizontal space between dropdown (pixel by default). Works with the horizontal orientation Default: 15px |
Width of inputs | String | [REQUIRE] Indicates the width (including the unit) to use for the both the search input and the dropdown list. Default: 300px You can also use other units, for instance 100%. |
Dropdown size | Number | [REQUIRE] Indicates the size of the dropdown list. It's the number of options visible before the scroll. Default: 10 Note, if you want to use a dropdown menu instead of a list then set it to 1. |
Not supported browser text | String | [REQUIRE] Message to display to the non-supported browser Default: Sorry this page uses JavaScript code, please enable it |
Search | ||
Use search | Combo box | [OPTIONAL] No search or Auto-generate search or Custom search input Add the input search Default: Auto-generate search |
Id of custom search input | String |
[OPTIONAL] Id of the open ended used for the search field if Custom search input was selected in Use Search |
Label of search input | String | [OPTIONAL] Text to use in the label of the search input. |
Search fields | String |
[OPTIONAL] You can use one or several fields for the search. It's require when using search. "brand", "model" |
Search at beginning | Combo box | [OPTIONAL] Search at the beginning of the field value Default: Yes |
Separator of words in input search | String |
[OPTIONAL] Will search "Citroen" AND "c2" |
Min characters | Number | [REQUIRE] Minimum number of characters entered before to trigger the search. Default: 2 Note, if you set 0 then the value used will be the default one (2) so set a number >= 1 |
Behaviours | ||
Display first level items | Combo box | Yes or No Display first level items Default: No |
Auto select when 1 result found | Combo box | Yes or No Auto select when only one result is found Default: No |
Sub-levels visibility | Combo box | Visibility of sub-levels when not activated. It could be: "Visible", "Hidden" or "Disabled" Default: Visible |
Max results | Number | Maximum number of results to display in the dropdown. Set 0 for unlimited results. This option is useful if you have a huge database. Default: 0 |
Example video (no sound)
ADC 2.0 hierarchy control from Askia on Vimeo.