Multi Select Box

The Multi Select Box allows users to select multiple items with an auto-complete feature. This is particularly useful when dealing with a long list of options, as it displays options based on the user's input. The Multi Select Box is available only in Joget's Enterprise Edition.

How does it work?

To see how the Multi Select Box works, follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click on the Design New App button.
   
3. In a form, drag and drop a Multi Select Box element onto the canvas.
4. Click the Multi Select Box element on the canvas to open the Edit Multi Select Box properties.
5. Fill in the options and click on Apply Change.
   

Configure Multi Select Box

The Multi Select Box properties allow you to configure the element's label, ID, options, default value, grouping, data loading method, and more.

Configure the following fields:

• Label: The element Label is to be displayed to the end-user.
• ID: Element ID. Declaring it as country will create a corresponding database table column c_country. See Form Element for more information about defining the ID and a list of reserved IDs.
• Options: Manually defined options such as Default Value, Label, and Grouping will be ignored if an Options Binder is defined. An Options Binder dynamically populates the Select Box with options from an external data source.
  • Default Value: Specifies the default value stored if the user does not select any option. For example, if the Select Box options are countries, and United States is set as the default value, United States will be selected by default.
  • Label: The text displayed to the end-user for each option in the Select Box. For instance, if the options are numeric values 1, 2, and 3, the Labels could be Low, Medium, and High, respectively, for easier user understanding.
  • Grouping: Specifies a field to group options within the Select Box. For example, if the Select Box lists cities, grouping by country would organize cities under their respective countries.
• Or Load Data From: Options to be populated dynamically using the Form Options Data Store.
  
  Performance Warning
  If you have thousands of select options or source them from an Options Data Store, this may significantly increase page load time. Consider using a Popup Select Box instead.

Advanced options

The Advanced Options section in Joget provides additional settings to enhance the functionality, customization, and performance of forms within applications. These options allow users to fine-tune how forms behave and how data is managed, ensuring that the application meets specific requirements and handles data efficiently.

Data

The Data section in Joget allows you to define settings related to how data is stored and managed within forms. This includes configuring default values and enabling multiple selections.

Configure the following fields:

• Default Value: The value automatically displayed if no other value is selected or entered. Hash variables can be used here to auto-populate the field with information (e.g., #currentUser.firstName# #currentUser.lastName#). Multiple default options can be separated by semicolons (e.g., option1;option2;option3).
• Multiple Selection: Toggle to allow multiple selections.

Dependency

The Dependency section enables dynamic control over form elements based on specified conditions. This includes linking options based on groupings and managing available selections.

Configure the following fields:

• 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.

UI

The UI section provides tools to customize the appearance and behavior of form elements. This includes setting widths, readonly options, and validator plugins for data validation.

Configure the following fields:

• Width: Column width in characters (e.g., 200px).
• Readonly: Determines if the element is editable.
• Display field as Label when readonly?: Displays the value of the element as plain text when the element is set to Readonly.
• Validator: Attach a Validator plugin to validate the input value. Validation will occur whenever a form is submitted except when submitted as Save as Draft.
  Available Options:
  

• • Basic
  • BeanShell
  • Data and Time Duplicate Validator
  • Directory
  • Duplicate Value
  • Equal Value
  • Multi Form Validator
  • Password
  • Plugin Template - Validator

Workflow

The Workflow section integrates forms into workflow processes, allowing form data to interact with workflow variables. This includes mapping form data to workflow variables and managing process context.

Configure the following fields:

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

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

Video tutorial

Here is a video tutorial explaining the Multi Select Box configuration process in detail. This tutorial provides a step-by-step guide to ensure you understand how to use this feature effectively.