SAP C4C裡如何建立兩個具有依賴關係的下拉選單

i042416發表於2020-09-27

My series of Cloud Application Studio Blogs

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,


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


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


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


The same for Java List:


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


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:


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


Create the following instance for this BO: Language list:


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


Java tool list:


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


ABAP tool list:


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


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


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


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:


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


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.


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


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


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


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.


SAP C4C裡如何建立兩個具有依賴關係的下拉選單


要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":

SAP C4C裡如何建立兩個具有依賴關係的下拉選單


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2724416/,如需轉載,請註明出處,否則將追究法律責任。

相關文章