sapdev logo background
sapdev logo sapdev logo

Freely Programmed search help for your web dynpro application (custom value help/OVS)

If you assign a dictionary data type to a UI field it will automatically use any search help assigned to this field. Just for info I am going to try and refer to these as a search helps rather than a value helps as this is what they have always been called, and are still called in core SAP i.e. via SE11.

Automatically using standard search helps can be very useful and is one of the benefits of Web Dynpro applications. But there may be times when you want to add your own custom built search help which does something a bit more complicated than displaying a list of values with search boxes. One way to do this would be to simply add a button UI element next to your field which calls a popup view or second screen where you can add all your search help functionality. You could then pass back any resultant value to the calling screen field.

The second way is to build a custom value help which is called when the user clicks on the search help /F4 dropdown option. Below are the very simple steps required to create a custom programed search help and use it on a UI input field.

Step 1 - Create new Web Dynpro Component
Within SE80 create a new Web Dynpro Component (i.e. ZWDP_SEARCH_HELP)

Step 2 - Implement Value Help interface
Within the Implemented interfaces tab of the new WDP component add the IWD_VALUE_HELP interface

Notice the red traffic light, click Reimplement button and this should turn to a green traffic light.

Step 3 - Create context node/attribute within component controller
We just need a quick example node and attribute to capture a value on our search help screen.

Create a node (i.e. MY_NODE) with the following properties

Within the node create a new attribute

Enter attribute name and type as STRING

Your context should now look like this

Step 4 - Component controller Attributes
Notice the auto created Component controller attributes which are available to you

Add a new attribute (i.e. SHELP_LISTENER) with type IF_WD_VALUE_HELP_LISTENER. Also ensure you tick the public checkbox.

Step 5 - Component controller Events
First notice the events that have already been created by implementing the VALUE_HELP interface.

Now create a custom event called SELECTED_VALUE

Step 6 - Activate
It is a good idea to activate everything created so far!!! (i.e. Right click on component name and select activate)

Step 7 - Component controller Methods
First take note of the existing methods for example the SET_VALUE_HELP_LISTENER. which was added when you implemented the IWD_VALUE_HELP interface

Now add a custom method called Return

Add the following ABAP code to the RETURN method

method RETURN.
	data: 	context_node type ref to if_wd_context_node,
      		context_element type ref to if_wd_context_element,
      		element_struc type if_componentcontroller=>element_my_node .
	data: 	ld_shelp_val type string.

* 	Retrieve value of webDynpro field on search/value help screen
  	context_node = wd_context->get_child_node( name = 'MY_NODE').
  	context_node->GET_ATTRIBUTE( exporting NAME = 'VH_FIELD'
                                 importing value = ld_shelp_val ).

	context_node = wd_context->get_child_node(
		name = if_componentcontroller=>wdctx_my_node ).
	context_element = context_node->get_element( ).
			importing static_attributes = element_struc ).

*	If no value entered, add some text just so something is returned to original field
	if ld_shelp_val is INITIAL.
  	  ld_shelp_val = 'selected value'.

*	Only required when adding as enhancement to FPM application, sets change attribute
*       so that it knows fields have changed otherwise ignores new returned values
        wd_this->SHelp_listener->f4_context_element->get_node( )->get_node_info(
           )->get_controller( )->get_context( )->add_context_attribute_change(
             element = wd_this->SHelp_listener->f4_context_element
             attribute_name = wd_this->SHelp_listener->f4_attribute_info-name
             new_value = ld_shelp_val ).

*	Returns value to field that called search help
    		exporting 	name  = wd_this->SHelp_listener->f4_attribute_info-name
              			value = ld_shelp_val ).

	ld_shelp_val = 'value to other fields'.
**	Returns value to other fields on calling screen based on hard coded context names
*        wd_this->SHelp_listener->f4_context_element->get_node( )->get_node_info(
*           )->get_controller( )->get_context( )->add_context_attribute_change(
*             element = wd_this->SHelp_listener->f4_context_element
*             attribute_name = 'TEST_FIELD2'
*             new_value = ld_shelp_val ).
*	wd_this->SHelp_listener->f4_context_element->set_attribute(
*  		exporting 	name  = 'TEST_FIELD2'
*            			value = ld_shelp_val ).


Add the following abapcode to the SET_VALUE_HELP_LISTENER event

  	wd_this->SHelp_listener = listener.

When you implement this for real you will probably want to put something in the WDDOINIT method to initiate all the fields of your search help/value help but for this basic example we will leave this empty.

	method WDDOINIT .
* 	Initiate search help screen

Step 8 - Build display view for search help
Within the main VIEW of your application select the context tab and left click and hold on node(MY_NODE) on right hand side and drag it to the left hand context.

Your screen should now look like this

Step 9 - View layout
Now within the layout tab add a field to your view

Assign context attribute to UI field value property

Next add button UI element

Create and assign action called SELECT

Add text to button (i.e. Select)

Now create a second 'Cancel' button in the same way including creating a new action called 'CANCEL'

Add the following code to the CANCEL action method

* 		Close search help / value help window
  	wd_comp_controller->shelp_listener->close_window( ).

Add the following code to the SELECT action method

	* Call return method created earlier
	  wd_comp_controller->return( ).
	  wd_comp_controller->fire_selected_value_evt( ). "selected_value event created in component controller

	* Close search help popup
	  wd_comp_controller->shelp_listener->close_window( ).

Step 10 - Embed VIEW into value help window

A default window has been created for the value/search help functionality simply embed the main view into this

Remember to use search help to enter these values even though they greyed out.

Step 11 - Activate and you're done!
The basics for a custom search help or freely programmed value help has now been created. All that is left to do now is show you how to add this as a search help for a Web Dynpro UI input field. Next-->

comments powered by Disqus