Dropdown and Multi-select dropdown element
Compose Enterprise is going through a design update. The illustrations on this page might be of the old design, but the information is up to date. Thank you for your patience during this update!
Create or open a previously created form and navigate to the Builder section of the form builder. You will find the dropdown element in the Elements menu on the right hand side. Click to add the dropdown element to the canvas.
Select the new dropdown element in order to access its Properties menu under the Elements menu.
Properties - Builder | |
---|---|
Text | Write the text/question you want the user to read in the published form in the textbox under Text. The new question label will appear in the canvas when you press enter or move to the next setting. |
Position | Select where you want to place your label in regard to the options. Your choices are Left, Right, Top and No label. |
Override Width | Choose how wide the label field should be. If you check off this check box a new field will appear and you can enter the desired number of characters (in measurement of em – 2em = 2 times the size of the current font). |
Type | Choose whether the multiselect element consists of a dropdown menu or radio buttons. |
Validation | Choose from default and custom-built validations for the input. Every question except file upload and date, has String as default validation. For more info about validations, see the Validation Builder documentation. |
Enter | Click Options and customize the dropdown options in the Options menu (more info in the Options Menu documentation). It is not possibly to add help texts to dropdown options (in comparison to other questions). |
Select | Toggle the radio button, browse and choose an option source to populate the options automatically. Learn more about option sources and how to connect them to forms in the Option Source documentation. |
Override Width | Choose how wide the dropdown menu should be. If you check off this check box a new field will appear and you can enter the desired number of characters (in measurement of em – 2em = 2 times the size of the current font). |
Read-only | Toggle this check box in order to make the element read-only. |
Alias | Question alias is a unique additional identifier that may be set on a question. It is non-mandatory and there are rules as to which names it can take. It can't e.g. start with a capital letter, contain white-space characters or letters outside the Latin alphabet, and must have a length of 1 to 40 characters. The question alias can be used to automatically map form questions with a PDF template in the Workflow Builder. |
Events | Choose if you want to trigger actions with events for this question. There are three types of actions; Execute script, Call CNG service and Call Generic Service, and there can be multiple actions triggered per question. See the Events Menu documentation for more information. |
Properties - Help/Style | |
---|---|
Help Text | Toggle Display Help and write a Help Text for guiding the end-user in writing the right answer for this question. The help text is available to the user next to the element by clicking the icon. |
Help icon placement | The Help icon placement controls where the help icon is placed. Your choices are: Next to label and Next to input. |
Tooltip | Toggle Display Tooltip and write a Tooltip for guiding the end-user in writing the right answer for this question. The tooltip is available to the user by hovering over the element. |
Style – Tag Names | Insert tags which will be translated into CSS class names for the implementation elements in the respondent-GUI. The feature comes in handy when you are customizing a skin. |
Hint Text | Toggle Display Hint and write a Hint Text for guiding the end-user in writing the right answer for this question. Choose the width and position of the hint text in the Width and Position fields. This only limits the visual width of the hint text. The hint text can be visible to the user to the right or at the bottom. |
For more guidance on shaping form content through guiding texts and styling, check out the user guides through the documentation page Help and Style - guide the end-user through the form.
Properties - Conditions | |
---|---|
Display Condition | You can choose to hide and show elements depending on different conditions. |
Enable Condition | You can enable and disable elements depending on different conditions. |
Information about changing display and enable conditions can be found in the Display/Enable conditions and Condition scripting user guides.
Properties - Advanced | |
---|---|
Use label from data model | The label saved in the data model will be shown in the respondent view. |
Override label from data model | The label added to the currently opened view will be shown in the respondent view. The same question element (same Question ID) may therefore have different labels in different views. You might for instance want to shorten label text for question elements when used in a mobile view. |
Validation Script runs when completing | In the Data Model section is a validation script window, where you can customize a validation script. This is handy if your validation depends on other question elements (as you cannot reference question IDs in the Validation Builder). You can choose to have the validation script run when the end-user either completes the form, the page or the element. |
The Question is | The end-user does not have to answer the question if the question is optional or recommended (but a recommended question will launch a warning to the end-user recommending them to answer the question). It is mandatory for the end-user to answer the question, either by the completion of the form if it’s set to mandatory, or before entering the next page if it’s set to page mandatory. Max – Maximum amount of characters in responder input. |
Option Source is also used by | Choose from your input variables in the Overridden by Input Variable dropdown menu to override the options. As of Compose 8.4.4, this function, although visible, is outdated. |
Multi-select dropdown
Overview
Multiselect drop-down allows users to select multiple elements from the list and also users can select or deselect all options from the menu. The setup is similar to a normal drop-down which you can refer to in the documentation above.
The icon for the multi-select dropdown is similar to the regular dropdown icon. However, we plan to update it to a unique design in the future. When you hover the cursor over the icon, the multi-select dropdown button will be clearly identifiable.
When more than 10 options are available in the dropdown list, an ellipsis (…) will be displayed to indicate additional options.
On the preview page, you have the option to Select All and Clear All. When the Select All button is clicked, all options will be selected, and the button label will change to Clear All. All selected options will be displayed at the bottom. You can also manually select or deselect individual options as needed.