Hello All, In my first blog, I showed you all how we can use single select in Oracle VBCS to populate list of values. Today, I will show you how to create dependent LOV using single select in Oracle VBCS. We will be leveraging Business Object which is in-built DB feature of Oracle VBCS for our demo.

In your VBCS application, create one business object and inside this business object create a field called 'statesName'. Create another business object and inside this business object create two fields - 'statesName' and 'citiesName'. Once both of these B.Os are created, go to Data section and add rows. In the first B.O, the row will be list of names of Indian states and in second B.O, the row will be list of names of Indian states and its cities.

Next, in your application's page, drag and drop two single select components and add values for IDs and label hint using properties window.

Then, in Variables section, create two array type variables. One array type variable will store states LOV, and another type will store corresponding cities name LOV for each state's name. Also, create two string type variable which will store selected value from drop-down LOV.

After this, click on Actions and create one action chain to populate list of state's name by invoking Business Object. Assign the data (Indian states name) from B.O to array type variable just like I did in my previous blog. Once this action chain is created, call this action chain from vbEnter event listener (navigate to Event Listener and add event listener vbEnter).

Now, we need to map the variables to components. In my previous blog, I showed you how to convert an array to ADP. We will follow the same approach here as well for both of our components. First, we convert array type variable to ADP using JS function and map it to Data property of Indian States single select component. We will also map string type variable that we created earlier to Value property. Follow the same approach for Cities single select component.

We have mapped variables to both components, we have populated LOVs for Indian states component but we have not populated the LOV for cities component. But our cities component is a dependent LOV meaning it will populate city name for each state name. So, how we populate LOV for our cities component. We will create one event and map it to our Indian states component. Go to your Indian states single select component and click on Events section. Then, click on 'New Event' and select 'New Custom Event'. Next, in the pop-up, expand Property Changes and select 'value' event. After this, click on 'New Action Chain' which will navigate you to action chain Design page.

Inside this action chain, first we will assign the incoming value to string type value that we have mapped to Indian States single select component above. Then, we will invoke our business object which stores cities name against each state. When we invoke our business object we need to pass query parameter as described below. Based on this mapped query parameter, the B.O will return list of cities name in its response.

 "fields": "citiesName,statesName",
          "onlyData": true,
          "q": "{{ \"statesName='\"+$page.variables.varSelectedIndianStates+\"'\" }}"

At last, we will map the response from our business object to our cities array type variable. The mapping of B.O response to array type variable will be same as we did for Indian states array type variable.

Now, we have all the data that we need, we will run our application and test whether our dependent LOV is working or not.

From above results, we see that our dependent LOV is working. Let me know if its working for you too. Happy Learning.