Pimp My Message [4] – W3CSS
Die Darstellung ist immer noch langweilig. das will ich jetzt ändern. Mit W3CSS…
W3CSS
Um die Darstellung von Langtexten generell (hier nur am Beispiel einer Nachricht) schöner und besser sichtbar zu machen, habe ich W3CSS entdeckt. W3CSS ist ein Framework, mit dem man mit einfachen Befehlen die Darstellung von HTML-Seiten besser machen kann, ohne dass man detaillierte CSS-Definitionen vornehmen muss.
Es lassen sich zum Beispiel einfach Badges darstellen:
<p>Updates <span class="w3-badge">9</span></p>
HTML
Um die Darstellung im HTML-Format mit W3CSS aufzuhübschen, müssen ein paar Definitionen in den HTML-Text eingebaut werden. Die Umwandlung erfolgt mit Funktionsbaustein CONVERT_ITF_TO_HTML.
Absatzformate anpassen
Mit der automatischen Umsetzung der Absatzformate können auch W3CSS-Definitionen eingebaut werden:
DATA(lt_conv_parformats) = VALUE tline_t( ( tdformat = 'U1' tdline = '<h2><div class="w3-panel w3-blue">' ) ( tdformat = 'U2' tdline = '<h3><div class="w3-panel w3-light-blue">' ) ( tdformat = 'AS' tdline = '<div class="w3-margin">' ) ).
META-Information für W3CSS
Nachdem die Umwandlung mit Hilfe des Funktionsbausteins erfolgt ist, muss der Link zur W3CSS-Definition eingebaut werden:
INSERT '<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">' INTO rt_html INDEX 1.
Ausgabe
Die Darstellung sieht nun schon etwas schöner aus, aber es geht noch besser…
Mehr Informationen
Zum Ende dieses Artikels möchte ich noch die Meldung selber am Anfang der Meldung darstellen und darunter den Langtext anzeigen.
So sieht es dann aus:
Je nachdem, ob es sich um eine Info-, Warn- oder Fehlermeldung handelt, kann die Farbe oben entsprechend angepasst werden.
Das HTML baue ich in diesem Fall selber auf. Nur der BODY wird vom Funktionsbaustein erzeugt.
Code
REPORT. PARAMETERS p_msgno TYPE symsgno DEFAULT '313'. CLASS lcl_info DEFINITION. PUBLIC SECTION. METHODS show. METHODS get_message_short RETURNING VALUE(rv_message) TYPE string. METHODS get_message_long RETURNING VALUE(rt_html) TYPE htmltable. PROTECTED SECTION. CLASS-METHODS build_box. CLASS-DATA mo_box TYPE REF TO cl_gui_dialogbox_container. CLASS-DATA mo_html TYPE REF TO cl_gui_html_viewer. DATA mv_short TYPE string. DATA mt_long TYPE htmltable. CLASS-METHODS handle_close FOR EVENT close OF cl_gui_dialogbox_container. METHODS show_message. ENDCLASS. CLASS lcl_info IMPLEMENTATION. METHOD show. build_box( ). mv_short = get_message_short( ). mt_long = get_message_long( ). show_message( ). ENDMETHOD. METHOD get_message_short. MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4 INTO rv_message. ENDMETHOD. METHOD build_box. IF mo_box IS INITIAL. mo_box = NEW #( width = 900 height = 400 top = 20 left = 400 ). mo_html = NEW #( parent = mo_box ). SET HANDLER handle_close FOR mo_box. ENDIF. mo_box->set_caption( sy-title ). ENDMETHOD. METHOD show_message. DATA lv_url TYPE c LENGTH 1000. mo_html->load_data( EXPORTING encoding = 'utf-8' IMPORTING assigned_url = lv_url CHANGING data_table = mt_long ). mo_html->show_data( url = lv_url ). ENDMETHOD. METHOD handle_close. mo_box->set_visible( space ). ENDMETHOD. METHOD get_message_long. DATA ls_header TYPE thead. DATA lt_itf_text TYPE STANDARD TABLE OF tline. DATA lt_html_text TYPE STANDARD TABLE OF htmlline. DATA lv_object TYPE dokhl-object. CALL FUNCTION 'DOCU_OBJECT_NAME_CONCATENATE' EXPORTING docu_id = 'NA' element = sy-msgid addition = sy-msgno IMPORTING object = lv_object. CALL FUNCTION 'DOCU_GET' EXPORTING id = 'NA' langu = sy-langu object = lv_object IMPORTING head = ls_header TABLES line = lt_itf_text EXCEPTIONS OTHERS = 5. DATA(lt_conv_parformats) = VALUE tline_t( ( tdformat = 'U1' tdline = '<h2><div class="w3-panel w3-blue">' ) ( tdformat = 'U2' tdline = '<h3><div class="w3-panel w3-light-blue">' ) ( tdformat = 'AS' tdline = '<div class="w3-margin">' ) ). CALL FUNCTION 'CONVERT_ITF_TO_HTML' EXPORTING i_header = ls_header i_html_header = abap_true TABLES t_itf_text = lt_itf_text t_html_text = rt_html t_conv_parformats = lt_conv_parformats EXCEPTIONS OTHERS = 4. INSERT '<html><head>' INTO rt_html INDEX 1. INSERT '<meta http-equiv="content-type" content="text/html; charset=utf-8">' INTO rt_html INDEX 2. INSERT '<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">' INTO rt_html INDEX 3. INSERT '<title>test</title></head><body>' INTO rt_html INDEX 4. INSERT |<h1><div class="w3-container w3-red">{ mv_short }</div></h1>| INTO rt_html INDEX 5. APPEND '</body></html>' TO rt_html. ENDMETHOD. ENDCLASS. AT SELECTION-SCREEN. MESSAGE ID 'BRAIN' TYPE 'E' NUMBER p_msgno WITH 'EINS' 'ZWEI' 'DREI' 'VIER' INTO sy-title. NEW lcl_info( )->show( ) .
- Meine Eclipse-Plugins - 22. November 2024
- Interview mit Björn Schulz (Software-Heroes.com) - 3. September 2024
- Daten aus ALV ermitteln - 3. September 2024