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
- Drag and drop the control DropDownListBox from the ToolBox section onto the Designer tab in the selected UI Component
- Value property of the control is prepopulated with a DataField (/Root/DropDownListBox)
- This data field should be bound to a node element of a BO which is of type code
- 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
This property determines the value to be displayed on the UI. By default the value is set to ValueOnly. Other values are CodeOnly & CodeAndValue
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
CodeField properties and values
|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
|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
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.
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.
- Right click on the CodeField bound to State and select Codelist context mapping
- Select the Country field from the pop upNote: Country field should be marked as context relevant in MRDS
Steps to configure DropDownListBox via KeyUserTool
- Edit Master Layout using Adapt
- Hover over any existing field and select Add Fields
- In the Additional Fields pop up, click on New Field, enter any name in Label field and select Type as List
- Maintain codelist values (code and description)
- 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.
- 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