[ABAP] ABAP-Listausgabe in HTML wandeln

**********************************************************************
* Testausgabe
**********************************************************************
* Farbe definieren
FORMAT COLOR COL_HEADING.
* Überschriftentext
WRITE: / |Testausgabe|.
* Leerzeichen am Zeilenende, damit der Farbbalken durchgezogen wird
WRITE AT sy-linsz space.
* Farbdefinition abschalten
FORMAT COLOR OFF.

WRITE: / 'Grün' COLOR COL_POSITIVE.
WRITE: / 'Rot' COLOR COL_NEGATIVE.

ULINE.

**********************************************************************
* Aufbereitung der Listausgabe für HTML
**********************************************************************
DATA: it_list TYPE STANDARD TABLE OF abaplist WITH DEFAULT KEY.

* Listausgabe in Form einer binären internen Tabelle speichern
* Sichern einer Liste
CALL FUNCTION 'SAVE_LIST'
  TABLES
    listobject         = it_list
  EXCEPTIONS
    list_index_invalid = 1
    OTHERS             = 2.

DATA: it_html TYPE STANDARD TABLE OF w3html.

* Listausgabe -> HTML
* Converts a given listobject to html
CALL FUNCTION 'WWW_HTML_FROM_LISTOBJECT'
  TABLES
    html          = it_html
    listobject    = it_list.

* HTML-Viewer
DATA(o_hv) = NEW cl_gui_html_viewer( parent = cl_gui_container=>default_screen ).
* URL holen
DATA: lv_url TYPE swk_url.

o_hv->load_data( IMPORTING
                   assigned_url = lv_url
                 CHANGING
                   data_table   = it_html ).

* HTML-Daten anzeigen
o_hv->show_url( url      = lv_url
                in_place = abap_false ).

* cl_gui_container=>default_screen erzwingen
WRITE: space.

[ABAP] Semantisches Objekt im Fiori-Launchpad anzeigen

* Semantisches Objekt
PARAMETERS: p_semobj TYPE /ui2/v_semobj-sem_obj LOWER CASE DEFAULT 'SalesOrder'.
* Action
PARAMETERS: p_semact TYPE char80 LOWER CASE DEFAULT 'displayFactSheet'.
* Parameter
PARAMETERS: p_sempar TYPE char80 LOWER CASE DEFAULT 'SalesOrder'.
* Value
PARAMETERS: p_parval TYPE char80 LOWER CASE DEFAULT '1'.

START-OF-SELECTION.

* URL Parameter
  DATA(it_parameters) = VALUE tihttpnvp( ( name = 'sap-client'      value = sy-mandt )
                                         ( name = 'sap-ui-language' value = 'DE' )
                                         ( name = 'sap-ui-appcache' value = 'false' ) ).

* Browser URL mit HOST:PORT und Parametern zusammenbauen
  DATA(lv_url) = /ui5/cl_theme_util=>get_server_url( path         = |/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html|
                                                     parameters   = it_parameters
                                                     always_https = abap_false  ).

* Pattern:
*    #<semantic object>-<action>?<semantic object parameter>=<value1>
* Beispiel:
*    #SalesOrder-displayFactSheet?SalesOrder=1
  lv_url = |{ lv_url }#{ p_semobj }-{ p_semact }?{ p_sempar }={ p_parval }|.

* leere Standard-Toolbar ausblenden
  cl_abap_list_layout=>suppress_toolbar( ).

* URL anzeigen
  DATA(o_hv) = NEW cl_gui_html_viewer( parent = cl_gui_container=>default_screen ).
  o_hv->show_url( url = CONV swk_url( lv_url )
                  in_place = abap_true ). " im SAP-Fenster (abap_true) oder im Externen Browser (abap_false) anzeigen

* cl_gui_container=>default_screen erzwingen
  WRITE: space.

[ABAP] URL-Aufruf mit SSO-Anmeldung

* NULL-Referenz auf Container
CONSTANTS: null TYPE REF TO cl_gui_container VALUE IS INITIAL.

* aufzurufende URL
DATA(lv_url) = |https://www.google.de|.

* Browserfenster ohne Container
DATA(o_hv) = NEW cl_gui_html_viewer( parent = null ).
* SSO
o_hv->enable_sapsso( enabled = abap_true ).
* URL anzeigen
o_hv->detach_url_in_browser( CONV swk_url( lv_url ) ).
* Führt alle gesammelten OLE-Calls aus
cl_gui_cfw=>flush( ).

