Startseite Beiträge getaggt mit "CSS"

Schlagwort: CSS

[ABAP] CSS-Code als ABAP-INCLUDE speichern und laden

Über die Nutzung von Includes ist es möglich beliebigen Code im SAP abzulegen und darauf zuzugreifen. Folgende Schritte sind notwendig:

  • SE80 -> neues INCLUDE anlegen (Bsp.: ZCSSINCLUDE)
  • CSS-Code im INCLUDE eintragen
  • Aktvieren! (Ja, das funktioniert.)
  • CSS-Code (INCLUDE) im ABAP-Code lesen
* Name des INCLUDEs mit dem CSS-Code
CONSTANTS: co_cssinclude TYPE char12 VALUE 'ZCSSINCLUDE'.
* String für CSS-Daten
DATA: lv_css TYPE string.
	
* Prüfen, ob INCLUDE im System (TADIR) aktiv vorhanden
SELECT SINGLE obj_name
  INTO @DATA(lv_obj_name)
  FROM tadir
  WHERE obj_name = @co_w3css
    AND pgmid    = 'R3TR'
    AND object   = 'PROG'.

IF sy-subrc = 0.

* Stringtab für Code
  DATA: it_incl_code TYPE stringtab.

* Code des INCLUDEs lesen
  READ REPORT co_w3css INTO it_incl_code.

  IF sy-subrc = 0.
* String-Tabelle mit CSS-Code in String wandeln, Trennzeichen ist CRLF
    lv_css = REDUCE string( INIT s = ||
                            FOR <s> IN it_incl_code
                            NEXT s = COND #( WHEN s IS INITIAL THEN |{ <s> }| ELSE |{ s }{ cl_abap_char_utilities=>cr_lf }{ <s> }| ) ).
  ENDIF.
ENDIF.

* HTML mit CSS-INCLUDE
DATA(lv_html) = '<!DOCTYPE html>' &&
                '<html>' &&
                '<title>Lagermaterialkatalog</title>' &&
                '<meta name="viewport" content="width=device-width, initial-scale=1">' &&
                '<style>' && lv_css && '</style>' &&
                '<body>' &&
                '</body>' &&
                '</html>'.

[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.