SAP Help Simple steps to create a custom search help(value help) for your web dynpro application









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( ).
	context_element->get_static_attributes(
			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'.
	endif.

*	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
	wd_this->SHelp_listener->f4_context_element->set_attribute(
    		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 ).

endmethod. 

Add the following abapcode to the SET_VALUE_HELP_LISTENER event

	method SET_VALUE_HELP_LISTENER .
  	wd_this->SHelp_listener = listener.
	endmethod.

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
	endmethod.


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

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

Add the following code to the SELECT action method

	method ONACTIONSELECT .
	* 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( ).
	endmethod.


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