Including an Extended Value Selector 

The extended value selector provides a generic user interface for the application development. It can be used as a value selector for a large number of constants. Inserting an extended value selector is similar to inserting a simple value selector. The difference is that instead of a DropDownByKey UI element, an InputField UI element is bound to a value attribute whose data type is of the type Simple Type. You can define the data type Simple Type in the Java Dictionary at design time or you can create it using the ISimpleTypeModifiable interface for modifying the data type of a value attribute at runtime. This interface provides the required metadata only at runtime. The main binding mechanisms are retained in this process.

This example shows how to dynamically fill an individual value attribute with dynamic metadata at runtime instead of assigning a data type Simple Type to the value attribute at design time.

The modification of the data type only affects the instance of the corresponding value attribute even if the same type is used multiple times somewhere else. In most cases, the data type is modified in the wdDoInit() method of the corresponding controller. Along with the value selector structure, the value set is included in the validation. When you bind the same attribute to an input field – as shown in this example -, the button for the value selector and the specified value is checked against the set of constants.

Procedure

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

·        Enhance the view layout

·        Define the name Save for an action that is bound to a button

·        Declare a value attribute Country of the type String in the context

·        Dynamically modify a data type of a value attribute at runtime

·        Data binding between the InputField UI element and a value attribute

Enhancing the View Layout

Enhance the Main example view with the following UI elements:

Layout of the Main View
Property	Value
Text  EVSHeader of the type TextView in the UI-element ValuehelpGroup
Properties of TextView – design	header3
Properties of TextView – text	Extended Value Selector
LayoutData - colSpan	2
Field label  EVSLabel of the type Label  in the UI-element ValuehelpGroup
Properties of Label – labelFor	EVSInputField  (in selection list)      Select the value EVSInputField for the labelFor property after inserting the UI element EVSInputField, which is located below.
Container  InputButtonContainer of the type TransparentContainer  in the UI-element ValuehelpGroup
Properties of TransparentContainer – layout	FlowLayout
Input field  EVSInputField of the type InputField  in the UI-element InputButonContainer
Pushbutton  SaveButton of the type Button  in the UI-element InputButonContainer
Properties of Button – text	Save

Again, the text of the Label UI element EVSLabel is specified implicitly by defining the labelFor property.

 

Defining the Save Action and Binding It to SaveButton

To use the generic input validation, you must declare the Save action in the controller and bind it to the SaveButton button.

...

...

       1.      Select the Actions tab in the user interface of the Controller of the Main view.

       2.      Select  and declare the Save action.

       3.      Return to the Layout tab.

       4.      Assign the value Save (the name of the previously added action) to the Event – onAction property of the Button UI element SaveButton.

You do not need to implement the automatically generated action event handler in the view controller. The automatic input validation is executed during the next communication with the Web Dynpro runtime environment. You only need to bind the UI element property onAction to the declared action event Save to trigger the communication with the runtime environment.

Declaring a Value Attribute of the Type string

...

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

       2.      Add a second value attribute and call it Country.

In this case, you cannot change the value stringof the type property. The set of constants is passed to the Country value attribute only at runtime using the appropriate API calls for the dynamic type modification.

Dynamically Modifying a Data Type of a Context Attribute at Runtime

When using the extended value selector, the set of constants for a value attribute needs to be dynamically created at runtime by modifying the corresponding data type. In many cases, the set of constants is not statically available at design time but only at runtime.

 

Implementation of the wdDoInit() Main method – View controller

... //@@begin imports import com.sap.dictionary.runtime.ISimpleTypeModifiable; import com.sap.tc.webdynpro.progmodel.api.IWDAttributeInfo; import com.sap.tc.webdynpro.tutorials.valuehelp.wdp.IPrivateMain; import com.sap.typeservices.IModifiableSimpleValueSet; //@@end ...   /** Hook method called to initialize controller. */ public void wdDoInit() {   //@@begin wdDoInit()     // Access interface ISimpleTypeModifiable for modifying the attribute's datatype   IWDAttributeInfo attributeInfo =     wdContext.getNodeInfo().getAttribute(IPrivateMain.IContextElement.COUNTRY);   ISimpleTypeModifiable countryType = attributeInfo.getModifiableSimpleType();     // Set field label and populate valueset   countryType.setFieldLabel("Country");   IModifiableSimpleValueSet valueSet =   countryType.getSVServices().getModifiableSimpleValueSet();   for (int i = 0; i < 40; i++){     valueSet.put("Key_"+i,"Country "+i);   }       // initialize context value attribute 'Country'   wdContext.currentContextElement().setCountry("Key_0");     //@@end  //@@end }

For additional information, refer to Dynamic Metadata.

The initialization of the view controller dynamically modifies the statically declared data type of the value attribute Country at runtime. The attribute name "Country" is passed using the automatically generated constant IPrivateMain.IContextElement.COUNTRY. This has the advantage that incorrectly written attribute names will already cause a compile error at runtime, instead of not till runtime. 

Note that the modification of the data type string only affects one value attribute even if the same type is used multiple times somewhere else.

In addition to the set of constants, the FieldLabel attribute is set, which is then automatically displayed in the EVSLabel UI element in front of the Country input field. This requires the previous assignment of the name of the Country input field EVSInputField to the labelFor property of the EVSLabel UI element at design time. Since this input field is bound to a value attribute, you can determine the label text to be displayed at runtime using the value attribute metadata of the modified data type Simple Type.

Binding an InputField UI Element to the View Context

Finally, you bind the value property of the InputField UI element called EVSInputField to the value attribute Color with a dynamically modified data type.

1. Select the Layout tab in the user interface of the Main view.
2. Choose the node  EVSInputField[InputField] in the outline window.
3. Bind the value of the value property to the Country value attribute in the Properties tab.

 

Result

The function Deploy new archive and Run allows you to trace the runtime behavior of your value selector example application after regenerating and redeploying the application files.

In example view Main, the key value Key_0 is entered in the input field of the Country label. This is what you dynamically defined with the line wdContext.currentContextElement().setCountry("Key_0"); in the wdDoInit() controller method.

When you choose the arrow button right to the Country input field, the extended value selector is displayed and you can select a key value.

If an invalid key value is entered in the Country input field, a corresponding error message appears when you attempt to save the data selecting the Save button.