[ABAP] Charts mit Klasse cl_igs_chart anzeigen

* https://help.sap.com/saphelp_nwpi71/helpdata/en/46/8e558550b568bde10000000a155369/frameset.htm
* IGS-Administration: Transaktion SIGS / Report GRAPHICS_IGS_ADMIN
* Demo: GRAPHICS_IGS_CHART_TEST

TRY.
* Default RFC-Destination für IGS (Internet Graphics Server)
    DATA(lv_rfc_dest) = CONV char32( 'IGS_RFC_DEST' ).

* RFC-Destination festlegen
    cl_gfw=>its_rfc_dest = lv_rfc_dest.

* Ist der IGS Chart interpreter erreichbar?
    IF abap_true = cl_igs_data=>is_registered_type( destination = lv_rfc_dest
                                                    type        = cl_igs_chart=>interpreter_type ).

* IGS Chart-Objekt erzeugen
      DATA(o_igs_chart) = NEW cl_igs_chart( ).

      o_igs_chart->type = cl_igs_chart=>co_type_cols_3d.
      o_igs_chart->width = 640.
      o_igs_chart->height = 480.
      o_igs_chart->title = 'Test Graph'.
      o_igs_chart->title_categories = 'Monat'.
      o_igs_chart->title_values = 'Verbrauch'.
      o_igs_chart->color_scheme = cl_igs_chart=>co_scheme_default.
      o_igs_chart->legend = cl_igs_chart=>co_legend_default.

* Chart-Daten
      o_igs_chart->data = VALUE igs_data_tab(
                                              ( groupid = 'Series 1' y = 10 x = 'Januar' color = 30 datalabel = 'Label 1' extension = 'href="http://www.google.de"' )
                                              ( groupid = 'Series 2' y = 20 x = 'Januar' datalabel = 'Label 2' extension = 'href="http://www.google.de"' )
                                              ( groupid = 'Series 1' y = 15 x = 'Februar' datalabel = 'Label 3' extension = 'href="http://www.google.de"' )
                                              ( groupid = 'Series 2' y = 20 x = 'Februar' datalabel = 'Label 4' extension = 'href="http://www.google.de"' )
                                              ( groupid = 'Series 1' y = 30 x = 'März' datalabel = 'Label 5' extension = 'href="http://www.google.de"' )
                                              ( groupid = 'Series 2' y = 25 x = 'März' datalabel = 'Label 6' extension = 'href="http://www.google.de"' )
                                            ).

* erweiterte Chart-Daten
      o_igs_chart->extension = VALUE igs_ext_tab(
                                                  ( token = 'TITLE' value = 'href="http://www.google.de"' )
                                                  ( token = 'LGNDI' value = 'href="http://www.google.de"' )
                                                ).

      DATA: lv_content_type TYPE w3param-cont_type.
      DATA: lv_content_subtype TYPE w3param-cont_type.
      DATA: lv_content_length TYPE w3param-cont_len.
      DATA: it_mime_content TYPE w3mimetabtype.
      DATA: it_imagemap_html TYPE w3htmltabtype.
      DATA: lv_msg TYPE char255.

* Chart als Image + ImageMap generieren
      o_igs_chart->send( IMPORTING
                           content_type   = lv_content_type
                           content_length = lv_content_length
                           content        = it_mime_content
                           imagemap       = it_imagemap_html
                           msg_text       = lv_msg ).

* Content Typ und Content Subtyp
      SPLIT lv_content_type AT '/' INTO lv_content_type lv_content_subtype.

* HTML-Viewer erzeugen
      DATA(o_html) = NEW cl_gui_html_viewer( parent = cl_gui_container=>default_screen ).

      DATA: lv_mime_content_url TYPE w3url.

* URL zum Image erzeugen
      o_html->load_data( EXPORTING
                           type         = lv_content_type
                           subtype      = lv_content_subtype
                           size         = lv_content_length
                         IMPORTING
                           assigned_url = lv_mime_content_url
                         CHANGING
                           data_table   = it_mime_content ).

* HTML mt eingebetteten Image + Imagemap erzeugen
      DATA(it_html) = VALUE w3htmltabtype( ( line = '<html>' )
                                           ( line = '  <head>' )
                                           ( line = '    <title>IGS Chart Demo</title>' )
                                           ( line = '  </head>' )
                                           ( line = '  <body>' )
                                           ( line = '    <map name=chart>' ) ).

      APPEND LINES OF it_imagemap_html TO it_html.

      APPEND LINES OF VALUE w3htmltabtype( ( line = '    </map>' )
                                           ( line = '    <img src="' && lv_mime_content_url && '" usemap=#chart border=0>' )
                                           ( line = '  </body>' )
                                           ( line = '</html>' ) ) TO it_html.

      DATA: lv_output_url TYPE w3url.

