Step by step to create two drop down list with dependency

[JerryWang]

My series of Cloud Application Studio Blogs

• How to detect EditMode in an Embedded Component


• Step by step to enable your custom BO with attachment upload functionality


• Step by step to create an Adobe Print form in Cloud application Studio


• How to render PDF which displays picture from the image attachment of your custom BO


• How to get current logged on business user’s employee information and assigned organization unit via...


• How to implement dynamic access control based on custom BO using OWL


• How to make Code List Restriction work when control field and restricted field are not on the same B...


• How to implement custom number range using custom business object


• Two approaches to create Code List in Cloud Studio


• Create Dynamic Code List via Custom Business Object Association


• Step by step to develop Thing Type based navigation and BO Object based navigation


• Put Extension field into embedded component and make it visible in Standard UI


• One possible cause that embedded component fails to display in UI


• Step by step to create HTML Mashup and make it visible in UI


• Step by step to enable Text Collection for your custom BO


• Automatically send an Email notification to line manager via Workflow in Account application


• Step by step to create Object Value Selector in Cloud Application Studio


• Two approaches to fill an UI field with dedicated logic implemented in Cloud Application Studio


• How to execute BO action on multiple selected BO instances in AdvancedListPane


• How to add custom validation logic on mobile phone field in Contact TI


• An example about how I analyze why some OBN button does not work


• Step by step to create OBN button which navigates from standard UI to custom UI


• Service Request ticket split – how to bring the selected service request item to new custom UI


• Step by step to create two drop down list with dependency


• Expose Custom BO logic implemented by ABSL via Custom OData service

I am asked by colleague about how to develop two drop down list with dependency via Cloud application studio. Typical use case could be for example the first one gives user a list of countries in the world, and once a certain country code is selected, only the very states belonging to that country is listed in the second drop down list.

Here below is a kind of approach how to achieve it.

Suppose the first list is a set of programming language,

when I select ABAP, only ABAP tools are listed in the second list.

The same for Java List:

Before you start the development, make sure you have gone through the blog Create Dynamic Code List via Custom Business Object Association as this blog is written based on some enhancement on it.

1. The complete source code of JerryCodeList BO:

Create the following instance for this BO:

Language list:

Java tool list:

ABAP tool list:

2. In the MainBO on which the two dependent code lists are built, inserted the following highlighted source code:

Implement the association ToLanguageList in AfterModify determination:

if( !this.ToLanguageList.IsSet() ){

	var codeListQuery = JerryCodeList.QueryByElements;

	var para = codeListQuery.CreateSelectionParams();

	para.Add( codeListQuery.CodeListBOID, "I", "EQ", "LANGUAGE");

	var result = codeListQuery.Execute(para);

	this.ToLanguageList	= result.GetFirst();

}

For the other association ToLanguageToolList, we should NOT implement it in AfterModify since it is dependent on the selection of first drop down list.

3. Bind two drop down list accordingly:

The essential part here is: as long as there is selection change on the first drop down list, the notification must be sent to second drop down list to perform restriction on its entries. Here a new event handler is introduced for notification.

Create a new query bound to CodeList.QueryByElements with a query parameter which points to Code List entry's parent code:

then in the event handler, in the first operation I assign the selected language code chosen from first drop down list to the query parameter, then fire the query in the second operation, as a result the possible entries for the second drop down list are restricted by language code accordingly.