Select Box

The Select Box is a generic HTML form input element in Joget. It allows users to select one or more options from a predefined list. Options can be defined manually or populated dynamically using a Form Options Data Store.

How does it work?

To see how the Select Box works, follow these steps to create a new app:

1. Open up a form in the Form Builder
2. Drag and drop a Select Box element onto the canvas.
3. Click the Select Box element to open the Configure Select Box properties.
4. Fill in the following fields and click Apply Change: 
   • ID: type
   • Label: Type
   • Options Hardcoded:
     

     Value	Label
     Local	Local
     International	International

5. Click Apply Change to save the configuration.
   
6. Click Preview and select the options available in the country field.
7. Click Save the changes on the Form Builder.
   

Configuration Settings

Configure Select Box

Using the Options Binder plugin, you can either hardcode or populate the options dynamically. If you have a large number of options, be mindful of performance impacts.

The Configure Select Box section allows you to set the Select Box element's label, ID, and options:

• Label: The element label to be displayed to the end-user. It's a mandatory field, and you can add Font Awesome Icons to your menu labels
• ID: Element ID. By declaring it as country, a corresponding database table column c_country will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• Options: Select Box options.
  • Value
  • Label
  • Grouping
    
    
    Options defined here will not be used if an Options Data Store has been defined below.
    
• Or Load Data From: Options to be populated dynamically using the Options Data Store.
  
  Performance Warning
  If you have thousands of select options or sourcing them from the Options Data Store, this may cause a significant increase in page load time. Consider using Popup Select Box or AJAX Select Box Plugin instead.

Advanced options

The advanced options provide settings for data handling, dependencies, UI customization, and workflow integration.

Data

The data section includes settings for default values, multiple selections, and validators to ensure data integrity and proper functionality. 

You can pre-populate the field with default values and attach validator plugins for input validation.

• Value: Default value when no existing value is found. A hash variable is accepted here. For example, you may key in #currentUser.firstName# #currentUser.lastName# to pre-populate the field with the currently logged-in user's name

  You may define multiple default options by separating them using semicolons (e.g. option1;option2;option3)

• Multiple Selection: Toggle multiple selections.
• Validator: Attach a Form Validator plugin to validate the input value. Validation will occur whenever a form is submitted except when submitted as Save as Draft.

Dependency

The dependency section allows you to create dynamic options based on the values of other fields. This is useful for creating cascading select boxes, where the options in one select box depend on another selection.

Configure the following field:

• Field ID to control available options based on Grouping: Dynamically change the available options based on the grouping attribute defined in the options by matching the current value of the element ID defined. This is also known as a cascade select box, where the first select box choice determines the second select box list of options. You can download the demonstration app ISIC List from the Joget Marketplace.

UI

The UI section includes settings for the number of rows displayed, read-only configurations, and how the element is displayed when read-only. 

These settings enhance the user experience by providing clear and intuitive options.

• Size (Rows): Determines the number of selection rows shown. This option is useful when multiple selections are expected. An integer value is expected here.
• Readonly: Determines if the element is editable.
• Display field as Label when readonly?: Displays the value of the element as plain text when an element is set to Readonly.

Workflow settings integrate the xxx with workflow processes, allowing values to be saved and used within workflow variables.

• Workflow Variable: If the form is part of a workflow process, upon saving the form by clicking Save as Draft or Complete, the value in this input field will be saved into the corresponding Workflow Variable named in this field.

FAQs

How can I make a drop-down list automatically update based on my selection?

Refer to Ajax Dynamic Cascade Drop-Downs. If it is based on more than one selection, refer to Multiple Dynamic Cascading Drop-Down List

Common Issues & Troubleshooting

• Using a non-existent Workflow Variable name
  You will get a warning with the name printed out (e.g., status) in the server log if you attempt to map to a non-existent Workflow Variable.

context attribute status does not exist in process context - adding new attributes to the process context is not allowed

Related Links

• Form Options Data Store
• Validate Field Based On Another Field
• Show and Hide Form Sections
• Selectbox Grouping Dependency Based on Parent Form Field
• Ajax Dynamic Cascade Drop-Downs
• Multiple Dynamic Cascading Drop-Down List
• Dropdown Selection with Multirow Data Store
• Add New Dropdown Option Without Form Reload
• Format Form Fields Side by Side