Skip to Content

If you have been working with ABAP, then you know how powerful the Select-Option functionality is and how important it is to your development process.  SAP has brought the same functionality to the Web Dynpro side as well.  Thank You!  In this weblog, I will explain what you need to do to implement this functionality.   This weblog assumes that you know the basic concepts of the WDA technology and have created a web dynpro component object via SE80.  If you have not learned the basics yet, check out the links to the tutorials in this recent Web Dynpro For ABAP! posted by Marilyn
Pratt
.

Define Used Components

Double click on the web dynpro component. Add the component under the “Used Components” table.

image

Create the View

Create a view by right clicking on the object name and choose Create->View. Give the view name as “MAIN” and a description.Click on the properties tab of the view. In the “Used Controllers/Components” tab, click the create icon. Add the two components for Select_Options.

image

Click on the Context tab of the view. Create a node called “FLIGHTS”. Set the Cardinality as 0..N. Next create the attributes by right clicking on the node and choosing Create Using the Wizard->Attributes from Components of Structure. Enter SFLIGHT as the structure to be copied. Select all fields except MANDT and hit enter. The Context should now look like this.

image

Click on the Layout tab of the view. Add UI element of type ViewContainerUIElement, give the name as “View_Container”. Add a button to the view, call it “BUTTON1”, and create an Action called “CONTINUE” in the properties box of the Button.

image

image

Finally add a table to the layout, name it as “FLIGHTTABLE”, define the datasource as the FLIGHTS node from the view controller. Bind the table to the view context by right clicking on the FLIGHTTABLE in the ROOTUIELEMENTCONTAINER. Select all, set the standard cell editor as TextView.

image

The layout of the view should now look like this.

image

Define Attributes

Click on the Attributes tab of the view. Add the following attributes as seen here.

image

Add code to the methods

Click on the Methods tab of the view. Double click on the WDDOINIT method. Add the code as you see here

METHOD WDDOINIT. 

data: lt_range_table       type ref to data,

      rt_range_table       type ref to data,

      read_only            type abap_bool,

      typename             type string.

data: lr_componentcontroller type ref to ig_componentcontroller,

      l_ref_cmp_usage type ref to if_wd_component_usage.


* create the used component

  l_ref_cmp_usage = wd_this->wd_cpuse_select_options( ).

  if l_ref_cmp_usage->has_active_component( ) is initial.

    l_ref_cmp_usage->create_component( ).

  endif.

* get a pointer to the interface controller of the select options

* component

  wd_this->m_wd_select_options =

       wd_this->wd_cpifc_select_options( ).

* init the select screen

  wd_this->m_handler =

       wd_this->m_wd_select_options->init_selection_screen( ).

* create a range table that consists of this new data element

  lt_range_table =

    wd_this->m_handler->create_range_table(

         i_typename = ‘S_CARR_ID’ ).

* add a new field to the selection

  wd_this->m_handler->add_selection_field(

                 i_id = ‘S_CARR_ID’

                 it_result = lt_range_table

                 i_read_only = read_only ).

* create a range table that consists of this new data element

  lt_range_table =

    wd_this->m_handler->create_range_table(

         i_typename = ‘S_CONN_ID’ ).

* add a new field to the selection

  wd_this->m_handler->add_selection_field(

                 i_id = ‘S_CONN_ID’

                 it_result = lt_range_table

                 i_read_only = read_only ).

endmethod.


* Retrieve the data from the select option

  rt_carrid = wd_this->m_handler->get_range_table_of_sel_field(

                           i_id = ‘S_CARR_ID’ ).

* Assign it to a field symbol

  assign rt_carrid->* to .

* Retrieve the data from the select option

  rt_connid = wd_this->m_handler->get_range_table_of_sel_field(

                           i_id = ‘S_CONN_ID’ ).

* Assign it to a field symbol

  assign rt_connid->* to .

* Retrieve that data from the database.  Normally it is suggested to

* encapsulate the data retrieval in a separate class.

* For simplicity, the SELECT statement has been implemented here.

  clear isflight. refresh isflight.

  select * into corresponding fields of table isflight from sflight

          where carrid in .

* Bind the data to the context

  node_flights = wd_context->get_child_node( name = `FLIGHTS` ).

  node_flights->bind_elements( isflight ).


Embed the View into the Window

Double click on the window under the Windows folder in the object tree to the left. Drag and drop the MAIN view to the Window.

image

Expand the window, right click on VIEW_CONTAINER and select Embed View. In the dialog hit F4 on the “View to be embedded” Select the WND_SELECTION_SCREEN from the help.

image

The Window should now look like this.

image

Create the Application and Test

Finally, create the application and test it. Make sure that you save and activate the web dynpro component. When the browser opens, enter some values in your select-options and click continue. You will see the data in the table below. If you have no data in your Sneak Preview system, run program SAPBC_DATA_GENERATOR to generate the data for you.

image

If you would like more examples, there is a test program in your Sneak Preview system. The webdynpro component name is WDR_TEST_SELECT_OPTIONS. Have and fun and enjoy the holiday season

To report this post you need to login first.

