Updated Version!
Updated Version Now Available BSP Value Input Help Popups Version 2.0 Part 1.
Further Enhancements Now Available BSP Value Input Help Popups Version 3.0.
Introduction
I have to admit that I have both been looking forward to and dreading this particular Weblog. Weeks ago when I created thomas.jung3/blog/2004/06/17/bsp-150-a-developer146s-journal-part-i-introduction, I included the topic of Popup Value Input Helps. I guess this was a little bit of challenge to me, because at the time I didn't actually have a solution. From the very beginning of my work with BSP, the thing I have been missing the most from traditional ABAP has been the easy to use Value Input Helps. I think that long time ABAP programmers take for granted how wonderful this functionality really is.</p>
So I knew that this was functionality that I really wanted for my company. In addition I had seen several requests for the same functionality on SDN. There was even a recent discussion in one of BSP Programming: Writing a Pattern Engine where Brian McKellar suggests that the SDN community might come up with our own solution. Well I though that there would be no better time to share what I have working so far.
method read_field_type.
describe field field help-id dataref.
endmethod.
factory(
encode = me->encode
id = me->id
id_postfix = '__listBox'
multiple = 'TRUE'
selections = me->selections
size = '2'
width = me->width ).
****Render the List Box
while m_page_context->element_process( element = listbox ) = co_element_continue.
endwhile. "End Listbox Render
me->print_string( ' ' ).
****Build the Help Image
data: image type ref to cl_htmlb_image.
data: img_src type string.
img_src = cl_bsp_mimes=>sap_icon( `ICON_PERSONAL_HELP` ).
****Create the Image
image ?= cl_htmlb_image=>factory( id = me->id
id_postfix = '__image'
onclientclick = onhelp2
src = img_src ).
****Render the Image
while m_page_context->element_process( element = image ) = co_element_continue.
endwhile. "End Image Render
else.
****Single selection - We will render an inputfield. The '_' Fields are for
****Model Binding
data: inputfield type ref to cl_htmlb_inputfield.
inputfield ?= cl_htmlb_inputfield=>factory(
alignment = me->alignment
description = me->description
design = me->design
disabled = me->disabled
encode = me->encode
id = me->id
id_postfix = '__inputField'
invalid = me->invalid
maxlength = me->maxlength
required = me->required
required = me->required
showhelp = 'true'
onvaluehelp = onhelp2
size = me->size
size = me->size
style = me->style
tooltip = me->tooltip
type = 'STRING'
value = me->value
value = me->value
visible = me->visible
visible = me->visible
width = me->width ).
****Render the Input Field
while m_page_context->element_process( element = inputfield ) = co_element_continue.
endwhile. "End Input Field Render
endif.
data html type string.
data: url_string type url.
****Build the URL to the Dummy - Loading... Page
clear params.
data: iframe_dummy_url type string.
call method cl_http_ext_webapp=>create_url_for_bsp_application
exporting
bsp_application = 'zes_keg_shared'
bsp_start_page = 'dummy.htm'
bsp_start_parameters = params
importing
local_url = iframe_dummy_url.
****Render the IFrame
concatenate html
``
into html.
prev_out = me->get_previous_out( ).
prev_out->print_string( html ).
clear html.
rc = co_element_done.
inputHelpDrag:DO_AT_BEGINNING
Before we go any further I should probably give you the few lines of code from the inputHelpDrag element as well. I am loading a piece of JavaScript that I found on the Internet. The code is Free for Commercial or Private use. However I am not allowed to re-distribute the source code. You can get it yourself from the original webpage .
Help Value Page
Now that we have finished with our BSP Elements, we are ready to start coding on our Help Value Page. As I said earlier, I coded this page as a stateless MVC. My View name is InputHelp.bsp and my controller name is InputHelp.do. We will look at the View first.
InputHelp.bsp View
My View starts off with the inclusion of the same JavaScript library that is necessary for the Drag Capabilities. I then load the JavaScript I wrote that fires when the user selects OK or Cancel. These functions will close the Popup IFrame and copy the selected values back into the source elements. Notice the JavaScript function that I call on the DocumentBody onLoad. This is a function provided by the JavaScript Drag Library. It allows me to select my Toolbar as the Drag anchor. Next you see some processing to create my Pager, an Error message area, and finally the TableView control. You will notice that I always leave my Help Value Table untyped. That way the Help Value exit can return any structure. Finally you find the rendering for the OK and Cancel buttons, followed by my custom element that downloads data to the frontend. For more details on this element see Creating a BSP Extension for Downloading a Table.
<xhtmlb:pager id = "mu_pg1"
text = "Page of $vMax$"
onPage = "pager_onPage"
vMax = "c_tableselection_singleselect.
endif.
if input is available, dispatch this input to subcomponent.
this call is only necessary for toplevel controllers.
( if this is not a toplevel controller or no input is present,
this call returns without any action)
dispatch_input( ).
if any of the controllers has requested a navigation,
do not try to display, but leave current processing
if is_navigation_requested( ) is not initial.
return.
endif.
****Call our View
view = create_view( view_name = 'InputHelp.bsp' ).
view->set_attribute( name = 'model' value = model2 ).
call_view( view ).
function z_e_rfc_user_hv_exit.
*"----
""Local interface:
*" EXPORTING
*" VALUE(IDATA) TYPE TABTYPE_USER_ADDR
*" VALUE(KEY_FIELD) TYPE STRING
*" VALUE(VALUE_FIELD) TYPE STRING
*" VALUE(DISP_FIELDS) TYPE STRING_TABLE
*"----
select * from user_addr into table idata.
sort idata by bname.
key_field = 'BNAME'.
value_field = 'NAME_TEXTC'.
field-symbols:
function z_e_rfc_user_hv_exit_datatype.
*"----
""Local interface:
*" EXPORTING
*" VALUE(DATA_TYPE) TYPE STRING
*"----
data_type = 'USER_ADDR'.
endfunction.
Closing
That was a lot of code! Hopefully this example can at least get the ball rolling for anyone wanting to implement their own F4 style Value Help Popup. I know that I'm not finished with mine yet. In the coming months I would like to extend it with a third data selection option that uses the BAPI: BAPI_HELPVALUES_GET. I also would like to enhance the MultiSelect so that it doesn't have to pass a lot data from the server, to the client, and back again if a lot of entries are selected. I am thinking about writing anything over 25 values into a server side cookie. I will then write the key to this cookie into the listBox. But all this will have to wait a little while. Right now I am just happy to have my familiar ABAP F4 functionality back :smile:
