Popup Select Box

The Popup Select Box in Joget is an enhanced version of the ordinary Select Box, allowing selections from a  Datalist with pagination and search filters. This feature is ideal for handling thousands of options efficiently. 

How does it work?

To see how the Popup Select Box works, follow these steps using the built-in App Expenses Claims:

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. Click the Create New Form button and fill in the Form Details as follows:
   • Form ID: popupSelectBox
   • Form Name: Popup Select Box
   • Table Name: j_expense_claim
     
4. Drag and drop a Popup Select Box element onto the canvas.
5. Click the Popup Select Box element to open the Configure Popup Select Box properties.
6. Fill in the Edit Popup Select Box properties as follows and click Apply Change:
   • ID: appeal_claim
   • Label: Select Existing Claim
   • Datalist: Expense All
   • Display Field: title
7. Click the Save button on the Form Builder.
   
8. Add data to display in the Popup Select Box.
9. Go to the Design App and click the Launch button next to the Expenses Claims App.
10. Click the Create a New Expense Claim button, fill in the necessary details, and click the Continue Next Screen button.
    
11. Fill in the necessary details and click the Complete button.
12. Head back to the Popup Select Box in the Form Builder.
13. Click Preview and click the Select button to display the popup Datalist.
14. Select one or more records and click the Select button. The selected record title will be displayed.
    
    
    

Configure popup select box

Configuring the Popup Select Box involves setting its label, ID, data list, and display field. These settings determine how the Popup Select Box will present and manage the options for users to select from a dynamically populated data list.
Fields to configure:

• Label: The element label to be displayed to the end-user.
• ID: The element ID. By declaring it as appeal_claim, a corresponding database table column c_appeal_claim will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• Data List: Data List to display for selection.
• Display Field: Field ID from the target Data List for the selected option label.

Advanced options

Advanced options provide additional data handling, validation, and UI customization settings.

Data

The Data section allows you to define default values, specify target data list columns, enable multiple selections, and refine data list selections using URL request parameters. These settings help manage how data is handled and displayed within the Popup Select Box.

Fields to configure:

• Default Value: 

  Default Value is when no existing value is 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 the currently logged-in user's name.

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

  Sample
  option1;option2;option3
• ID Field: Target Data List's column ID value to be saved as the option value. Default: id.
• Multiple Selection: Toggle multiple selection.
• URL Request Parameters for Datalist: Refine the target Data List selections by defining the filter criteria here.
  • Parameter: Target Data List filter parameter name.
  • Field ID: Current form element field ID.
  • Default Value: Default value for the search parameter.
• Validator: Attach a Validator plugin to validate the input value.
  
  When will validation take place?
  Validation will occur 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

UI

The UI section allows you to customize the popup select box's visual presentation and interaction. This includes settings for read-only mode, select button label, and popup dialog dimensions.

Fields to configure:

• 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.
• Select Button Label: Label for the select button.
• Popup Dialog Height: Height in characters (e.g., 500px).
• Popup Dialog Width: Width in characters (e.g., 90%).

Workflow

Workflow settings integrate the Date Picker 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.

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

Button to clear all selected options in popup select box

Add a custom HTML element into the form and paste the following code. Remember to change field_id to the Popup Select Box Element ID.

<button type="button" onclick="clearAll()">Clear All</button>

<script>
function clearAll(){
    FormUtil.getField("field_id").parents(".form-cell").find(".selector_remove").each(function(i, obj) {
        $('.selector_remove')[0].click();
    });
}
</script>

This script adds a button to clear all selected options in the Popup Select Box, enhancing user control and interaction with the form element.