Skip to Content

Part #1

NOTE

: I had to break this weblog up into two parts because I see to have hit some sort of size limitation somewhere. My weblog kept getting cutoff at a certain point. The following is a link to[ part two | https://weblogs.sdn.sap.com/cs/weblog/view/wlg/975].

This example was futher enhanced in BSP Value Input Help Popups Version 3.0.

Download Link

Now you can download the code and screen shots here.if_bsp_servicesget_simple_helpvalues2, that may not be present on older support packages.  If that is so, just substitute with the older version: cl_bsp_services=>if_bsp_servicesget_simple_helpvalues.

Next up I have included the Download Custom BSP Element in this solution.  This is completely optional, but does allow the user to download the value list similar to the functionality in the class ABAP Search Help.  If you are interested in Element please have a look at the following weblog: Creating a BSP Extension for Downloading a Table.

Finally I have used a JavaScript library created by Matt Kruse that allows for the Movement of the Popup Box.  This library is free for Commercial or Private use.  However I can not re-distribute the source code.  You must download it yourself from its original home .</p>

Before we get started with the code in this example, I wanted to throw out one other option for getting to the code.  I have a zip file that includes all the source code and screen shots (not reduced to meet the SDN size limit).  I submitted this content to SDN nearly a month ago, hoping to include it with this weblog.  However I am still waiting for approval.  I decided to go ahead and offer it to anyone who wants it via E-mail until I can post it on SDN.  You can send your requests to tjung@kimball.com .  Please let me know if you need me to rename the ZIP file extension.  I have already shared this with some people who have contacted me off-line about the Value Input Help Popup.

BSP Elements

We start off our solution with two new BSP Elements. The first one I named inputHelpDrag. It is very simple in that it only contains a little bit of JavaScript that must be included in the hosting page to allow our popup IFrame to be movable. This element is optional. If it is not inserted, we just will have a stationary popup.

The second element I named inputHelp. For its Properties we have Element: content = Blank and Further Options with User-Defined Validation and “PAGE DONE” is not returned at end of BSP element both checked. Now because we are wrapping this element around both the listBox and the inputField, we have quite a few attributes. I wanted to expose almost all attributes from both inner elements. However the new element can be used with minimal input. The most important attributes are the new ones I added to control the popup. The first is multiple. This controls if you want single or multipe selection (it defaults to single). Next we have the attribute dataRef. This attribute accepts the name of the data dictionary reference that will be used for simple value help values. This is nice for code/description combinations. Finally we have rfcFunction and rfcDest. This is for when you want to program the Help Value data retrival your self. You can supply the name of the RFC that you want called by the processing page. The rfcDest defaults to NONE (local system).

NEW

in this version we have the attributes for the third type of value selection, Selection by BAPI. These new values are OBJNAME, OBJTYPE, PARAM, and KEYFIELD. These will allow us to specify the Business Object that the BAPI will use to pull our Search Help Definition from. The following is a screen shot of all the attributes:

image

!https://weblogs.sdn.sap.com/weblogs/images/1918/Attributes2.jpg|height=191|alt=image|width=597|src=https://weblogs.sdn.sap.com/weblogs/images/1918/Attributes2.jpg|border=0!-value.

  •   MOVE me->id TO <wa_params>-value.

  ENDIF.

  APPEND INITIAL LINE TO params ASSIGNING factory(

  •         disabled                    = me->disabled

         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( ‘&nbsp’ ).

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

     `

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 .

            <xhtmlb:pager id     = “mu_pg1”

                          text   = “Page of $vMax$”

                          onPage = “pager_onPage”

                          vMax   = “load_values_from_formfield( model2 ).

  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.

****Requested Simple Help Values

  if not model2->data_ref is initial.

    model2->get_helpvalues_simple( ).

****Requested Help Values Via an RFC Exit

  elseif not model2->rfcfunction is initial.

    model2->get_helpvalues_exit( ).

  elseif not model2->objtype is initial.

    model2->get_helpvalues_bapi( ).

  else.

    model2->message = ‘Element ID can not be blank'(e03).

  endif.

****Multi or Single Select?

  if model2->multiple = abap_true.

    model2->selectionmode = cl_htmlb_tableview=>c_tableselection_multiselect.

  else.

    model2->selectionmode = cl_htmlb_tableview=>c_tableselection_singleselect.

  endif.

****Call our View

  view = create_view( view_name = ‘InputHelp.bsp’ ).

  view->set_attribute( name = ‘model’      value = model2 ).

  call_view( view ).

endmethod.

To report this post you need to login first.

32 Comments

You must be Logged on to comment or reply to a post.

  1. Faaiez Sallie

    Hi, congrats on a wonderful weblog.<br/>I have managed to copy all your code and adjusted the bits I had to work on our system.<br/>I however have two problems which I would like some pointers on.<br/><br/>1) The inputHelp for MATNR does not pull through the selected Material to the field on the test BSP. All the others work fine.<br/><br/>        <zext_f4:F4 id       = “In4″<br/>                        value    = “<%= data4 %>”<br/>                        rfcDest  = “ERP”<br/>                        objtype  = “BUS1001″<br/>                        objname  = “Material”<br/>                        method  = “ExistenceCheck”<br/>                        keyField = “MATNR”<br/>                        param    = “Material” /><br/><br/>2) I cannot seem to get the drag functionality of the inputHelp screen to work.<br/><br/>Thank You<br/><br/>Faaiez

    (0) 
    1. Faaiez Sallie
      I’ve managed to sort out the material number selection – instead of using ‘MATNR’ it should be ‘MATNR_EXT’. Still battling with the drag functionality.

      Regards

      Faaiez

      (0) 
      1. Thomas Jung
        What kind of problems are you having with the drag functionality?  I didn’t write the JavaScript for that, so I’m not sure if I can offer much support on it.  There were many different sample scripts on the Web that did similar things, this was just the one I liked best.  I have tested it in my systems (with our versions of IE), and it works fine for us, but that’s not to say under different circumstances there might be problems.  Please post a little more information and I will see if I can help out.
        (0) 
        1. Faaiez Sallie
          I’ve solved the problem with the popup not being able to drag. The problem was that I created the dragiframe javascript as a page fragment in the ZINPUT_HELP application. The page fragment did not seem to be picked up. But when I created it as a page with flow logic I used the   CALL METHOD cl_http_ext_webapp=>create_url_for_bsp_application
              EXPORTING
                bsp_application      = ‘ZINPUT_HELP’
                bsp_start_page       = ‘DRAGIFRAME.JS’
                bsp_start_parameters = params
              IMPORTING
                local_url            = dragiframe_url.

          to build a url to the script and this works fine.

          The test application work great now.

          Now I am trying to use the iframe in MVC BSP and when it tries to do any of the following I get a javascript permission error:

          if (p.addHandle) { p.addHandle(o,win,true); return; }

          OR

          parent.document.getElementById(“search_matnrfrom__iFrame”).src

          I get an Access is denied error whenever I try to access any object on the parent page.

          Any ideas?

          Regards

          Faaiez

          (0) 
          1. Thomas Jung
            I can tell you that I use the Popup iFrame in MVC all the time.  Nearly all of my applications are MVC.  So that alone, probably isn’t the cause of this error.  It could be a setting in your browser.  All of my applications run in the Trusted Sites Zone (which is quite forgiving).  Also my start page of any BSP application always includes the domain relax script.  You can get this from the runtime object (runtime->get_domain_relax_script( ).).  Although I don’t see how the floating IFrame could cause a cross domain access error.  I did a few source on one of my Popup Help windows running in a MVC and I have the same JavaScript:

            parent.document.getElementById(“s1_mq_werks__iFrame”).src

            Notice that my MVC controller IDs are on the front of my element name.  You can use the same element name in multiple controllers, so SAP always appends the controller ID to the front of the Element ID.  However I’m not doing anything special to get that.  I’m just taking my help element ID and concatenating _iFrame to it.

            ****Build the Unique ID for the IFrame
              data: iframe_id type string.
              concatenate me->id
                          ‘__iFrame’
                          into iframe_id.

            Perhaps you have something different here.  This is in the DO_AT_BEGINNING of my Custom BSP Extension.

            (0) 
    2. Thomas Jung
      It all depends upon what value is in the DESCRIPTION_FOR_HELVALUES parameter of the BAPI_HELPVALUES_GET function module.  If you have a complex collective search help like material, it is possible that this value could vary (MATNR might be the correct value for some elemental search helps while MATNR_EXT might be correct for others).   I have since added functionality to send in more than one key field separated by a pipe(|).  I then check then all one by one.  This works for Material where might have more than one name for the field within the collective help.  The best way to find this is just to set a breakpoint after the call to the Help BAPI and see what is in the DESCRIPTION_FOR_HELVALUES parameter.
      (0) 
  2. Community User
    Hi Thomas,

    thanks for another great webblog. When I first saw this extension in action I was blown away 🙂

    However I have a problem when I use the following parameter:

    objtype  = “BUS1001”                         objname  = “Material”                         method   = “ExistenceCheck”                         keyfield = “MATNR”
    param    = “Material”

    and then choose “Materials for class” or “Material for several classes” I will get a SAP Internal server error. The reason for this error is that when you choose this help-option using a normal sapgui the system will open another gui-session which will accept the input. Of course when using it in a webbrowser the system can’t open another gui-session. I need to find a way how I can detect these few help-options which will not work online. I already checked what the BAPI returns but I can’t see any useful information.

    Do you know a way how to detect these?

    (0) 
    1. Thomas Jung
      I have seen this exact same error.  Personally it seems like a problem with the BAPI.  Shouldn’t the BAPI trap these and not try to call a screen?  Isn’t that the rule, that BAPIs are supposed to be safe to call from non dialog systems? 

      The only way I have found to work around this is to catch the runtime error on the BAPI call.  I always use the exceptions commincations_failure and system_failure on calls to my BAPI.

          exceptions
            communication_failure      = 1  message msg_text
            system_failure             = 2  message msg_text
            others                     = 3.

      These two special exceptions also send back a message that can be caught.  You can then issue this message back to the user or catch it and send back a nicer message.  This is what I did.  I left the classification search help item in there.  If the user chooses it, they get a message that this search help is not supported from the Web.  My users seem to accept that just fine. 

      (0) 
  3. Amit Kumar
    Hi Thomas,
    I am getting error MC_CONTENT is unknown in Class ZCL_ES_BSP_ELMNT_INPUT_HELP Method RUNTIME_IS_VALID.
    Although i have done all the prerequisites.
    I am new to MVC but i want to realise F4 help in BSP.
    Please help me in short out this problem.

    Amit Kumar

    (0) 
    1. Thomas Jung Post author
      That is a common problem, and one that is easy to correct.  When you created your BSP Extension (the actual extension – not the extension element), there was a field where you could specify the BSP Element Basis Class.  This is the class that you element inheritance hierarchy will be built off of when it is generated.  The value here should be CL_HTMLB_ELEMENT.  Have a look at the SAP delivered Extension (HTMLB) to see what I am talking about. 

      Once you add this value in the Extension screen and re-activate everything – your class ZCL_ES_BSP_ELMNT_INPUT_HELP should inherit MC_CONTENT and everything should compile fine.

      (0) 
      1. Community User
        Thanks Thomas,
        that error has been rectified but now i am getting another error after executing my BSP page
        Element ID can not be blank
        I think this is the attribute of element inputHelp.
        where i am going wrong?

        (0) 
        1. Thomas Jung Post author
          Based upon the error, I would say that you haven’t supplied a value for the ID attribute of your custom element.  The ID is required. 
          (0) 
  4. Lionel Lacotte
    Hello,

    I’ve got an error when  I try to compile this class ZCL_BSP_CTRL_P_INPUT_HELP ( controller class in application BSP ).

    In the method Do request, the following error :

    Class ZCL_BSP_CTRL_P_INPUT_HELP,Method
    DO_REQUEST
    The cast between two incompatible references (to types
    “ZCL_BSP_M_INPUT_HELP” and “CL_BSP_MODEL”) makes no sense. This kind of
    cast will always produ ce a runtime error. runtime error.

    My system is SAP was 6.40

    Can you help me please ?? Thanks in adavance.
    Lionel

    (0) 
    1. Thomas Jung Post author
      ZCL_BSP_M_INPUT_HELP is a normal BSP model class.  Therefore it must be setup as inheriting from CL_BSP_MODEL.  That is the reason you are getting this error.
      (0) 
  5. Ricky Orea
    Hello Thomas,

    I’m trying to follow your example in the BSP blog, I have gone as far as creating the class ZCL_BSP_INPUT_HELP, but when I try to do syntax check, I got the error message:

    Class ZCL_BSP_M_INPUT_HELP, Method Constructor
    In the constructor method, you can only access instance attributes, instance methods, or “ME” after calling the constructor of the superclass..

    ————————-
    But when I checked all the attributes of this class, they are all setup as an Instance. Any idea?

    Thanks.

    (0) 
    1. Thomas Jung Post author
      Which line of code in the constructor is the syntax error pointing to? What coding have you inserted into the constructor?  I assume that there is a type in your constructor code or bad attribute declaration.
      (0) 
  6. Ricky Orea
    Hi Thomas,

    You mentioned about getting the JavaScript source code for the inputHelpDrag (iFrame), but nothing was mentioned about the regular other ones, do you have them in your book?

    Thanks,
    Ricky

    (0) 
    1. Thomas Jung Post author
      Not sure what you are refering to as “regular other ones”?  All the source code I created is available from the link.  The only thing not included was the JavaScript example I got for the inputHelpDrag and that is linked to the original source. The rest of the javascript for this early version of the value help is all contained in-line within the BSP extensions and pages.

      Yes the Advanced BSP Programming book does have all the source on the CD.  It is the most advanced version of the value help I wrote.  It removes the dependency to the open source inputHelpDrag and instead uses the dialog window scripting from Web Dynpro ABAP.

      (0) 
      1. Ricky Orea
        Hi Thomas,

        Thanks for the reply. I thought there was also JavaScript sources beside from the InputHelpDrag. I asked because when trying to run popup_test.htm, I get an error message “Error: Object Expected”. I’m stuck, I’m new to BSP and cant move on…

        Kind regards.

        (0) 
        1. Thomas Jung Post author
          Object Expected is a JavaScript error but it can have many causes. It is really difficult to say what is causing it without knowing a little bit more about where the error is being thrown from.  Try getting a JavaScript debugger and look into the source of the problem.

          I will tell you that if you are new to BSP, this is an extremely advanced example.  You may want to cut your teeth on something simplier first.

          (0) 
          1. Lewis Moore

            Was having same issue with my build of this, found if I removed the documenthead and documentbody tags and replaced them with the page tag it worked fine. Sample using the single choice from your popup_test.htm.<br/><br/><%@page language=”abap” %><br/><%@extension name=”htmlb” prefix=”htmlb” %><br/><%@extension name=”phtmlb” prefix=”phtmlb” %><br/><%@extension name=”zbspelements” prefix=”zkeg” %><br/><htmlb:content design=”design2003″ ><br/>  <htmlb:page title=”Delegation Authority” ><br/>      <htmlb:form><br/>        <%<br/>  data: data type string.<br/>  data: data2 type sflight-carrid.<br/>  data: data3 type string.<br/>  data: data4 type string.<br/>  data: data5 type string.<br/>        %><br/><br/>        <zkeg:inputHelp id       = “In5″<br/>                        value    = “<%= data5 %>”<br/>                        rfcDest  = “TS1″<br/>                        objtype  = “DRAW”<br/>                        objname  = “Document”<br/>                        param    = “DocumentNumber”<br/>                        keyField = “DOKNR” /><br/>      </htmlb:form><br/>  </htmlb:page><br/></htmlb:content><br/><br/>Cheers!

            (0) 
  7. Lionel Lacotte
    Hi Thomas,

    I want integrate the functionality “history field” as explain in SAP press (adv BSP prog. sect 18.1) in this extension. 

    Is it possible ??? I think so.

    In my extension zf4help:input methode IF_BSP_ELEMENT~DO_AT_BEGINNING, I added this code :

    if me->hist eq ‘X’.

           combobox ?= cl_phtmlb_combobox=>factory(
                            behavior = ‘freetext’
                            id_postfix      = ‘__inputField’
                            encode          = me->encode
                            id              = me->id
                            required        = me->required
                            selection       = me->value
                            _selection      = me->_value
                            table           = me->table
                            _table          = me->_table
                            nameofkeycolumn = me->nameofkeycolumn
                            nameofvaluecolumn = me->nameofvaluecolumn
                            width           = me->width ).

        WHILE m_page_context->element_process( element = combobox ) = co_element_continue.
        ENDWHILE. “End Input Field Render

       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

    But I do not manage to recover the value of the field in my model, the value is initial.

    Can you help ?  Or it’s more complex ??

    Thank’s a lot.
    Lionel

    (0) 
    1. Thomas Jung Post author
      Quite simply this solution was never designed for the comboBox.  It would require some study to see why your value isn’t being returned.  The comboBox element can be touchy especially when being scripted against.  Why even use the ComboBox within the Value help – there will be no way to trigger the help.  Why not just use the comboBox by itself?  Why use the comboBox at all.  I would suggest using something like my recent jQuery example and get the results via AJAX.
      (0) 
  8. Ricky Orea
    Hi Thomas,

    I recently bought your book “Advance BSP Programming” and just import the transports that came with it, I was able to run the test page “simpleTest.htm” but when I clicked on the click to show the help window, I get a JavaScript error that says “prtPopup” is undenfined. Did I forget to do something here?

    Thanks very much,
    Ricky

    (0) 
    1. Thomas Jung Post author
      I recently rebuilt my laptop (thanks to a Hard Drive crash), so I have a clean NetWeaver 7.0 installation and the transports imported directly from the book CD.  That shoul be really close to the situation on your system, however the simpleTest.htm works just fine for me.

      The error with prtPopup would lead me to believe that something is wrong with the setting of the dialog script (done in zdialog:dialogHeader). The path to the currect JavaScript library should be contained in the constant:
      zcl_es_bsp_elmnt_dialog_hdr=>ie_path
      The value should be:
      /sap/bc/bsp/sap/zes_shared/dialog_ie6.js

      So the first thing would be to make sure that this JavaScript library is in the zes_shared BSP application.  Second I would check and make sure the ICF Node for this library is active. ICF notes import in an inactive state and must be activated in transaction SICF. 

      If that doesn’t do it, let me know and we can dig into the problem further.

      (0) 
      1. Ricky Orea
        Thanks Thomas,

        I know about what happened to your laptop, I was at the portal conference at Orlando, I attended one of your sessions. But anyway, thanks for your help, it’s working now, I just need to activate the service for zes_shared application in SICF.

        Best regards,
        Ricky

        (0) 
  9. Ingrid Marie Hjellset Larsen

    Hi, <br/>I’ve implemented the valuehelp described in this log, and it works fine. I just have one problem: <br/><br/>I have defined the attribute data2 type string in the attribute tab on the page. And I’m using data2 as value for the inputhelp on the page.<br/><br/><zf4:inputHelp id      = “In2″<br/>                       design  = “STANDARD”<br/>                       visible = “TRUE”<br/>                       value   = “<%= data2 %>”<br/>                       dataRef = “SFLIGHT-CARRID” /><br/><br/>When I select an item within the valuehelp, and close the valuehelp, the selected value shows up in the inputfield. But it is not kept for later. I have a button that is clicked to save the value, but when clicking, data2 is initialised.<br/>How can I prevent this value from getting initialised?<br/><br/>

    (0) 
    1. Thomas Jung Post author
      Inside the inputHelp is a normal htmlb:inputField.  You have to follow the same rules as retaining the value of an inputField.  You can be stateful and use MVC and then the data will be retained for you.  Otherwise you have to retrieve the data in your onInputProcessing from the form fields.  If you name your attribute the same as the inputField and turn on the AUTO flag on the Page Attributes then the system will perform basis form field matching for you based upon the name. Please note that the name of the inner inputField has a postfix:
      inputfield ?= cl_htmlb_inputfield=>factory(
                             alignment       = me->alignment
                             cellvalue       = me->cellvalue
                             description     = me->description
                             design          = me->design
                             disabled        = me->disabled
                             encode          = me->encode
                             id              = me->id
                             id_postfix      = ‘__inputField’

      Therefore in your example it woutl be In2_inputField.

      (0) 

Leave a Reply