UXControl: DropDownListBox

[Former Member]

Overview

DropDownListBox is a control that allows user to select one single value from a list of values. This control can be created using UIDesigner/KeyUserTool. SAP Application teams and Partners use UIDesigner to create the control. The keyuser/Admin use KeyUserTool to create a dropdownlistbox.



Steps to configure DropDownListBox in UI Designer

Scope: Application Teams/Partners

1. Drag and drop the control DropDownListBox from the ToolBox section onto the Designer tab in the selected UI Component


2. Value property of the control is prepopulated with a DataField (/Root/DropDownListBox)


3. This data field should be bound to a node element of a BO which is of type code


4. The datafield can be bound to the BO element using the button Bind. Once bound, datafield is automatically renamed. This datafield is called as codefield. Codefield holds one single value selected by the user from a list of values called CodeList. Codelist is a set of values with code and description.

Pictorial representation of DrodDownListBox, CodeField and CodeList

DropDownListBox properties and values

Property	Definition
CodePresentationMode	This property determines the value to be displayed on the UI. By default the value is set to ValueOnly. Other values are CodeOnly & CodeAndValue
ValueHelpSortOrder	This property sorts the values of the codelist to be displayed on the UI. By default the value is set to Standard. Other values are Unsorted, AscendingCode & AscendingDescription Behavior of sorting when value of ValueHelpSortOrder is 1. Standard - If sortOrder is Standard, sorts the codelist based on the CodePresentationMode value Codeonly - sort based on code Valueonly - sort based on description; if description is not maintained, sort based on code Codeandvalue - sort based on code 2. AscendingCode - sorts the codelist based on code in ascending order 3. AscendingDescription - sorts the codelist based on description in ascending order 4. Unsorted - the order maintain in the codelist is retained

CodeField properties and values

Property	Definition
CCTSType	This property is set to code indicating that the field is a CodeField.
CodeList	This property indicates the list of values maintained for CodeField. CodeList has a type=<CodeListType>, typeName  & esrNamespace

CodeList types, properties and values

CodeListType	Definition
Static	The list of values is populated by the codelist provider (Application/Partner). These values are fetched during the initialization phase of the UI component. Case1 - If the list contains less than 50 values, on clicking the dropdown, the values are displayed on the UI without any additional request. This is called the Static CodeList – Complete scenario Case2: If the list contains 50 or more values, on clicking the dropdown, framework triggers a request to fetch the values. This can be observed by capturing the network in Chrome Developer Tools. This is called the Static CodeList – Incomplete scenario
Dynamic	The list of values is populated by the codelist provider (Application/Partner). These values are fetched only when user clicks on the DropDownListBox and not during initialization of the UI component. Case - Dynamic with context mapping The list of values of DropDownListBox is dependent on the value selected from another DropDownListBox. For instance consider Country and State DropDownListBox, here, the list of values for State is dependent on the value selected as Country. For configuration details check section Steps to configure Dynamic with context mapping
ListBound	The list of values is populated from a datalist. The code and description values are mapped to elements of the datalist. ListBoundCodeListProperties - The list of values is populated as a datalist. The code and description values are mapped to elements of the datalist. Property Definition ListBinding Map datalist present in the datamodel. This datalist can be boundlist or an unbound list.In case of bound datalist, the datalist is bound to a BO Node element and values of the datalist are populated in the backend. In case of unbound datalist, the values are populated in the client (Ex: script operation ) ListCodeField Map the datalist element containing the code values (This is a relative path starting with ./) ListValueField Map the datalist element containing the description (This is a relative path starting with ./)

 

Steps to configure Dynamic with context mapping

Dynamic with context mapping - The list of values of DropDownListBox is dependent on the value selected from another DropDownListBox. For instance, consider Country and State DropDownListBox, the list of values for State is dependent on the value selected as Country.

1. Right click on the CodeField bound to State and select Codelist context mapping


2. Select the Country field from the pop upNote: Country field should be marked as context relevant in MRDS

Steps to configure DropDownListBox via KeyUserTool

1. Edit Master Layout using Adapt


2. Hover over any existing field and select Add Fields


3. In the Additional Fields pop up, click on New Field, enter any name in Label field and select Type as List


4. Maintain codelist values (code and description)


5. Save changes and apply the same. This creates an extension field of type code which is of CodeListType static.

Known Issues and Limitations

1. CodeField is present under a Structure

If the control is bound to a datafield under a structure, then the cctstype of the structure should be set to none and not code.

Ex: /Root/DataStructure/CurrencyCode

• CctsType of CurrencyCode should be set to code


• Cctstype of Structure should be set to none unless it of type amount, quantity etc,.There will be inconsistencies in the UI with respect to data if the cctsType of the Structure is not set to "none"

2. DropDownListBox loads code values when CodePresentationMode is set to ValueOnly

If the CodePresentationMode of the DropDownListBox is set to ValueOnly and the description is not maintained in CodeList in the BO element then corresponding code values will be displayed in the dropdown.

How to identify if description is maintained in the BO element?

• Login to the backend of the system


• Launch the metadata repository using the transaction code mdrs


• Navigate to the BO node element in the BO


• Double click on DataType and navigate to RuntimeCodeList tab

3. CodeField in Advanced Find Form (ObjectWorkList - OWL) does not load any values

This issue occurs when the BOQueryParameter is missing in the component. Download the XML of the UI component from UI designer and check if BoQueryParameter exists for the CodeField.

For instance: - Consider a DropDownListBox with name Role in Advanced Find Form of Accounts OWL. This control is bound to CodeField /Root/SearchParameters/RoleCode.

<uxc:BoQueryParameter id="7yA4Y$33Ja6OnOsSjTz_im" name="RoleCode-~content1" bind="/Root/SearchParameters/RoleCode" joinPath="-.CustomerRole-~RoleCode-~content" joinOCMPath="-.Role-~RoleCode"/>

4. How to identify control specific details on the UI without the help of UI designer?

Append debugMode=true in the URL as shown below and reload the UI 

CTRL + click on the DropDownListBox control to launch Client Inspector. You can check the properties of the control under Control Tree tab

 

 

Best Regards,

Malini Krishnamurthy