Dynamic Options Select Box

Introduction

The Dynamic Options Select Box is a select box that retrieves existing options and enables users to create a new record using an existing form.

Plugin Information

Plugins Available in the Bundle:

1. Dynamic Options Selectbox

This plugin bundle is compatible with Joget DX 8.

Steps

1. Obtain the jar file by the latest release at https://github.com/jogetoss/dynamic-options-selectbox/releases.
2. Upload the plugin jar file in Joget by going to Settings > Manage Plugins.
3. Choose to import the demo app or create the app from scratch.

Steps for importing demo app

1. Download the demo app from https://github.com/jogetoss/dynamic-options-selectbox (.jwa file).
2. Go to Joget Home or All Apps, and click Import App to import the downloaded demo app.

Steps for creating app from scratch

1. The first part of the app is the form. Create a form that you would like to retrieve the select box options from.
2. On the right up corner, click Generate App, and Generate CRUD.
3. Create another form to hold the Dynamic Options Select Box. Drag the element into the form and fill in the plugin properties. For more information, you can refer to Dynamic Options Select Box Properties. You can fill in the form we created earlier in first step as the popup form, with the id and display fields to show in the list, and also with the list of the first form.
4. On the right up corner, click on Generate App, and Generate CRUD for this main form.

Steps to run the plugin

1. Publish and run the UI. Go to Manage Main Form and click on New.
2. You can see there are no existing options in the select box. Add one by clicking on Select. Fill in the option name.
3. Now you can see the option is automatically added and chosen.
4. You can choose to add more options or continue by saving the form. After saving the form, click on Manage Add User Form. You can see that the option is added in the form.

Dynamic Options Select Box Properties

Configure Dynamic Options Select Box

Fields to configure:

• Label:
  • Menu label.
• ID:
  • Menu element unique ID.
• Populate Select Box:
  • Header field.
• Form:
  • Form to add record.
• ID Field:
  • Field to refer in populating the select box (should be same as ID column in Form Data)
• Display Field:
  • Field to display in select box (should be same as Label column in Form Data)
• List:
  • List to display for selection
• URL Request Parametes for List:
  • 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
• Styling: Header field.
• Popup Dialog Height:
  • The height for popup form. Default value is 500.
• Popup Dialog Width:
  • The width for popup form. Default value is 900.
• Button Inline Style:
  • Inline CSS style for button.
• Button Label:
  • Button label to click for popup form.
• Is Primary Button?:
  • If checked, CSS primary button style is applied.

Expected Outcome

The select box is able to retrieve existing options, and also allow user to create a new record on runtime using an existing form.

1. Click Select button.
2. Pop out existing form to add new records as new select box option.

You are now able to directly select the new option added from existing form.