Dynamically load data into a LOV in Oracle Visual Builder

This article demonstrates how to dynamically load data into a LOV in Oracle Visual Builder.

For example, we configure different LOVs and render them conditionally based on the selected value of another LOV. But here in this article, we will show how to use a single LOV to display the data for multiple Rest outputs with different key-value pairs dynamically instead of creating n number of components.

Let’s see how to dynamically load data into a single LOV even when the returned JSON from the Rest service is with a different key-value pair.

Following are the steps to complete this use case:

As a first step, create a Business Object named Employees with the Employee Name field.
Go to the Data tab and click on + Row to add some rows to the Business Object.
Create a Business Object named Departments with the Department Name field.
Go to the Data tab and click on + Row to add some rows to the Business Object.

For more detail on the creation of Business Objects please refer to our antecedent blog which includes the steps to create Business Objects.

5. Before we start our design, navigate to Variables in the navigation tab of the main-start page, click on +Variables, and create the following variables as shown in the below screenshot.

Variable Name DataType

selectedCategory String
lovKey String
lovArray Array of Objects
lovADP ADP (Bind data to variable : lovArray, KeyAttribute: id )

6. Switch to PageDesigner, drag and drop a Combobox(one) from the component pallet to the Design area of the page as shown in the following screenshot:

7. In Properties of Combobox, switch to the General tab, provide the label Hint as Category, switch to the Data tab, and select the selectedCategory variable in Value as shown in the following screenshots:

8. In Properties of Combobox, switch to the Quick Start tab, and click on Create Static List of Options to provide the option to the drop-down as shown in the following screenshot:

9. In the popup Add the Label and Value to the options and click on the Finish button at the top right corner as shown in the following screenshot:

10. Drag and drop Select (single) from the component pallet to the Design area, switch to the General tab, and set Label Hint as LOV as shown in the following screenshot:

11. Switch to the Data tab, and select the lovADP in Data and lovKey in ItemText sections as shown in the following screenshot:

12. Click on Category LOV and in the property pane, Switch to the Events tab, click on +New Event, and select On value as shown in the following screenshot:

13. Drag and drop the Reset Variables action and select the lovArray, lovADP, and lovKey before we load the data to the variables.

14. Now drag the If action after the Reset Variable action and in condition check if the value === “Employee” as shown in the following screenshot:

15. In the Success case drag the Call Rest action and click on Select as shown in the following screenshot:

16. Select the GET /Employees BO endpoint from the Employees BO and click on the Select button.17. Drag and drop the Assign Variable action and map the items from the Rest service to lovArray, and lovKey as ‘employeeName‘ as shown in the following screenshot:

18. Implement the above steps for Departments as we did for Employees in the else block as shown in the following screenshot:

Now if we preview the application and check the output when we change the value in Category LOV based on the selected Category we should be able to see the Data in LOV as shown in the following screenshot: