How to create a screen with alv tree like at se80 t-code?

[shiz0frenik]

HI,experts .
How can I create a screen with an ALV tree similar to the SE80 transaction code? I want to create a movable panel on the left side, and when I click on an item, something should be displayed on the right side, just like in the SE80 transaction. Can anyone tell me how the screen logic should work? And how many screens i need to create?"

[Sandra_Rossi]

Comment posted as an answer.

[Sandra_Rossi · Accepted solution]

SE80 is using a docking container (CL_GUI_DOCKING_CONTAINER) on the left of a classic Dynpro screen (so, just one Dynpro screen is needed). In the container, you will include a Tree control (any subclass of CL_TREE_CONTROL_BASE, e.g. CL_GUI_ALV_TREE if you want something ALV-oriented).

EDIT:

The width of the two panels can be adjusted by the user ("movable panel").

For information, you may add other docking containers at any side of the classic Dynpro screen.

Note that the docking container can be initiated only by the classic Dynpro screen; you cannot embed any transaction you want, if this transaction doesn't handle docking containers.

You should NOT use a splitter container (CL_GUI_SPLITTER_CONTAINER) because it cannot display a classic Dynpro screen on the right part like in SE80. A splitter container is to place two or more GUI controls all together. For information, SE80 uses one, but only inside the left docking container, to place vertically several controls, which are usually from top to bottom: one vertical toolbar control with one button by browser, one HTML control to enter the object type and name, one column tree control to display the sub-objects.

Toolbar: CL_GUI_CONTAINER_BAR_WB (which manages internally a splitter control with several vertical CL_GUI_TOOLBAR controls of one button each)

HTML control: CL_GUI_HTML_VIEWER

Column tree control: CL_GUI_COLUMN_TREE

[shiz0frenik]

Could u tell me how to display an alv grid at the right side.
I initialization here, but it's not triggered

MODULE STATUS_0100 OUTPUT.
  SET PF-STATUS '100'.
  SET TITLEBAR '100'.



TYPES : BEGIN OF struct_of_tree,
          name type char50,
  END OF struct_of_tree.

DATA : lt_of_tree type TABLE OF struct_of_tree,
       ls_of_tree type struct_of_tree.

DATA :  p_node_key type lvc_nkey,
       p_relat_key type lvc_nkey.
DATA : mo_controller type ref to lcl_controller.
DATA : ls_layo type LVC_S_layn.
DATA : l_hierarchy_header type treev_hhdr.



CREATE OBJECT g_container
      EXPORTING
        extension                   = 420
*       ratio                       = 30
      EXCEPTIONS
        cntl_error                  = 0
        cntl_system_error           = 0
        create_error                = 0
        lifetime_error              = 0
        lifetime_dynpro_dynpro_link = 0
        OTHERS                      = 0.
    IF sy-subrc <> 0.
    ENDIF.




      create object obj_tree
       EXPORTING
         PARENT = g_container
         node_selection_mode = cl_gui_column_tree=>node_sel_mode_single
         NO_HTML_HEADER = 'X'
         NO_TOOLBAR = 'X'.


     create object lo_alv
       EXPORTING
         i_parent = g_container.


CREATE OBJECT mo_controller.
set HANDLER mo_controller->ITEM_DOUBLE_CLICK FOR obj_tree.


  DATA: lt_events TYPE cntl_simple_events,
        l_event TYPE cntl_simple_event.
call method obj_tree->get_registered_events
      importing events = lt_events.


  l_event-eventid = cl_gui_column_tree=>eventid_node_double_click.
  append l_event to lt_events.
  l_event-eventid = cl_gui_column_tree=>eventid_item_double_CLICK.
  append l_event to lt_events.

* (If you do not these events will be deregistered!!!).
* You do not have to register events of the toolbar again.

* Register additional events for your own purposes:

* register events on frontend
  CALL METHOD obj_tree->set_registered_events
    EXPORTING
      events = lt_events
    EXCEPTIONS
      cntl_error                = 1
      cntl_system_error         = 2
      illegal_event_combination = 3.
  IF sy-subrc <> 0.
    MESSAGE x208(00) WITH 'ERROR'.     "#EC NOTEXT
  ENDIF.
data  ls_fieldcat TYPE lvc_s_fcat.


