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


Related Articles

Add programmed/OVS search help to FPM ESS/MSS application via enhancement to CL_HRESS_PER_DETAIL
BIND_STRUCTURE method of interface IF_WD_CONTEXT_NODE to assign structure to context
BIND_TABLE method of interface IF_WD_CONTEXT_NODE
Get the name of the button the user has clicked on within the SAP web dynpro action ABAP code
Create field Refering to datatype of webDynpro context element
WebDynpro context for creation of screen field including standard search help
Disable SAP User Personalisation in Web Dynpro app using WDDISABLEUSERPERSONALIZATION and WDENABLEUIELEMENTSHIDE
GET_ATTRIBUTE method of interface IF_WD_CONTEXT_NODE to retrieve value of context element
GET_SELECTED_ELEMENTS to get selected row of ABAP web dynpro table when not using lead selection
GET_STATIC_ATTRIBUTE_TABLE method to return all rows of a context table node
IF_WD_CONTEXT_NODE interface methods withn ABAP Web Dynpro to enable users to view and change data
ABAP code to manually trigger ABAP web dynpro plug
Popuate SAP WebDynpro field
Change the stylesheet theme used by your web dynpro and portal apps (i.e. SAP_TRADESHOW, SAP_CORBU)
Change the stylesheet theme used by your web dynpro and portal apps (i.e. SAP_TRADESHOW, SAP_CORBU)
SET_ATTRIBUTE method of interface IF_WD_CONTEXT_NODE to assign value to individuale context attribute
Clear context attribute using SET_ATTRIBUTE_NULL method of interface IF_WD_CONTEXT_NODE
Add Dropdown by index UI Element to table field within abap web dynpro
Add freely Programmed search help to a web dynpro application field
Retrieve SAP webDynpro field value entered by user
ABAP Web dynpro ALV report table
Hide fields of a web dynpro ALV table
Display web dynpro ALV report select options to resict output results
Assign value to ABAP web dynpro context via table, structure or individual attribute
Get selected ABAP Web dynpro dropdown byindex value (dropdownbyindex UI element)
ABAP web dynpro Dropdown by index UI Element allows a field to display a drop down list of values
ABAP web dynpro Dropdown default value, allow you to set current value of dropdown UI element
Change SAP web dynpro logon screen
Read ABAP Web dynpro table context on action / button click
ABAP Web Dynpro tables to allow users to view and change data
Get selected row of ABAP web dynpro table
Get all selected rows of table within your web dynpro for ABAP applications using GET_SELECTED_ELEMENTS
Get selected row of ABAP web dynpro table
ABAP Web Dynpro tree structure, display HR org structure as example
SAP ABAP Web Dynpro UI elements
View Container UI Element to display a web dynpro view within a wdp view
ALV ABAP Web Dynpro application
ABAP Web dynpro button click / Action
Call URL from SAP Webdynpro for ABAP ACTION
Call URL from SAP Webdynpro for ABAP ACTION
Display popup screen within ABAP Web dynpro
ABAP Web dynpro populate table on action / button click
ABAP code to Print abap web dynpro table
Adding URL parameters to you ABAP webdynpro to change thinks like the CSS