* URL zu HTML erzeugen
      o_html->load_data( EXPORTING
                           type         = 'text'
                           subtype      = 'html'
                         IMPORTING
                           assigned_url = lv_output_url
                         CHANGING
                           data_table   = it_html ).

* HTML im HTML-Viewer anhand der URL anzeigen
      o_html->show_url( url = lv_output_url ).

* Container cl_gui_container=>default_screen erzwingen
      WRITE: / space.
    ENDIF.
  CATCH cx_root INTO DATA(e_txt).
    WRITE: / e_txt->get_text( ).
ENDTRY.

[ABAP] GOS-Container (Generic Object Services) für Anzeige von beliebigen Objekten in der Titlebar nutzen

Variante 1 (cl_gui_toolbar)

* https://www.tricktresor.de/blog/hacking-sapgui/
DATA: o_cnt_gos TYPE REF TO cl_gui_gos_container.
DATA: o_toolbar TYPE REF TO cl_gui_toolbar.

* Eventhandler für Toolbar-Buttons
CLASS lcl_events DEFINITION.
  PUBLIC SECTION.

    TYPES: ty_it_events TYPE STANDARD TABLE OF cntl_simple_event WITH DEFAULT KEY.

    CLASS-METHODS:
      on_function_selected FOR EVENT function_selected OF cl_gui_toolbar
        IMPORTING
            fcode.
ENDCLASS.

CLASS lcl_events IMPLEMENTATION.
  METHOD on_function_selected.
    MESSAGE fcode TYPE 'S'.
  ENDMETHOD.
ENDCLASS.

* Checkbox zum anzeigen / verstecken des GOS-Containers
PARAMETERS: p_chk1 AS CHECKBOX USER-COMMAND cmd1.

INITIALIZATION.
* GOS-Container mit Breite = 300
  o_cnt_gos = NEW #( width = 300 ).

* Toolbar horizontal mit Buttons
  o_toolbar = NEW #( parent       = o_cnt_gos
                     display_mode = cl_gui_toolbar=>m_mode_horizontal ).

  o_toolbar->add_button( fcode     = 'BTN1'
                         icon      = icon_open
                         butn_type = cntb_btype_button ).

  o_toolbar->add_button( fcode     = ''
                         icon      = ''
                         butn_type = cntb_btype_sep ).

  o_toolbar->add_button( fcode     = 'BTN2'
                         icon      = icon_system_save
                         butn_type = cntb_btype_button ).

  DATA(it_events) = VALUE lcl_events=>ty_it_events( ( eventid    = cl_gui_toolbar=>m_id_function_selected
                                                      appl_event = abap_true ) ).

  o_toolbar->set_registered_events( events = it_events ).

  SET HANDLER lcl_events=>on_function_selected FOR o_toolbar.

AT SELECTION-SCREEN.
  CASE sy-ucomm.
* Checkbox geklickt -> GOS-Container ein-/ausblenden
    WHEN 'CMD1'.
      o_cnt_gos->set_visible( COND abap_bool( WHEN p_chk1 = abap_true THEN abap_false ELSE abap_true ) ).
  ENDCASE.

START-OF-SELECTION.
  WRITE: / p_chk1.

Variante 2 (cl_gui_textedit)

DATA: o_cnt_gos TYPE REF TO cl_gui_gos_container.
DATA: o_edit TYPE REF TO cl_gui_textedit.

PARAMETERS: p_matnr type matnr.

INITIALIZATION.

* Fensterbreite des SAP-Fensters
  DATA(lv_x_metric) = cl_gui_cfw=>compute_metric_from_dynp( metric = cl_gui_control=>metric_pixel
                                                            x_or_y = 'X'
                                                            in = sy-scols ).

* GOS-Container mit akt. Fensterbreite
  o_cnt_gos = NEW #( width = lv_x_metric ).

* Editorzeile im Titel
  o_edit = NEW #( wordwrap_mode              = cl_gui_textedit=>wordwrap_at_windowborder
                  wordwrap_to_linebreak_mode = cl_gui_textedit=>true
                  parent                     = o_cnt_gos ).

* feste Zeichenbreite
  o_edit->set_font_fixed( mode = cl_gui_textedit=>true ).