23 Comments

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

  1. Olaf Bethke
    Hi Rich,
    good work, even for beginners unfortunatly
    I’ve got he following error:
    The termination type was: RABAX_STATE
    The ABAP call stack was:
    Method: CHECK_COLLECTION of program CL_WDR_CONTEXT_NODE_VAL=======CP
    Method: IF_WD_CONTEXT_NODE~BIND_TABLE of program CL_WDR_CONTEXT_NODE_VAL=======CP
    Method: IF_WD_CONTEXT_NODE~BIND_ELEMENTS of program CL_WDR_CONTEXT_NODE_VAL=======CP
    Method: ONACTIONCONTINUE of program /1BCWDY/2LRF0SMWNL3294C00TUJ==CP
    Method: IF_WDR_VIEW_DELEGATE~WD_INVOKE_EVENT_HANDLER of program /1BCWDY/2LRF0SMWNL3294C00TUJ==CP
    Method: INVOKE_EVENTHANDLER of program CL_WDR_DELEGATING_VIEW========CP
    Method: IF_WDR_ACTION~FIRE of program CL_WDR_ACTION=================CP
    Method: DO_HANDLE_ACTION_EVENT of program CL_WDR_WINDOW_PHASE_MODEL=====CP
    Method: PROCESS_REQUEST of program CL_WDR_WINDOW_PHASE_MODEL=====CP
    Method: PROCESS_REQUEST of program CL_WDR_WINDOW=================CP
    The program dumps on this line:
    (method ONACTIONCONTINUE)
      node_flights->bind_elements( isflight ).

    Any suggestions?
    olaf

    (0) 
    1. Community User
      Hi Rich,

      Can we create radio buttons (ui elements) in the
      select option screen.

      ADD_SELECTION_FIELD & ADD_PARAMETER_FIELD methods
      allow us to create a select field of type text, dropdown or checkbox right?

      Thanks and regards
      Linu Chacko

      (0) 
      1. Gopalkrishna Baliga
        Hi Olaf/Rich,

             I am getting the following error. What does this mean?

        Error when processing your request

        What has happened?
        The URL https://fmsap995.fm.intel.com:/sap/bc/webdynpro/sap/z_alv/ was not called due to an error.

          
        Note

        The following error text was processed in the system PET : Zugriff über ‘NULL’ Objektreferenz nicht möglich.
        The error occurred on the application server fmsap995_PET_02 and in the work process 0 .
        The termination type was: RABAX_STATE
        The ABAP call stack was:
        Method: WDDOMODIFYVIEW of program /1BCWDY/V1NBPOQACHUJGY08ZNL4==CP
        Method: IF_WDR_VIEW_DELEGATE~WD_DO_MODIFY_VIEW of program /1BCWDY/V1NBPOQACHUJGY08ZNL4==CP
        Method: DO_MODIFY_VIEW of program CL_WDR_DELEGATING_VIEW========CP
        Method: MODIFY_VIEW of program CL_WDR_VIEW===================CP
        Method: DO_MODIFY_VIEW of program CL_WDR_CLIENT_COMPONENT=======CP
        Method: DO_MODIFY_VIEW of program CL_WDR_WINDOW_PHASE_MODEL=====CP
        Method: PROCESS_REQUEST of program CL_WDR_WINDOW_PHASE_MODEL=====CP
        Method: PROCESS_REQUEST of program CL_WDR_WINDOW=================CP
        Method: EXECUTE of program CL_WDR_MAIN_TASK==============CP
        Method: IF_HTTP_EXTENSION~HANDLE_REQUEST of program CL_WDR_MAIN_TASK==============CP

        (0) 
  2. Anonymous
    Hi gopalkrishna

    open the view in edit mode and select the context tab. Then select the node, in the bottom part of the screen you will be able to change cardinality.

    for your second error, looks like you’re calling a method of a non-initialized object in the method WDDOMODIFYVIEW of your view. Check this method to see if this is the case for you. WDDOMODIFYVIEW is only used when you want to build a dynamic UI which is changed after each display of the view.

    Regards
    Jianjun

    (0) 
  3. Gopalkrishna Baliga
    Hi Rich,

           In your example Connid select-option is not showing the F4 value list/help. Why is that so? If I want to show F4 help for CONNID what I have to do? Please help!

    -Gopal

    (0) 
  4. Jason White
    Hi All,
    I have had a look at the test program and it is pretty much useless – All the texts are missing and all I get is what looks like OTR context keys.  Any hints?

    I am trying to get a value back from a parameter and it seems to be impossible.

    (0) 
    1. Rich Heilman Post author
      Glad that it helped you out.  As for the functionality in Web Dynpro Java, no, it does not exist.  I can’t say for sure if this will ever be delivered by SAP or not.  Basically, at this point, it doesn’t make much sense on the java side, even if you had this functionality in the UI, how would you put it to good use?  You certainly could not use it in a WHERE clause of a SELECT statement, right?  I would not look forward to seeing this ported to the java side anytime soon.

      Thanks,

      Rich Heilman

      (0) 
      1. Abdullah Ismail
        The values from the select-options on the selection screen view, in Web Dynpro Java, could be passed to an Adaptive RFC as a table and you get the result from the backend. 

        🙂

        Regards.

        (0) 
  5. Eric Lagasca

    Hi Rich, I am confused. In the code lines after the `endmethod.` statement, where should they be placed? Also inside WDOINIT? Or some other method?

    (0) 

Leave a Reply