Inserting a Simple Value Selector

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

At design time, a simple data type Simple Type is assigned to a value attribute that is contained in the Java Dictionary. 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 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 an easy way to display metadata of a value attribute (type information of a Simple Type, such as constants or label text) on the user interface.

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 when 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

·        Define 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

·        Use 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
UI Element Type	UI Element Name	Embedded in ... (Container Name)	UI Element Property	Value
Transparent Container	RootUIElement-Container		Properties of Transparent Container - layout	GridLayout
Group	ValuehelpGroup	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	ValuehelpGroup	Properties of Caption - text	Valuehelp in Web Dynpro
TextView	SVSHeader	ValuehelpGroup	Properties of TextView – design	header3
			Properties of TextView – text	Simple Value Selector
			LayoutData - colSpan	2
Label	SVSLabel	ValuehelpGroup	Properties of Label – labelFor	SimpleValue Selector in selection list
			Select the value SimpleValueSelector for the labelFor property after inserting the succeeding UI element SimpleValueSelector.
DropDownByKey	SimpleValue Selector (one String)	ValuehelpGroup	Properties of DropwDownByKey – selectedKey	is bound at a later time

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 subnode under Dictionaries ® Local Dictionary ® Data Types ® Simple Types.

       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 of the Description column are used as the display texts in the simple value selector. The keys, however, are used in the source text.

¡       

       4.      Select the Representation tab and enter the text Colors in the Field Label field.

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

Declaring a Value Attribute of the Type Color

...

       1.      Select the Context tab in the user interface of the Main view.

       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 using the  button at the edge of the right column of the dialog box.

       4.     

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 of the Main view.
2. Choose the node  SimpleValueSelector[DropDownByKey] in the outline window.
3. Bind the selectedKey property to the Color value attribute in the Properties tab.

Result

You can now use the simple value help within this example application at runtime:

...

       1.      Regenerate the application files using Rebuild project.

       2.      Choose Deploy new archive and Run in the context menu of this Web Dynpro application.

 

 Use the extended value selector for a large number of constants.