* Anzeige von Toolbar und Statusbar des Texteditors unterdrücken
  o_edit->set_toolbar_mode( toolbar_mode = cl_gui_textedit=>false ).
  o_edit->set_statusbar_mode( statusbar_mode = cl_gui_textedit=>false ).
  o_edit->set_textstream( 'Testtext' ).

START-OF-SELECTION.
  IF o_edit IS BOUND.
* Text aus Editorzeile holen
    DATA(lv_text) = ||.

    o_edit->get_textstream( IMPORTING text = lv_text ).
    cl_gui_cfw=>flush( ).

    WRITE: / lv_text.
  ENDIF.

Variante 3 (cl_gui_html_viewer)

DATA: o_cnt_gos TYPE REF TO cl_gui_gos_container.
DATA: o_html TYPE REF TO cl_gui_html_viewer.

PARAMETERS: p_matnr TYPE matnr.

INITIALIZATION.

* Zeilen und Spalten in Pixel umrechnen
  DATA(lv_x_metric) = cl_gui_cfw=>compute_metric_from_dynp( metric = cl_gui_control=>metric_pixel
                                                            x_or_y = 'X'
                                                            in = sy-scols ).

* GOS-Container mit akt. Fensterbreite
  o_cnt_gos = NEW #( width = lv_x_metric ).

* HTML im Titlebar anzeigen
  o_html = NEW cl_gui_html_viewer( parent = o_cnt_gos ).

  DATA(it_html) = VALUE w3_htmltab( ( '<html><head><style>body { margin: 0; background-color: #00BBCC; color: #001122; font: 18px "Courier" }</style></head>' )
                                    ( '<body>Test</body></html>' ) ).
  DATA: lv_url TYPE swk_url.

  o_html->load_data( IMPORTING
                      assigned_url = lv_url
                    CHANGING
                      data_table   = it_html ).

  o_html->show_url( lv_url ).

START-OF-SELECTION.
  WRITE: / p_matnr.

[ABAP] Konvertierung HTML-String nach HTML-itab

* Konvertierungsklasse HTML-String nach HTML-itab
CLASS lcl_html_str_to_itab DEFINITION FINAL.
  PUBLIC SECTION.

* Zeilenlänge für HTML-itab
    CONSTANTS: co_html_length TYPE i VALUE 1024.
* HTML-itab
    TYPES: ty_html_line TYPE c LENGTH co_html_length.
    TYPES: ty_it_html TYPE STANDARD TABLE OF ty_html_line WITH DEFAULT KEY.

    CLASS-METHODS:
      convert
        IMPORTING
                  i_html_str        TYPE string
        RETURNING VALUE(rv_it_html) TYPE ty_it_html.

ENDCLASS.

CLASS lcl_html_str_to_itab IMPLEMENTATION.
**********************************************************************
* Konvertiert HTML-String nach HTML-itab
**********************************************************************
* i_html_str -> HTML-String
* rv_it_html <- HTML-itab
**********************************************************************
  METHOD convert.

    DATA(lv_right) = i_html_str.

    WHILE strlen( lv_right ) >= co_html_length.
* linker Teil
      DATA(lv_left) = substring( val = lv_right off = 0 len = co_html_length ).
      APPEND lv_left TO rv_it_html.

* Rest
      lv_right = substring( val = lv_right off = co_html_length len = strlen( lv_right ) - co_html_length ).
    ENDWHILE.

* Rest anfügen
    IF strlen( lv_right ) > 0.
      APPEND lv_right TO rv_it_html.
    ENDIF.

  ENDMETHOD.

ENDCLASS.

START-OF-SELECTION.
* Daten holen
  SELECT * FROM tnapr INTO TABLE @DATA(it_tnapr).

* HTML-Daten aus itab generieren
  DATA(lv_html) = cl_demo_output=>get( it_tnapr ).

* HTML-String nach HTML itab konvertieren
  DATA(it_html) = lcl_html_str_to_itab=>convert( lv_html  ).

* HTML-Viewer
  DATA(o_hv) = NEW cl_gui_html_viewer( parent = cl_gui_container=>default_screen ).
* URL holen
  DATA: lv_url type swk_url.

  o_hv->load_data( IMPORTING
                     assigned_url = lv_url
                   CHANGING
                     data_table   = it_html ).

* Daten anzeigen
  o_hv->show_url( url      = lv_url
                  in_place = abap_true ). " im SAP-Fenster (abap_true) oder im Externen Browser (abap_false) anzeigen