* Define the field details
ls_fieldcat-fieldname = 'NAME'.
ls_fieldcat-coltext = 'Quant'.
ls_fieldcat-outputlen = 17.
ls_fieldcat-seltext = 'Quant'.
ls_fieldcat-datatype = 'INT'.
ls_fieldcat-intlen = 5.
ls_fieldcat-decimals = 0.
APPEND ls_fieldcat TO gt_fieldcat.



  l_hierarchy_header-heading = 'Имя'(100).
  l_hierarchy_header-tooltip = 'Кол-во'(200).
  l_hierarchy_header-width = 30.
 l_hierarchy_header-width_pix = ' '.


  call method obj_tree->set_table_for_first_display
    exporting
      is_hierarchy_header = l_hierarchy_header
    changing
      it_outtab           = lt_of_tree
            IT_FIELDCATALOG = gt_fieldcat.

   CALL METHOD obj_tree->add_node
    EXPORTING
       i_relat_node_key = p_relat_key
      i_relationship   = cl_gui_column_tree=>relat_last_child
      i_node_text      = 'Input'
      is_node_layout = ls_layo
    importing
      e_new_node_key   = p_node_key.

   CALL METHOD obj_tree->add_node
    EXPORTING
       i_relat_node_key = p_relat_key
      i_relationship   = cl_gui_column_tree=>relat_last_child
      i_node_text      = 'Output'

      is_node_layout = ls_layo
    importing
      e_new_node_key   = p_node_key.

       call method obj_tree->frontend_update.
ENDMODULE.       

and after double_click on item of tree try to display

class lcl_controller DEFINITION FINAL.
  PUBLIC SECTION.
    METHODS : ITEM_DOUBLE_CLICK
        FOR EVENT ITEM_DOUBLE_CLICK OF cl_gui_alv_tree
        IMPORTING node_key FIELDNAME.
    ENDCLASS.
 class lcl_controller IMPLEMENTATION.
  METHOD ITEM_DOUBLE_CLICK.
    MESSAGE '123' TYPE 'I'.

*****************
 w_variant-report = sy-repid.
 ls_layout-cwidth_opt = 'X'.
 ls_layout-grid_title = ''.
    CALL FUNCTION 'LVC_FIELDCATALOG_MERGE'
      EXPORTING
        I_STRUCTURE_NAME       = 'SFLIGHT'
        I_BYPASSING_BUFFER     = 'X'
      CHANGING
        CT_FIELDCAT            = gt_fieldcat2
      EXCEPTIONS
        INCONSISTENT_INTERFACE = 1
        PROGRAM_ERROR          = 2
        OTHERS                 = 3.
    IF SY-SUBRC <> 0.
      MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
              WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
    ENDIF.
***********
***********.

       lo_alv->set_table_for_first_display(
          EXPORTING
                    is_layout       = ls_layout
                      i_save          = 'A'
                      is_variant      = w_variant
          CHANGING
                    it_outtab       = lt_tab[]
                    it_fieldcatalog = gt_fieldcat2

                                          ).
  ENDMETHOD.
  endclass.

    data : lt_tab type TABLE OF sflight.
    data :  lo_alv              TYPE REF TO cl_gui_alv_grid,
           ls_layout           TYPE lvc_s_layo,
            w_variant    TYPE disvariant,
             gt_fieldcat2         TYPE lvc_t_fcat.

DATA : obj_tree      type REF TO cl_gui_alv_tree,
       main_container type ref to cl_gui_custom_container,
       g_container   type ref to cl_gui_docking_container,
       g_container2   type ref to cl_gui_docking_container,
       go_navigation_splitter TYPE REF TO cl_gui_splitter_container,
        gt_fieldcat         TYPE lvc_t_fcat.

[Sandra_Rossi]

Both Tree and ALV controls are shown in the same parent container G_CONTAINER, consequently only the first control will be shown in the container G_CONTAINER.

[shiz0frenik]

So i need to use smth different? Or i need to create another docking container and connect it to first?

[shiz0frenik]

When tree container becomes less alv should become bigger and vice versa

[Sandra_Rossi]

If I understand well your question, you want to display the Tree control in the left and the ALV control in the right. Left and right = two different containers. Your first concern is about the containers, but you didn't explain what solution you have used, and you didn't post the code.

Also, your question was about to mimic SE80, but your requirement seems to be much simpler because you want a GUI control on the right (specifically an ALV), not a Dynpro screen like in SE80, hence a Docking container is not required in that case.

[shiz0frenik]

I've created an cl_docking_container and CL_GUI_ALV_TREE, and it work fine.
Could u tell me how to trace events now?
I'm try to trace an ITEM_DOUBLE_CLICK event here.

