Hello All,

When developing enterprise web application, we often encounter a scenario where we need to add a drop-down list component in our web page and this drop-down list should show all the possible values that end-user can select. With the help of Oracle VBCS, we can achieve this. Oracle VBCS provides drop-down list components namely select one and single select. Let's see the usage of single select component 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, first, create one Business Object and inside this business object create one field called 'StatesName'. Once field is created, go to Data section add rows in this table where rows being name of all the states.

Next, in application's page, drag and drop single select component and add values for IDs and Label Hint using properties window.

Then, in variables section, create on array type variable which will have two properties - label and value. This variable will store LOV values from business object. Also, create another variable of string type which will store selected value from drop-down list.

After this, click on Actions section and create one action chain. In this action chain call the Business Object and assign the data (Indian states) present in this business object to array variable which you have created earlier.

Make sure when assigning data to array type variable, you follow these steps. Select assign variables event, right click and select Go to Code. Then add this JSON code.

Once, you have created action chain, click on Event Listeners section and add Event Listener vbEnter. In this event, map your action chain that you have created. This will invoke the selected action chain on load of page and assign the data from business object to array type variable.

Then, we need to map the two variables to single select component. Go to page designer section, select your single select component and in properties window go to Data section. In Data section we need to map the variable which holds the LOV to Data property and variable which holds selected value from LOV to Value property. But select single understands ADP type variable and not array type variable. So, how can we map array type variable to data property then? In this case, we write one JS function which converts our array to ADP. The JS function is defined below. In this JS function, to convert array to ADP, we need to first import the packages related to ArrayDataProvider. Once we have imported the packages, the JS function will convert our array to ADP.

Once you have defined the JS function, call this JS function from Data property and pass your array variable. To call this JS function click on fx (expression editor) which will open a pop-up.

Then map the string variable to Value property which will store current selected value from single select.

At last, once all these changes are in place, run your application and see the result.