* cl_gui_container=>default_screen erzwingen
  WRITE: space.

[ABAP] PDF im Browserfenster anzeigen

TRY.
    DATA: it_sel_filetab TYPE filetable.
    DATA: ret_code TYPE i.
    DATA: lv_action TYPE i.

* FileOpen-Dialog für Dateiauswahl anzeigen
    cl_gui_frontend_services=>file_open_dialog( EXPORTING
                                                  window_title            = 'PDF-Datei öffnen'
                                                  multiselection          = abap_false
                                                CHANGING
                                                  file_table              = it_sel_filetab
                                                  rc                      = ret_code    " Anzahl ausgewählte Dateien, -1 bei Fehler
                                                  user_action             = lv_action ).


    IF lv_action = cl_gui_frontend_services=>action_ok.
* Browserfenster erzeugen
      DATA(o_html) = NEW cl_gui_html_viewer( parent = cl_gui_container=>default_screen ).

* PDF im ABAP-Fenster anzeigen
      o_html->show_url( url      = it_sel_filetab[ 1 ]-filename
                        in_place = abap_true ).

* leere SAP-Toolbar ausblenden
      cl_abap_list_layout=>suppress_toolbar( ).

* cl_gui_container=>default_screen erzwingen
      WRITE: / space.
    ENDIF.

  CATCH cx_root INTO DATA(e_txt).
    WRITE: / e_txt->get_text( ).
ENDTRY.

[ABAP] HTML-Code aus interner Tabelle generieren

CLASS lcl_itab_to_html DEFINITION FINAL.
  PUBLIC SECTION.
    TYPES: BEGIN OF ty_fields,
             field TYPE fieldname,
             width TYPE char20,
             text  TYPE char80,
           END OF ty_fields.

    TYPES: ty_it_fields TYPE STANDARD TABLE OF ty_fields WITH DEFAULT KEY.

    CLASS-METHODS:
      convert_itab_to_html_table
        IMPORTING
                  i_fields       TYPE ty_it_fields
                  i_itab         TYPE STANDARD TABLE
        RETURNING VALUE(rv_html) TYPE html_table.

ENDCLASS.

CLASS lcl_itab_to_html IMPLEMENTATION.
  METHOD convert_itab_to_html_table.

    APPEND '<table style="width: 100%; background: #ffffff; word-wrap: break-word; table-layout: fixed; font-family: Courier; font-size: 12px;">' TO rv_html.
    APPEND '  <thead>' TO rv_html.
    APPEND '    <tr>' TO rv_html.

    LOOP AT i_fields ASSIGNING FIELD-SYMBOL(<field>).
      IF <field>-width IS INITIAL.
        APPEND |      <th style="background: #eeeeee;"> { <field>-text }</th>| TO rv_html.
      ELSE.
        APPEND |      <th style="background: #eeeeee; width: { <field>-width };"> { <field>-text }</th>| TO rv_html.
      ENDIF.
    ENDLOOP.

    APPEND '    </tr>' TO rv_html.
    APPEND '  </thead>' TO rv_html.
    APPEND '  <tbody>' TO rv_html.

    FIELD-SYMBOLS: <value> TYPE any.

    LOOP AT i_itab ASSIGNING FIELD-SYMBOL(<data_line>).

      APPEND '    <tr>' TO rv_html.

      LOOP AT i_fields ASSIGNING FIELD-SYMBOL(<field_b>).
        ASSIGN COMPONENT <field_b>-field OF STRUCTURE <data_line> TO <value>.
        IF <value> IS ASSIGNED.
          APPEND |      <td>{ <value> }</td>| TO rv_html.
        ENDIF.
      ENDLOOP.

      APPEND '    </tr>' TO rv_html.
    ENDLOOP.

    APPEND '  </tbody>' TO rv_html.
    APPEND '</table>' TO rv_html.

  ENDMETHOD.

ENDCLASS.

START-OF-SELECTION.
* HTML-Viewer
  DATA(o_html) = NEW cl_gui_html_viewer( parent = cl_gui_docking_container=>default_screen ).

  DATA: it_mara TYPE STANDARD TABLE OF marav WITH DEFAULT KEY.

  SELECT * FROM marav INTO TABLE @it_mara.

  IF sy-subrc = 0.
