How to Dynamically Change the Options of a Select Box or Radio Button - YouTube

Hey there! Welcome to Joget Tutorial series.

In this video, we're going to learn how to set up a dynamic cascading dropdown list.

This enables one to change the options or selections of a select box, radio button, or radio-based element on another form's field value.

Okay, let's begin!

First, log in using the administrator account.

The default admin user's username and password are both "admin".

Once you've logged in, click on Design New App.

Let's create a new app called "Dynamic Cascade Selectbox".

As a best practice, ensure the App ID is in camel case.

Once you've clicked on the Save button: you will be directed to the Design App page.

Before we begin, let's maximize the overlay by clicking on the green button on the top right corner.

Alright, in order to begin...

we will need to have 2 CRUDs.

The first CRUD is the Floor Form.

The form contains a single text field that defines the name of each floor level.

To learn how to build a CRUD, take a look at "How to create a CRUD via the App Generator" video.

The second CRUD determines how many rooms there are on certain floors.

It contains a text field for the name of the room and a selectbox that determines which floor it resides

The selectbox options are dynamic and are based on the first CRUD we created.

We'll need to use the Default Form Options Binder for that.

Take a look at "How to use Default Form Options Binder" video.

Pause the video here and try building the 2 CRUDS.

Once you're done, resume the video.

Alright, by now you have your 2 CRUDs up and running.

Ensure to add some data into the CRUD.

As you can see in my runtime, under "Manage Floors", I have 3 Floors

And in "Manage Rooms", I have added a few rooms on each floor.

Now we're all set to build the main form that contains the dynamic cascading dropdown list

Close the runtime tab and head back to the Design App

Click on Create New Form button.

We'll call this the "Booking Request Form".

Fill up the necessary details and click on Save.

Let's call this Section "Booking Request Details"

Click the OK button.

For the "Floor" selection, we'll use a radio button.

And for the "Room" selection, we'll use a selectbox.

Edit the Radio Button's properties

And we'll call this "Floor". Copy the ID as we'll use this later.

For Options Binder, select the "Default Form Options Binder".

Go to the Next page, and select "Floors" for the Form field.

In the Label Column Field, select "floor_name".

Click the OK button.

Edit the Select Box properties and set it as "Room".

For Options Binder, select the "Default Form Options Binder".

Go to the Next page and select "Rooms" for the Form field.

In the Label Column Field, select "room_name".

Now, this is important.

Set the Grouping Column to "floor"

Click on Next to open the Advanced Options.

Under the Dependency section, paste the ID of the radio button here.

This is important as this identifies that the "floor" ID that belongs to the radio button,

controls what options to be displayed for this "room" Select Box as we've grouped them by "floor" as shown in the previous configuration here.

Click the OK button.

Click on Preview to see how it'll look like in runtime.

Looks good. Alright, close the Preview tab and click on Save.

Let's generate a CRUD, go to runtime and try adding a new record.

Upon saving, the columns are showing the ID instead of the label.

We'll have to fix that.

Take a look at "How to use Default Form Options Binder" video on how to display the label instead of the Id for the columns.

Good Job. We are done with this tutorial. Thanks for watching!