Populate a List of Values Based on Another LOV

Within a dynamic form, you can use one drop-down menu to determine what appears in a second menu.

For example, suppose you want to present a list of states as a List of Values (LOV). When the user selects a state, a second LOV is populated with the cities in that state.

Here’s what this might actually look like in your application: the first field, Select State, displays a list of states for users to select from:

Description of the illustration selectstate.png

Once the user chooses a state—say, Alaska—the next field displays a list of Alaskan cities for the user to choose from:

Description of the illustration selectcity.png

For this to work, there must be a relationship between the data sources associated with each drop-down list. In this example, the data sources are two business objects (but they could come from another source as well, such as a service connection): state and city. Here’s an excerpt of data from the state business object:

Description of the illustration statebodata1.png

And here’s some data from the city business object:

Description of the illustration citybo1.png

Let’s take a closer look at the city business object—specifically, the state field. The person who created this business object set up this field as a reference type. A reference type field refers to a key field (in this case, the id field) in the state business object, to link the two business objects together.

Notice that the id field in the state business object assigns a unique number to each state, and that this number also appears in the city business object’s state field. For example, Alaska has a value of 1 in the state business object, while cities IN Alaska have the value “Alaska (1)” in the city business object’s state field. When VB Studio sees a city with Alaska(1) in the state field, it knows to grab the state with a value of 1 in the state business object. It’s important to understand this relationship a bit so you’ll understand what’s going on as we move through this procedure.

To populate a list of values in a drop-down menu when an item in another LOV is selected:

1. In the Page Designer, add a drop-down list component for each business object by dragging two Single Select (<oj-select-single>) components from the Components palette onto the canvas:

   

   Description of the illustration singleselect.png

2. Now we need to tie these components to the data provided by the two business objects. Let’s start with the first Single Select component:

   1. Select the top component on the canvas, then click Quick Start in the Properties pane. Click Add Options:

      

      Description of the illustration trigger-action-canvas.png

   2. On the Locate Data page, select the State business object, to indicate that we want this list of values populated with state names:

      

      Description of the illustration statebo.png

   3. Click Next.
   4. In the Bind Data page, drag the stateName field from the Endpoint Structure pane into the Label field.

   5. Drag the id field into the Value field.

      

      Description of the illustration trigger-action-binddata1.png

      Remember that the id field is the one that will tie this business object to the city business object.

   6. Click Next.
   7. Click Finish on the Define Query page to close the Quick Start.

3. Repeat these steps for the second Single Select component, this time choosing the city business object.

   What actually retrieves the data from the business object? In this case, a Service Data Provider (SDP), which the Quick Start created for you. You can check this for yourself by checking the Data tab in the Properties pane:

   

   Description of the illustration trigger-action-datatab1.png

   Getting data from a data source can be tricky, so the Quick Starts automate this process by creating a special type of variable known as a Service Data Provider (SDP). Simply put, the SDP does whatever is required to fetch the correct data from the correct source.

4. To create the action chain that filters the list of cities, we’ll need a page variable that’s assigned the selected state’s ID after each selection. We’ll use this variable to create a filter criterion for the city SDP (cityListSDP).
   1. Select the state Single Select component, and on the Properties pane’s Data tab, hover over Value and click to open the Variables picker.
   2. Click the Page node’s Create link to create a new page variable.

   3. For ID, enter stateID, and for Type, select Number.

      Now, each time a state is selected, its ID is saved to this variable.

5. Next, we need to create an event for the state Single Select component to start an action chain when the component’s value changes. The action chain will filter out cities from the city component that aren’t in the selected state.
   1. On the canvas, select the state Single Select component.

   2. In the Properties pane, click Events, then click New Event. Select On ‘value-item’ when prompted:

      

      Description of the illustration trigger-action-eventtab.png

      When you create the event, VB Studio automatically creates a new action chain and event listener for you. The event listener will listen for an event, which in turn will trigger a sequence of actions defined in the action chain.

6. Let’s create the action chain to filter the list of cities shown in the second drop-down based on the state selected in the first drop-down.
   1. In the Action Chain editor, add an Assign Variables action to the canvas.

   2. In the Properties pane, type city in the Variable field, then select cityListSDP.filterCriterion:
      

      Description of the illustration assign-var-filter-criterion1.png

   3. For the Value property, click its Click to add condition link to create a criterion to filter out the cities that aren’t in the selected state.
   4. In the condition builder:
      1. Select state for the first Attribute drop-down list.
      2. Select equals ($eq) for the Operator drop-down list.
      3. Type stateID in the second Attribute field, then select $page.variables.stateID. Recall, whenever a state is selected, this variable gets assigned its ID.

      

      Description of the illustration trigger-action-conditionbuilder.png

      This condition essentially says, “For each row in cityListSDP, if the state ID equals the ID stored in the stateID page variable, add the row to the displayed list of cities.” Remember the city business object from earlier?

      

      Description of the illustration citybo1.png

   5. Click Done in the condition builder.

      

      Description of the illustration trigger-action-assignvariables1.png

Let’s preview the page by selecting the Page Designer’s Live view. Select a state, then notice how the city drop-down list shows only the cities in that state:

Description of the illustration trigger-action-city1.png

If you open the list of cities without first selecting a state, the action chain won’t be triggered, so the list won’t be filtered. In other words, you’ll see all the cities for all the states.