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. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer. 
   
3. Under the Form Builder column, click Expense Claim Entry. 
   
4. Drag and drop a Select Box element onto the canvas.
5. Click the Select Box element to open the Configure Select Box properties.
6. Fill in the following fields and click Apply Change: 
   • ID: type
   • Label: Type
   • Options Hardcoded:
     

     Value	Label
     Local	Local
     International	International

     
7. Click Preview and select the options available in the country field.

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.
• 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 (Hardcoded): Select Box options.
  Options defined here will not be used if an Options Binder is 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 Options Data Store, this may cause a significant increase in page load time. Consider using Popup Select Box 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 there's no existing value found/selected.
  A Hash Variable is accepted here. For example, you may key the following:

  #currentUser.firstName# #currentUser.lastName#

  Markup

  To pre-populate the field with currently logged in user's name.

  You may define multiple default options by separating them using semicolons.

  Sample
  option1;option2;option3
• Multiple Selection: Toggle multiple selections.
• Validator: Attach a Validator plugin to validate the input value.
  
  When will validation take place?
  Validation will take place whenever a form is submitted except when it is submitted as Save as Draft.
  Available Options:
  • Basic
  • BeanShell
  • Date and Time Duplicate Validator
  • Directory
  • Duplicate Value
  • Equal Value
  • Multi Form Validator
  • Password
  • Plugin Template - Validator

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

Workflow settings integrate the Select Box with workflow processes, allowing the selected values to be saved and used within workflow variables. This ensures that the form data flows seamlessly within your business processes.

Configure the following field:

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

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