MODULE STATUS_0100 OUTPUT.
  SET PF-STATUS '100'.
  SET TITLEBAR '100'.


DATA : obj_tree      type REF TO cl_gui_alv_tree,
       g_container   type ref to cl_gui_docking_container,
        gt_fieldcat         TYPE lvc_t_fcat.
TYPES : BEGIN OF struct_of_tree,
          name type char50,
  END OF struct_of_tree.

DATA : lt_of_tree type TABLE OF struct_of_tree,
       ls_of_tree type struct_of_tree.

DATA :  p_node_key type lvc_nkey,
       p_relat_key type lvc_nkey.
DATA : mo_controller type ref to lcl_controller.
DATA : ls_layo type LVC_S_layn.
DATA : l_hierarchy_header type treev_hhdr.
      CREATE OBJECT g_container
      EXPORTING
        name = 'GRID'
        side  = cl_gui_docking_container=>dock_at_left
                    ratio = 13.

      create object obj_tree
       EXPORTING
         PARENT = g_container
         node_selection_mode = cl_gui_column_tree=>node_sel_mode_single
         NO_HTML_HEADER = 'X'
         NO_TOOLBAR = 'X'.


CREATE OBJECT mo_controller.
set HANDLER mo_controller->ITEM_DOUBLE_CLICK FOR obj_tree.


data  ls_fieldcat TYPE lvc_s_fcat.

* Define the field details
ls_fieldcat-fieldname = 'NAME'.
ls_fieldcat-coltext = 'Quant'.
ls_fieldcat-outputlen = 17.
ls_fieldcat-seltext = 'Quant'.
ls_fieldcat-datatype = 'INT'.
ls_fieldcat-intlen = 5.
ls_fieldcat-decimals = 0.
APPEND ls_fieldcat TO gt_fieldcat.



  l_hierarchy_header-heading = 'Имя'(100).
  l_hierarchy_header-tooltip = 'Кол-во'(200).
  l_hierarchy_header-width = 30.
 l_hierarchy_header-width_pix = ' '.


  call method obj_tree->set_table_for_first_display
    exporting
      is_hierarchy_header = l_hierarchy_header
    changing
      it_outtab           = lt_of_tree
            IT_FIELDCATALOG = gt_fieldcat.

   CALL METHOD obj_tree->add_node
    EXPORTING
       i_relat_node_key = p_relat_key
      i_relationship   = cl_gui_column_tree=>relat_last_child
      i_node_text      = 'Input'
      is_node_layout = ls_layo
    importing
      e_new_node_key   = p_node_key.

   CALL METHOD obj_tree->add_node
    EXPORTING
       i_relat_node_key = p_relat_key
      i_relationship   = cl_gui_column_tree=>relat_last_child
      i_node_text      = 'Output'

      is_node_layout = ls_layo
    importing
      e_new_node_key   = p_node_key.

       call method obj_tree->frontend_update.
ENDMODULE.                 " STATUS_0100  OUTPUT

class lcl_controller DEFINITION FINAL.
  PUBLIC SECTION.
    METHODS : ITEM_DOUBLE_CLICK
        FOR EVENT ITEM_DOUBLE_CLICK OF cl_gui_alv_tree
        IMPORTING node_key FIELDNAME.
    ENDCLASS.
 class lcl_controller IMPLEMENTATION.
  METHOD ITEM_DOUBLE_CLICK.
    MESSAGE '123' TYPE 'I'.
  ENDMETHOD.
  endclass.

But it's not triggered.

[Sandra_Rossi]

You're missing SET_REGISTERED_EVENTS. There are a few demo programs named BCALV_TREE_*.

[Nadeem_Mohammed]

Use the class CL_GUI_SPLITTER_CONTAINER  to create a splitter container. This allows you to create movable panels.

[Sandra_Rossi]

The main SE80 container is a docking container CL_GUI_DOCKING_CONTAINER with the same movable feature, which is the only one capable (*) to "split" a classic Dynpro screen and a control and have them as "movable panels". A splitter container cannot have a classic Dynpro inside it.

(*) EDIT: there is another solution since 7.02, which is different from the SE80 solution but should be the same experience for the user, which consists in defining a classic Dynpro screen with a Dynpro Splitter area (CL_DYNPRO_SPLITTER / demo program demo_dynpro_splitter_control), with on the left part a Custom Container (CL_GUI_CUSTOM_CONTAINER) containing whatever GUI control you want, and on the right part whatever you want.