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.

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.

Figure 1: Click on Select button

Figure 2: Pop out existing form to add new records as new select box option

Figure 3: Able to directly select new option added from existing form

Steps

1. You can 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. You can 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 on 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.

Figure 4: Create Form to fill select box options

2. On the right up corner, click on Generate App, and Generate CRUD.

Figure 5: Generate CRUD for form

3. Now create another form. This time we create a main 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.

Figure 6: Create main form and add Dynamic Options Select Box

4. On the right up corner, click on Generate App, and Generate CRUD for this main form.

Figure 7: Generate CRUD for main form

Steps to run the plugin

1. Publish and run the UI. Go to Manage Main Form and click on New.

Figure 8: Manage Main Form

2. You can see there are no existing options in the select box. Add one by clicking on Select. Fill in the option name.

Figure 9: Popup form to add options

3. Now you can see the option is automatically added and chosen.

Figure 10: Options added from popup form

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.

Figure 11: Manage Add User Form

Dynamic Options Select Box Properties

Configure Dynamic Options Select Box

Figure 12: Dynamic Options Select Box Configuration