This article shows how to create a Dependent/Cascading List Of Values (LOV) in VBCS. When you have a drop-down whose values depend on another drop-down then, in this case, you can create a cascading List Of Values (LOV).

For example, select the Oracle Office country from first LOV and populate city into second LOV based on the Country selected. The second LOV values are dependent on the first LOV. This is called the Dependent/Cascading List Of Values (LOV).

Some Important Articles

Basics of Oracle Visual Builder Cloud Services

Create a simple web application: Visual Builder Cloud Service(VBCS)

Download the project from here

Let’s go and see how to create a Dependent/Cascading List Of Values (LOV).

First, create two business object to hold country and city values

Create a web application

First, create a VBCS application “LOVApplication” and a web application with the name “oracleofficewebapp“.

VBCS application
LOV

Business Objects

Create two Business Object as below:

Business ObjectColumnsType
Country1) namestring
City1) name
2) ref2country
string
reference(Country)

Country Object

VBCS application
LOV

City Object

VBCS application
LOV

Create List Of Values

Open the web-application ” oracleofficewebapp” and drop below control

Control NameLabel
HeadingOracle Offices
Single SelectCountry
Single SelectCity

Select Country LOV and select Quick Start from the right property pallet. Click on Add Options

Select Country Business Object from Add Options wizard and click on the Next button

VBCS application
LOV

On the next screen, drop the name from the left panel on Label and id on Value and select Next and finish the wizard

VBCS application
LOV

Now Select City LOV and select Quick Start from the right property pallet. Click on Add Options. From the opened wizard select City Business Object and select the Next button. On the next screen, drop the name from left pane and id on Value and select Next and finish the wizard

Now, select Country LOV, click the Events tab, select + New Event and click Quick Start: ‘value’ event

VBCS application
LOV

Drop, Assign Variables activity from Actions on the event chain. Click on the Assign from right

VBCS application
LOV

In the target panel, expand Page -> cityListSDP and select filterCriterion and then click on Click to add condition

VBCS application
LOV

In the IF select ref2country (this is City Business Object column name), select equals as an operator and select $chain.variables.value as a value

VBCS application
LOV

Click on the cityListSDP and see the generated code. Click on the Save button to close the wizard

{
 "filterCriterion": {
  "op": "$eq",
  "attribute": "ref2country",
  "value": "{{ $chain.variables.value }}"
 }
}

This is the only configuration which is required to create Dependent/Cascading LOVs

Test the LOVs

Click on the Run icon from the top to run the application. Select India as Country and see the matching City should be populated

VBCS application
LOV

Now select the United State as a country and then corresponding City should be populated

VBCS application
LOV