Forms with Dependent Lists in Oracle Visual Builder Cloud Service

Dependent Lists are a quintessential component of modern day forms where sometimes it is required to show select list in which drop down values depend on the value selected by the user in a previous select list. A common example of that would be the list of cities according to the state value chosen by the user. In this blog we recreate this scenario and demonstrate how Visual Builder Cloud service enables dependent lists in a user survey form.

Dependent Lists- Cities depend on value of State

Data Model

This blog will showcase a data model that allows the readers to understand the different objects and data values in one of the many possible ways of structuring the data model to create this form. There can be several other ways of modeling the data but base concepts will remain the same.

The application leverages three custom business objects- States, Cities and SurveyInfo. Cities references States through a reference field as shown in the diagram.

State Reference in Cities Custom Business Object

Similarly, SurveyInfo references both States and Cities. This allows the user to see the list of all states and cities and refine the values of cities depending on the state value chosen.

The detailed structure of these business objects can be seen in the diagram below.

Relationship Diagram between States, Cities and SurveyInfo Business Objects

The States and Cities have been populated with some sample data corresponding to US states and cities, similar to what is shown in the diagram

Sample Data in States Business Object

Sample Data in Cities Business Object

Create Page and Custom Code

On the main landing page choose to create a new page of the type “Create”. This page is where we will design the survey form.

Configure a Create Page

Associate SurveyInfo object with this page when prompted.

Associate SurveyInfo Business Object

Drag and drop a panel from the components palette on the left to the canvas in order to create a structure for the form.(This is optional)

Drag and Drop a Panel to the canvas

Click on the “Data” icon and Drag and drop all required fields for the business object except for the cities into the panel.

The Data tab on the palette allows users to drag and drop fields from associated Business Object

Align the labels as shown in the diagram below. Drag and drop a custom code in the panel just below the State drop down menu. The View and Model code for the City drop down menu is a JET combo box component with few modifications to incorporate VBCS data access to Custom Business Objects http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=combobox&demo=foreach

Drag and Drop a Custom Code below the State Input Field

Copy the Model and the Template or the view code below to the custom code Model and Template sections respectively.

The custom code has three key code snippets-

1. Listening for the changes in the parent drop down

In order to listen for the changes in the “State” value chosen the code leverages a subscribe method. Whenever the value of State chosen from the drop down changes, the subscribe method is called.

this._listener = this.pageViewModel.Observables.SurveyInfoEntityDetailArchetype. record.ref2State.subscribe(function(value) {..}

2. Using VBCS Operation APIs to fetch data from Custom Business Objects

The READ method reads all the data according to any given condition.According to the State value chosen, the corresponding cities can be read using the operation API.

More information about the API can be seen here: http://docs.oracle.com/en/cloud/paas/app-builder-cloud/abcsb/module-api_js_Operations.html

var condition = Conditions.SIMPLE(ref2State, Operator.EQUALS, value);
var operation = Abcs.Operations().read({
entity: cities, 
condition: condition
 });

Subsequently, the observableArray with the cities are used to bind to the combo box.

3. Setting the value for City Reference

The valueChangeHandler is a method that is called on option change and is where the value of the field is set in the Archetype Record. In drag and drop input fields these values are automatically set but since we are using custom code for the combobox we will have to set it manually.

self.valueChangeHandler = function (context, valueParam) { 
if (valueParam.option == “value”) { 
var $SurveyInfoEntityDetailArchetypeRecord = self.pageViewModel.Archetypes.SurveyInfoEntityDetailArchetype. getRecord(); $SurveyInfoEntityDetailArchetypeRecord.setValue(‘ref2City’, valueParam.value[0]); 
}//End If 
};//End Handler

This completes the design of the create page. Verify the dependent lists scenarios by navigating to the “Live” mode and populating the values in the input fields

“Live” mode Survey page

Click on Save and Close. This will save the data in the SurveyInfo Custom Business Object. Navigate to Business Objects in the Menu to view the data.

Data in SurveyInfo Business Object

With this we culminate the sample scenario of a form with Dependent Lists. The code can be modified to suit various scenarios and multiple drop downs.

To know more about Oracle Visual Builder Cloud Service visit the link https://cloud.oracle.com/ApplicationBuilder

The views expressed in this post are my own and do not necessarily reflect the views of Oracle.