| Table of Contents |
Drop-Down
Overview
Dropdown is the name used to describe an input element that allows users to select from a predefined list of options. These options represent a string of text with no line breaks.
To add a Dropdown element, go to Base Types > Dropdown and add it to the canvas.
To add a prebuilt Label / Dropdown prebuilt custom type, go to Custom Types > Common: Label | Dropdown and add it to the canvas.
Type of Data Stored
A Dropdown stores a string of text with no line breaks or styling.
A Dropdown can only store one of the options defined in the optionList attribute.
A Dropdown option can have any character in an option, except for the character ; , which is used to separate the options in the optionList.
A Dropdown can only have is capable of storing up to 4000 characters across all options: including spaces, punctuation, and the ; delimiters.
A Dropdown has no line wrapping. If the option text in a Dropdown exceeds the width of the textbox, it will be hidden on the right side of the textbox. There is no way of displaying the hidden content in a Dropdown that is too narrow to display the option selected.
Attributes
| Attribute | Description |
|---|---|
| optionList |
This is a list of all options for this Dropdown, separated by a ; . For more information on updating the options, please read this article on updating the options |
| description |
This is the description of the element used by other modules in the clevr platform. For more information on how description is used, please read this article. A description should be placed on all input elements, to allow them to be identifiable in those modules. |
| disabled |
This will disable the element and prevent modification for all roles, regardless of applied permissions. The disabled attribute should only ever have the value “true” applied. A value of “false” will still make an element disabled. The disabled attribute differs from readonly as it visually greys-out the element to indicate that it is disabled. Utilizing disabled is preferrable to readonly, as it provides visual feedback to the user for why they can’t modify the element. |
| readonly |
This will disable the element and prevent modification for all roles, regardless of applied permissions. The readonly attribute should only ever have the value “true” applied. A value of “false” will still make an element readonly. The readonly attribute differs from disabled as it provides no visual feedback to the user that the element can not be modified. Utilizing disabled is preferrable to readonly, as it provides visual feedback to the user for why they can’t modify the element. |
Other attributes may be applicable to Dropdowns, such as searchable, bulkdataentry, SIS Data Import, and attributes related to Data Tables. Information on the use of those attributes can be found in the applicable lessons.
Import Data
Dropdowns are a good option element to use Import Data into.
Because they store a fixed set of options, the dropdown must have an option for all possible values that is being sent by your SIS or stored in the demographics file your organization provided to clevr.
If the imported value doesn’t exist as an option on the Dropdown, then the dropdown will not appear to change until the page is refreshed, which will then show the value in the way defined below in the “Dropdown Value Doesn’t Match an Option” section.
For more information about setting up elements for Import Data, please read the lesson called “SIS and GDI Import” in Level 2.
Dropdown Value Doesn’t Match an Option
If the value stored in an Dropdown doesn’t match any of the available options, then the value will be automatically be created based on how the Dropdown options are populated.
This situation can occur due to the removal of an option, Import Data with a value that isn’t an option, or an error with the Javascript applied to the form.
This option will remain for as long as no other option is selected in the dropdown. Once a user has selected an available option, the old value will not be available to select.
For more information, please read this article on updating a dropdown.
optionList
If the Dropdown options are provided by an optionList attribute, then the non-option value will appear above the blank option. This is called a “floating” option, because the missing value floats above all the defined options.
data-source
If the Dropdown options are provided by a data-source attribute, then the non-option value will appear below all other options. This is called a “sinking” option, because the missing value sinks below all defined options.
Compatible Common Functions
The following common function are compatible with with Textboxes:
- updateDropdownList
- elementsToArrayOfStrings
- autoSetSchoolYear
- updateVal