Freely Programmed Value Help in the WebDynpro application

Web Dynpro ABAP Framework allows you to create your own input help components. A component to

be used as value help must implement interface IWD_VALUE_HELP (see Working with Web Dynpro Component Interfaces). Once the freely programmed value help has been linked to a context attribute, the value help is automatically available for every Input Field linked to this attribute.

For Details:

http://help.sap.com/saphelp_nw70/helpdata/en/47/9ef8cc9b5e3c5ce10000000a421937/frameset.htm

Procedure:

Create a Webdynpro Component with name 'ZWDC_HELP_1'.

Press Enter.

Declare the IWD_VALUE_HELP in Implemented Interfaces list in your WD component as shown below.

Press Enter.

After pressing Re implement button, you will see as shown below.

Go to the properties tab of COMPONENTCONTROLLER and press Create Controller Usage..

After pressing the Create Controller Usage button, the component will be shown as

Select the first component i.e. WD_VALUE_HELP

Go to context tab to create a node ND_TEXT and its properties are as shown below i.e. Interface node as YES...

Create an attribute...

Attribute name INPUT_1 and declare type as STRING...

Go to Attributes tab and create an attribute for the interface IF_WD_VALUE_HELP_LISTENER as VALUE_HELP_LISTENER (as shown below)

Go to Events tab, you will see two events which are automatically created as soon as you add the controller WD_VALUE_HELP in the properties tab and to that add another event VH_DATA_SELECTED and check that interface check box..

Go to Methods tab and there you will see a method SET_VALUE_HELP_LISTENER which is automatically generated...

Double click on that method and write the following code as shown below...

WD_THIS->VALUE_HELP_LISTENER = LISTENER.

Then go to the view V_MAIN and create three elements LABEL, INPUTFIELD and BUTTON...

Go to context tab of that view and drag and drop the interface node ND_TEXT from the component controller...

Bind the INPUTFIELD with the attribute INPUT_1...

Write OnAction event for the button created as shown below...

Write the following code in that OnAction button event handler method...

WD_COMP_CONTROLLER->FIRE_VH_DATA_SELECTED_EVT( ).
WD_COMP_CONTROLLER->VALUE_HELP_LISTENER->CLOSE_WINDOW( ).

Go to the window controller and there will be a window named WD_VALUE_HELP... Drag and drop the View V_MAIN to that window...

Now the above component will display as soon as F4 button is pressed in the following component.

Create another component ZWDC_HELP_RESULT

Create view V_MAIN as shown below

Go to Used Components tab and include the component created previously ZWDC_HELP_1 and name it as FREE as shown bellow...

Go to COMPONENTCONTROLLER and further to properties tab... Include that Used Component FREE as shown below...

Go to the Context of the COMPONENTCONTROLLER and there you will see the Interface node ND_TEXT which you have created in the previous component... Drag and drop it...

Create another Node ND_RESULT and an Attribute RESTEXT with Type as STRING, Input Help Mode as Freely Programmed and include the component name which you have defined as shown below...

Go to Methods tab and create an Event Handler Method TEST and include the event VH_DATA_SELECTED in the component use FREE as shown...

Double click that Event Handler Method TEST and write the following coding for getting the Input field value from FREE component and setting that value to the Attribute which you have created in this component... ( Get coding from the Read Context in Wizard )

DATA LO_ND_ND_TEXT TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LO_EL_ND_TEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_ND_TEXT TYPE WD_THIS->ELEMENT_ND_TEXT.
DATA LV_INPUT_1 LIKE LS_ND_TEXT-INPUT_1.

DATA LO_ND_ND_RESULT TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LO_EL_ND_RESULT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_ND_RESULT TYPE WD_THIS->ELEMENT_ND_RESULT.
DATA LV_RESTEXT LIKE LS_ND_RESULT-RESTEXT.
* navigate from to via lead selection
LO_ND_ND_TEXT = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_ND_TEXT ).

* get element via lead selection
LO_EL_ND_TEXT = LO_ND_ND_TEXT->GET_ELEMENT( ).

* get single attribute
LO_EL_ND_TEXT->GET_ATTRIBUTE(
EXPORTING
NAME = `INPUT_1`
IMPORTING
VALUE = LV_INPUT_1 ).

* navigate from to via lead selection
LO_ND_ND_RESULT = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_ND_RESULT ).

* get element via lead selection
LO_EL_ND_RESULT = LO_ND_ND_RESULT->GET_ELEMENT( ).
LV_RESTEXT = LV_INPUT_1.
* Set single attribute
LO_EL_ND_RESULT->SET_ATTRIBUTE(
EXPORTING
NAME = `RESTEXT`
VALUE = LV_RESTEXT ).

Now go to the view V_MAIN and further to the Context tab.. Drag and drop the Created node ND_RESULT from the context of COMPONENTCONTROLLER to this view context..

Go to the Layout of the View and create a Label and Input field

Bind the value for the input field to the attribute RESTEXT as shown below...

Now create the Application for this component..

Run the Application.. The result will be

As soon the user press the F4 button, you will see as shown below

Press Apply Button and the value passes to the Input field...