* Felder für die Anzeige konfigurieren
    DATA(it_fields) = VALUE lcl_itab_to_html=>ty_it_fields( ( text  = 'Materialnummer'
                                                              field = 'MATNR'
                                                              width = '20%' )

                                                            ( text  = 'Kurztext'
                                                              field = 'MAKTX'
                                                              width = '20%' )

                                                            ( text  = 'Materialart'
                                                              field = 'MTART'
                                                              width = '20%' )

                                                            ( text  = 'Materialklasse'
                                                              field = 'MATKL'
                                                              width = '20%' )

                                                            ( text  = 'Mengeneinheit'
                                                              field = 'MEINS'
                                                              width = '10%' )

                                                            ( text  = 'Löschkennzeichen'
                                                              field = 'LVORM'
                                                              width = '10%' ) ).


* HTML aus den Quelldaten erzeugen
    DATA(it_html) = lcl_itab_to_html=>convert_itab_to_html_table( i_fields = it_fields
                                                                  i_itab   = it_mara ).

* URL zu HTML holen
    DATA: lv_url TYPE swk_url.

    o_html->load_data( IMPORTING
                         assigned_url = lv_url
                       CHANGING
                         data_table   = it_html ).

* HTML anzeigen
    o_html->show_url( url = lv_url ).

* leere SAP-Toolbar ausblenden
    cl_abap_list_layout=>suppress_toolbar( ).

* cl_gui_docking_container=>default_screen erzwingen
    WRITE: space.

  ENDIF.

[ABAP] Externe Webseite (HTML) anzeigen

TYPES: ty_it_events TYPE STANDARD TABLE OF cntl_simple_event WITH DEFAULT KEY.

PARAMETERS: p_url TYPE string LOWER CASE DEFAULT 'http://www.google.de'.

CLASS lcl_events DEFINITION.
  PUBLIC SECTION.

    CLASS-METHODS:
      on_navigate_complete FOR EVENT navigate_complete OF cl_gui_html_viewer
        IMPORTING
            url
            sender.

    CLASS-METHODS:
      on_sapevent FOR EVENT sapevent OF cl_gui_html_viewer
        IMPORTING
            action
            frame
            getdata
            postdata
            query_table
            sender.
ENDCLASS.

CLASS lcl_events IMPLEMENTATION.

* nach Aufbau des Dokuments
  METHOD on_navigate_complete.
    MESSAGE |Loaded: { url }| TYPE 'S'.
  ENDMETHOD.

* Link- oder Button-Klick
  METHOD on_sapevent.
    MESSAGE |Action: { action }, get: { getdata }| TYPE 'S'.
  ENDMETHOD.
ENDCLASS.

INITIALIZATION.

  DATA(o_dock) = NEW cl_gui_docking_container( ratio = 80
                                               side = cl_gui_docking_container=>dock_at_bottom
                                               no_autodef_progid_dynnr = 'X' ).

* HTML-Viewer
  DATA(o_html) = NEW cl_gui_html_viewer( parent = o_dock ).

* Eventtypten müssen gesondert registriert werden
  DATA(it_events) = VALUE ty_it_events( ( eventid = cl_gui_html_viewer=>m_id_navigate_complete
                                          appl_event = abap_true )
                                        ( eventid = cl_gui_html_viewer=>m_id_sapevent
                                          appl_event = abap_true ) ).

  o_html->set_registered_events( events = it_events ).

* Eventhandler registrieren
  SET HANDLER lcl_events=>on_navigate_complete FOR o_html.
  SET HANDLER lcl_events=>on_sapevent FOR o_html.

* HTML anzeigen
  o_html->show_url( url = |{ p_url }| ).

[ABAP] Selektionsbild mit HTML-Elementen, Dateneingabe, SALV-Grid, CSS, Eventhandling

**********************************************************************
*
* Datentypen, Variablen, Konstanten
*
**********************************************************************
TYPES: ty_it_events TYPE STANDARD TABLE OF cntl_simple_event WITH DEFAULT KEY.

CONSTANTS: co_carrid TYPE string VALUE 'carrid'.
CONSTANTS: co_airpto TYPE string VALUE 'airpto'.

DATA: o_splitter_main TYPE REF TO cl_gui_splitter_container.
DATA: o_container_l   TYPE REF TO cl_gui_container.
DATA: o_container_r   TYPE REF TO cl_gui_container.
DATA: o_html TYPE REF TO cl_gui_html_viewer.
DATA: o_salv TYPE REF TO cl_salv_table.

DATA: it_spfli TYPE STANDARD TABLE OF spfli WITH DEFAULT KEY.
DATA: it_salv_spfli TYPE STANDARD TABLE OF spfli WITH DEFAULT KEY.
DATA: it_sairport TYPE STANDARD TABLE OF sairport WITH DEFAULT KEY.

