Page Comparison

Intro:

This example demonstrates how to use JavaScript to dynamically adjust the results of a select box based on other values entered on the screen. In this example, we're using a series of dynamic select boxes that adjust based on values that are entered into previous select boxes but the same principals apply to any Profound UI widget.

This particular example uses database-driven properties to load the data into the select box widgets. The JavaScript is used to change the database-driven properties in such a way that selecting an option from one select box will directly affect the options that you have in another select box. In this case, we are using State → County → City data to show how this works.

Info
The RPG program that runs this example is very simple and only provides logic to display the correct record format. The logic for getting the data into the select boxes and for dynamically changing the options for the select boxes is all set up in the DSPF.

Building the Example:

Info
This example assumes that you are familiar with database-driven properties. If you are not familiar with database-driven properties for select boxes, we recommend reading the following section before trying this example: https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495670/Select+Box#Database-Driven-Selection.

To start, we put together a screen that looks like this:

This is a very simple screen that uses a panel, label and select box widgets from the Blueprint widget set. Now that we have our screen set up to look how we’re wanting, we can configure the select boxes to show data.

Setting up the Select Boxes:

The name of the database file that we are retrieving data from is named CITIES.

Configure the first select box to show the available states
1. Give the select box an ID of state (this ID is case-sensitive)
2. Set the choices database file to CITIES
3. Set the choice options field and choice values field to STATE
  1. This is the name of the field in the CITIES table that holds the names of various states
4. (Optional) Set the order by property to STATE
Configure the second select box to show the available counties
1. Give the select box an ID of county (this ID is case-sensitive)
2. Set the choices database file to CITIES
3. Set the choice options field and choice values field to COUNTY
4. Set the choices selection criteria to STATE = ?
  1. This property is equivalent to the WHERE clause in an SQL statement
  2. This property will make it so that only counties associated with a given state will be shown
  3. The parameter ( ? ) will be set using JavaScript
Configure the third select box to show the available cities
1. Give the select box an ID of city (this ID is case-sensitive)
2. Set the choices database file to CITIES
3. Set the choice options field and choice values field to CITY
4. Set the choices selection criteria to COUNTY = ?
  1. This property is equivalent to the WHERE clause in an SQL statement
  2. This property will make it so that only cities associated with a given county will be shown
  3. The parameter ( ? ) will be set using JavaScript

Here’s what the properties of each of these select boxes looks like after configuring the settings mentioned above:

`SELECT STATE FROM CITIES`

`SELECT COUNTY FROM CITIES WHERE STATE = ?`

`SELECT CITY FROM CITIES WHERE COUNTY = ?`

JavaScript:

This portion of the example is where we’ll configure these select boxes to be dynamic and offer different data based on the previous select box choice. In this example, we want the data to change after selecting an option in the previous select box. So, the JavaScript code used for this will be placed in the onchange event.

Key JavaScript API that are used in this example:

Place the following code in the onchange event of the STATE select box:

Code Block

language	js

//Change the 'choices parameter value' property of the 'county' select box
//The value used for this will be the value selected for this 'state' select box
applyProperty("county", "choices parameter value", get(this)); 
//Reapply 'field type' so that the widget is rendered with correct options
applyProperty("county", "field type", "select box");

This code sets/changes the parameter for the choices selection criteria property set for the COUNTY select box
Once this code runs, the statement will look like WHERE STATE = selected_state_name

Place the following code in the onchange event of the COUNTY select box:

Code Block

language	js

//Change the 'choices parameter value' property of the 'city' select box
//The value used for this will be the value selected for this 'county' select box
applyProperty("city", "choices parameter value", get(this));
//Reapply 'field type' so that the widget is rendered again with correct options
applyProperty("city", "field type", "select box");

This code sets/changes the parameter for the choices selection criteria property set for the CITY select box
Once this code runs, the statement will look like WHERE COUNTY = selected_county_name

Result:

After configuring your database-driven select box widgets and coding the JavaScript that will change the data based on previous selections, you should see that selecting an option from the STATE select box sets the data for the COUNTY select box. Selecting an option from the COUNTY select box should then set the data for the CITY select box. See below for how this looks when running the application:

Versions Compared

Old Version 1

New Version Current

Key