Show TOC

Inserting a Simple Value SelectorLocate this document in the navigation structure

The following graphic illustrates the functions of the simple value selector:

At design time, a simple data type Simple Type in the Java Dictionary is assigned to a value attribute. If the selectedKey property of a DropDownByKey UI element is bound to this value attribute, the dropdown list box - that is, the simple value selector - is automatically filled with entries in the view layout at runtime. These entries are stored in the data type of the value attribute. The value set is a list of key/value pairs. Language-independent key values are always used in the source text, whereas the language-dependent display texts are displayed in the dropdown list box.

Note

Note that there is no data binding in the view context for the values to be displayed. Only the selected value is bound; all other information is provided by the data type of the value attribute.

This is a simple way to display the metadata for a value attribute (type information of a Simple Type, such as constants or label text) on the user interface.

Note

In this example, the data type of the value attribute is statically defined at runtime. As described in the following procedure, you can also dynamically modify the data type of a value attribute at runtime while using the simple value selector. The constants to be displayed are contained in the data type metadata of the value attribute.

Procedure

You insert the simple value selector into the Main view as follows:

  • Design the view layout
  • Defining a simple data type Simple Type Color in the Java Dictionary
  • Declare a value attribute Color of the type Color in the context of the view controller
  • Data binding between the DropDownByKey UI element and the value attribute Color

Designing the View Layout

Use the following UI element structure in the Main view:

Layout of the Main View

Property

Value

Container RootUIElementContainer of type TransparentContainer

Properties of Transparent Container - layout

GridLayout

Group ValuehelpGroup of type Group in UI element RootUIElementContainer

Properties of Group - design

sapcolor

Properties of Group - layout

GridLayout

Properties of Group - width

75%

Layout - colCount

2

LayoutData - hAlign

center

Caption  ValuehelpGroup_header of type Caption in UI element ValuehelpGroup

Properties of Caption - text

Valuehelp in Web Dynpro

Text  SVSHeader of type TextView in UI element ValuehelpGroup

Properties of TextView - design

header3

Properties of TextView - text

Simple Value Selector

LayoutData - colSpan

2

Field label  SVSLabel of type Label in UI element ValuehelpGroup

Properties of Label - labelFor

SimpleValueSelector (in selection list)

Note

Select the valueSimpleValueSelector for the labelFor property after inserting the subsequent UI element SimpleValueSelector.

Simple value selector SimpleValueSelector of type DropDownByKey in UI element ValuehelpGroup
Note

Note that the text property of the Label UI element SVSLabel does not have to be defined. At runtime, the label text is specified using the data type information of the context attribute to which the DropDownByKey UI element of the label is bound. Therefore, you must only specify this DropDownByKey UI element for this Label UI element SVSLabel at design time using the labelFor property.

Defining the Simple Type Color in the Java Dictionary

  1. Open the dialog box for defining a new data type of the type Simple Type in the Java Dictionary by selecting Create Simple Type in the context menu for the sub node under Start of the navigation path Dictionaries Next navigation step Local Dictionary Next navigation step Data Types Next navigation step Simple Types End of the navigation path.

  2. Enter the following data in the New Simple Type dialog box:
    • Simple Type name: Color
    • Simple Type package: com.sap.tc.webdynpro.tutorials.valuehelp.simpletypes
  3. Select the Enumeration tab of the color user interface and add the following key value pairs by selecting New for each entry:  RE - Red, GR - Green, BL - Blue, CY - Cyan, MA - Magenta, YE - Yellow. The values in the Description column are used as the display texts in the simple input help. The keys, however, are used in the source text.

  4. Switch to the Representation tab and enter the text Colors in the Field Label field.
    Note

    At runtime, binding mechanisms enable you to use the value of the Field Label property (metadata information of data type Simple Type) as a label text for a UI element that can be filled with entries - for example, UI element DropDownByKey, UI element TextEdit or UI element InputField.

Declaring a Value Attribute of Type Color

  1. Switch the user interface for the Main view and select the Context tab.
  2. Add a value attribute and call it Color.
  3. Assign the data type Simple Type Color as a value to the type property of the corresponding Properties tab. Open the dialog box for selecting a simple data type in the Java Directory by clicking the button at the edge of the right column of the dialog box.

Binding a DropDownByKey UI Element to the View Context

Finally, you bind the selectedKey property of the DropDownByKey UI element to the previously defined Color value attribute of the type Color.

  1. Select the Layout tab in the user interface for the Main view.
  2. Choose the node SimpleValueSelector[DropDownByKey] in the outline window.
  3. In the Properties tab, bind property selectedKey to value attribute Color.

Result

You can now use the simple value selector in this example application at runtime:

  1. Regenerate the application files by choosing Rebuild project.
  2. Choose Deploy new archive and Run in the context menu of this Web Dynpro application.

    For a larger number of constants, you need to use the extended value selector.