DATA: it_html TYPE html_table.
**********************************************************************
*
* Eventhandler
*
**********************************************************************
CLASS lcl_html_events DEFINITION.
  PUBLIC SECTION.
    CLASS-METHODS:
      on_sapevent FOR EVENT sapevent OF cl_gui_html_viewer
        IMPORTING
            action
            frame
            getdata
            postdata
            query_table
            sender.
ENDCLASS.

CLASS lcl_html_events IMPLEMENTATION.
* Link- oder Button-Klick
  METHOD on_sapevent.
    IF o_salv IS BOUND.
      TRY.
* Element in der Nodes-Tabelle lesen
          ASSIGN query_table[ name = co_carrid ] TO FIELD-SYMBOL(<carrid>).
          ASSIGN query_table[ name = co_airpto ] TO FIELD-SYMBOL(<airpto>).

          IF <carrid> IS ASSIGNED AND <airpto> IS ASSIGNED.
* iTab für SALV-Table neu aufbauen, abhängig von der Eingabe in den Formularfeldern
            it_salv_spfli = VALUE #( FOR <f> IN it_spfli WHERE ( ( carrid = <carrid>-value ) AND ( airpto = <airpto>-value ) )
                                     ( <f> )
                                   ).

          ENDIF.

* SALV-Table neu anzeigen
          o_salv->refresh( ).
        CATCH cx_root INTO DATA(e_txt).
          MESSAGE e_txt->get_text( ) TYPE 'S'.
      ENDTRY.
    ENDIF.
  ENDMETHOD.
ENDCLASS.
**********************************************************************
*
* SELECTION-SCREEN
*
**********************************************************************
* leeres Selektionsbild als Dummy für die Container-Objekte (o_splitter_main ...)
SELECTION-SCREEN BEGIN OF SCREEN 2000.
SELECTION-SCREEN END OF SCREEN 2000.
**********************************************************************
*
* INITIALIZATION
*
**********************************************************************
INITIALIZATION.
* Daten holen
  SELECT * INTO TABLE it_spfli FROM spfli.
  SELECT * INTO TABLE it_sairport FROM sairport.

* HTML-Code mit Buttons und Forms
  it_html = VALUE #(
                     ( |<html>| )
                     ( |  <head>| )
                     ( |    <meta http-equiv="content-type" content="text/html; charset=utf-8">| )
                     ( |    <script type="text/javascript">| )
                     ( |      function onKeyDown(f)| )
                     ( |      \{ if(event.keyCode == 13)| )
                     ( |         \{ document[f.name].submit();| )
                     ( |         \}| )
                     ( |      \}| )
                     ( |    </script>| )
                     ( |    <style type="text/css">| )
                     ( |       body \{| )
                     ( |         font-family: Courier New;| )
                     ( |         font-size: 13px;| )
                     ( |         font-style: normal;| )
                     ( |         font-variant: normal;| )
                     ( |         font-weight: 400;| )
                     ( |         line-height: 13px;| )
                     ( |       \}| )
                     ( |       form \{| )
                     ( |         background: lightblue;| )
                     ( |       \}| )
                     ( |       label \{| )
                     ( |         text-align: right;| )
                     ( |         line-height: 1.5;| )
                     ( |         float: left;| )
                     ( |         width: 40%;| )
                     ( |       \}| )
                     ( |       input \{| )
                     ( |         margin: 0 0 1em .2em;| )
                     ( |         padding: .2em .5em;| )
                     ( |         background-color: #fffbf0;| )
                     ( |         border: 1px solid #e7c157;| )
                     ( |         float: left;| )
                     ( |         width: 40%;| )
                     ( |         font-family: Courier New;| )
                     ( |         font-size: 13px;| )
                     ( |         font-style: normal;| )
                     ( |         font-variant: normal;| )
                     ( |         font-weight: 400;| )
                     ( |         line-height: 13px;| )
                     ( |       \}| )
                     ( |       select \{| )
                     ( |         margin: 0 0 1em .2em;| )
                     ( |         padding: .2em .5em;| )
                     ( |         background-color: #fffbf0;| )
                     ( |         border: 1px solid #e7c157;| )
                     ( |         float: left;| )
                     ( |         width: 40%;| )
                     ( |         font-family: Courier New;| )
                     ( |         font-size: 13px;| )
                     ( |         font-style: normal;| )
                     ( |         font-variant: normal;| )
                     ( |         font-weight: 400;| )
                     ( |         line-height: 13px;| )
                     ( |       \}| )
                     ( |       button \{| )
                     ( |         margin-top: 1.5em;| )
                     ( |         float: right;| )
                     ( |       \}| )
                     ( |      </style>| )
                     ( |  </head>| )
                     ( |  <body>| )
                     ( |    <form name="INPUT" accept-charset="utf-8" method="post" action="SAPEVENT:INPUT_FIELDS">| )
                     ( |      <br>| )
                     ( |      <label for="{ co_carrid }">Fluggesellschaft:</label>| )
                     ( |      <input type="text" name="{ co_carrid }" value="LH" onKeyDown="onKeyDown(this.form);">| )
                     ( |      <br>| )
                     ( |      <label for="{ co_airpto }">Zielflughafen:</label>| )
                     ( |      <select name="{ co_airpto }" value="JFK">| )
                   ).

  LOOP AT it_sairport ASSIGNING FIELD-SYMBOL(<a>).
    IF <a>-id = 'JFK'.
      APPEND |        <option selected>{ <a>-id }</option>| TO it_html.
    ELSE.
      APPEND |        <option>{ <a>-id }</option>| TO it_html.
    ENDIF.
  ENDLOOP.

  it_html = VALUE #( BASE it_html
                     ( |      </select>| )
                     ( |      <br>| )
                     ( |      <button type="submit" title="Anzeigen">Anzeigen</button>| )
                     ( |      <br>| )
                     ( |      <br>| )
                     ( |      <br>| )
                     ( |      <br>| )
                     ( |    </form>| )
                     ( |  </body>| )
                     ( |</html>| )
                   ).

**********************************************************************
*
* AT SELECTION-SCREEN OUTPUT
*
**********************************************************************
AT SELECTION-SCREEN OUTPUT.
* Doppelte Objekterzeugung unterbinden
  IF NOT o_splitter_main IS BOUND.
* Splitter auf default_screen (SELECTION-SCREEN 2000) erzeugen
    o_splitter_main = NEW #( parent  = cl_gui_container=>default_screen
                             rows    = 1
                             columns = 2 ).

* Breite in % (linke Spalte für den Tree)
    o_splitter_main->set_column_width( id = 1 width = 20 ).

* linken und rechten Splitcontainer holen
    o_container_l = o_splitter_main->get_container( row = 1 column = 1 ).
    o_container_r = o_splitter_main->get_container( row = 1 column = 2 ).

* HTML-Viewer
    o_html = NEW cl_gui_html_viewer( parent = o_container_l ).

* Eventtypten müssen gesondert registriert werden
    DATA(it_events) = VALUE ty_it_events( ( eventid    = cl_gui_html_viewer=>m_id_sapevent
                                            appl_event = abap_true ) ).

    o_html->set_registered_events( events = it_events ).

* Eventhandler registrieren
    SET HANDLER lcl_html_events=>on_sapevent FOR o_html.

* URL zu HTML holen
    DATA: lv_url TYPE skwf_url.

    o_html->load_data( IMPORTING
                         assigned_url = lv_url
                       CHANGING
                         data_table   = it_html ).

* HTML anzeigen
    o_html->show_url( url = lv_url ).

    it_salv_spfli = it_spfli.

* SALV-Table für Anzeige der Daten
    cl_salv_table=>factory( EXPORTING
                              r_container    = o_container_r
                            IMPORTING
                              r_salv_table   = o_salv
                            CHANGING
                              t_table        = it_salv_spfli ).

    o_salv->get_display_settings( )->set_striped_pattern( abap_true ).
    o_salv->get_columns( )->set_optimize( abap_true ).
    o_salv->get_functions( )->set_all( ).
    o_salv->get_selections( )->set_selection_mode( if_salv_c_selection_mode=>row_column ).
    o_salv->display( ).
  ENDIF.
**********************************************************************
*
* AT SELECTION-SCREEN
*
**********************************************************************
AT SELECTION-SCREEN.
* wenn "Ausführen" (F8) geklickt wurde
  IF sy-ucomm = 'CRET'.
* Selektionbild 2000 wieder anzeigen
    CALL SELECTION-SCREEN 2000.
  ENDIF.
**********************************************************************
*
* START-OF-SELECTION
*
**********************************************************************
START-OF-SELECTION.
* leeres Selektionbild 2000 anzeigen
  CALL SELECTION-SCREEN 2000.