Ziel Daten sollen in Tabellenform angezeigt werden. ![]() Folgende Funktionen werden vom S10 Framework bereitgestellt:
|
Implementierung Tabellen werden im S10 Framework auf ABAP Seite als eine Liste von Referenzen auf ein anderes S10 Objekt abgebildet. Im HTML View wird über name= der Bezug dazu hergestellt. Deklarierung der Variablen: data: myorders type table of ref to order. ABAP Klasse class order definition inheriting from /s10/any. public section. data: vbeln type vbeln, audat type audat, netwr type netwr, waerk type waers. endclass HTML-View: Tabellenkopfbereich mit Überschriften: <div class="colheaders"> <div class='colhead output' name="vbeln" style='width: 100px;'></div> <div class='colhead' style='width: 80px;'>Belegdatum</div> <div class='colhead' style='width: 80px;text-align:right;'>Nettowert</div> <div class='colhead' style='width: 50px;'>Währg</div> </div> Definition der Zeilen der Tabelle: <form class='table' name='myorders'> <div class="tablerow"> <div class='outputcelldiv' style='width: 100px;' name="vbeln"></div> <div class='outputcelldiv' style='width: 80px;' name="audat"></div> <div class='outputcelldiv' style='width: 80px; text-align:right;' name="netwr"></div> <div class='outputcelldiv' style='width: 50px;' name="waerk"></div> </div> </form> Keine Daten Wenn beim Einlesen der Tabelle keine Daten vorhanden sind, kann dies in einem gesonderten Bereich als Hinweis dargestellt werden, der dann automatisch eingeblendet wird: <div class="tablenocontent" style="display: block;"> Keine Aufträge </div> ![]() Anzahl Zeilen Die Anzahl der Zeilen der Tabelle können über Tabellenname@rowcount ausgegeben werden: <label class="label">Anzahl selektiert</label> <br> <div class="output" name="myorders@rowcount"></div> |
Eingabefelder in einer Tabellenzeile Für änderbare Felder gibt es folgende Möglichkeiten:
Soll zu einem Eingabefeld eine Wertehilfe aufrufbar sein, muss nur die CSS-Klasse "valuehelp" hinzugefügt werden. Fordert der Benutzer die Wertehilfe an, wird automatisch eine ABAP-Methode aufgerufen: methods:
on_valuehelp_fieldname.
Beispiel: Wertehilfe zum Material <input type="text" class='inputcell valuehelp' style='float:left; width: 120px;' name="material"> Hinweis: In einer Tabelle wird die Methode in der Klasse aufgerufen, zu der das Tabellenojekt gehört, nicht die des Zeilenobjekts. ABAP Methode method on_valuehelp_material. data: seleced_material type string. if valuehelp_material is initial. create object valuehelp_material. endif. * call value help valuehelp_material->s10dialog('searchhelp'). selectedmaterial = valuehelp_material->matnr.. endmethod. Hinweis: Hier kommt eine Besonderheit des S10 Frameworks zum Tragen: Es wird ein neuer Dialog geöffnet in dem der Benutzer nach einem Material suchen und dieses auswählen kann. Der Dialog wird anschließend geschlossen und die Verarbeitung wird in der ABAP-Methode mit der nächsten Anweisung fortgesetzt. |
Ausgabefelder in einer Tabellenzeile Für Felder in einer Zeile, die nicht vom Benutzer geändert werden können, gibt es drei grundsätzliche Mechanismen:
|
Aufruf von JavaScript- oder ABAP-Methoden Der Benutzer kann durch Klicken Aktionen auslösen, dazu kann jedem Element ein onclick-event zugewiesen werden. Dies kann ein Pushbutton sein, aber auch ein einfacher Text (Link). Um eine ABAP-Methode aufzurufen kann S10Apply( ) verwendet werden: Sie können Informationen zum Kontext des Elements, z.B. den Namen der Tabelle oder die Zeile, über s10contextinfo( ) in der aufgerufenen ABAP-Methode abrufen. Beispiel: Löschen einer Zeile ![]() HTML Definition der Tabelle: <form class='table' name='orderitems'> <div class="tablerow"> <div class='outputcelldiv' style='width:50px;' name="ITM_NUMBER"></div> <input type="text" class='inputcell valuehelp' style='width: 120px;' name="material"> <input type="text" class='inputcell' style='width: 80px;' name="req_qty"> <input type="text" class='inputcell' style='width: 50px;' name="sales_unit"> <img style="width:16px; height:16px; margin-left:10px;" src="../../../icons/delete_64x64.png" onclick="S10Apply('order_item_remove')"> </div> </form> ABAP Methode: method order_item_remove. data: contextinfo type ref to /s10/contextinfo, tablename type string, rownumber type i. contextinfo = s10contextinfo( ). tablename = contextinfo->tablename. rownumber = contextinfo->rownumber. field-symbols: <tab> type table. assign (tablename) to <tab>. field-symbols: <s> type ref to orderpos. read table <tab> index rownumber assigning <s>. delete <tab> index rownumber. endmethod. |
Dynamisches setzen einer CSS Klasse Es ist möglich, in einer ABAP-Methode die CSS-Klassen eines S10 Feldes zu setzen. Je nach verfügbaren Klassen im eingebundenen Stylesheet kann so beliebig auf das Erscheinungsbild eingewirkt werden, also z.B. farbliche Markierungen, Größe und so weiter. Es kann auch sinnvoll sein, Eingabefelder auf nicht-eingabebereit zu schalten, wenn die Daten nicht mehr geändert werden soll. Fügen Sie dazu mit dem Befehl s10addcss( ) die Klasse "inputdisabled" hinzu. Beispiel: Die Position soll nicht mehr geändert werden können: ![]() ABAP-Methode (Ausschnitt) if count_scheds > 1. pos->s10addcss( exporting attrname = 'req_qty' cssclassname = 'inputdisabled' ). pos->s10addcss( exporting attrname = 'material' cssclassname = 'inputdisabled' ). pos->s10addcss( exporting attrname = 'sales_unit' cssclassname = 'inputdisabled' ). endif. |
Sortierung von Spalten Durch drücken auf eine Spaltenüberschrift kann diese entweder Auf- oder absteigend sortiert werden. Hierbei übernimmt das S10 Framework eine sinnvolle Sortierung entsprechend des Datentyps, z.B. Namen, Datumsformate und Beträge. Bei Sortierung durch den Benutzer erhält das Element der Spaltenüberschrift automatisch die Klasse colheadup (aufsteigend sortiert) oder colheaddown (absteigend sortiert). Sie können diese Klasse auch selbst im HTML Code setzen, wenn Sie eine Ausgangssortierung kennzeichnen möchten. Spalte ist absteigend sortiert: <div class="colhead output colheaddown" style="width: 90px; text-overflow: ellipsis; border: 0px;" name="audat"></div> Hinweis: Obwohl der Benutzer die maximal anzuzeigende Zeilenzahl auswählen kann, werden bei einer erneuten Sortierung alle Zeilen verglichen und nur anschließend die Ergebnisliste in der Anzeige wieder begrenzt. |
Filtern der Tabelle Das S10 Framework generiert automatisch pro Tabellenspalte ein Dropdownfeld, in dem vorkommende Werte gruppiert werden. Bei Auswahl werden nur die Zeilen der Tabelle mit dem ausgewählten Wert angezeigt. Standardmäßig ist diese Ansicht ausgeblendet und kann durch das Filtersymbol aktiviert werden: ![]() Beispiel: Die Aufträge werden anhand eines bestimmten Datums gefiltert: ![]() Automatische Summierung Sie können einer bestimmte Spalte zusätzlich die Klasse "totals" zuweisen. Dadurch werden alle angezeigten Werte automatisch summiert, wenn es mehr als eine Zeile gibt: <div class='colhead output totals' style='width: 80px; text-align: right;' name="netwr"> ![]() |
Generierung der Überschriften Da der HTML-View jeweils pro Sprachschlüssel abgespeichert wird, können Texte wie Spaltenüberschriften entweder händisch oder automatisiert übersetzt werden. Für bestehende Felder aus dem SAP System kann das S10 Framework den sprachabhängigen Text jedoch auch automatisch ermitteln. Dazu die Klasse "output" hinzufügen in der Spaltenüberschrift sowie das entsprechende S10 Feld per name= angeben. Beispiel: Das S10 Feld ist vom Typ kunnr und es wird automatisch die Spaltenüberschrift "Debitor" ermittelt: ![]() ABAP Deklaration: data: kunnr type kna1-kunnr. Entsprechendes Feld im HTML-View: <div class="colhead output" name="kunnr"></div> s10columnheader() Die Methode s10columnheader( ) wird durch das S10 Framework automatisch aufgerufen, wenn in HTML bei einer Spaltenüberschrift die Klasse "colhead output" angegeben ist. |
Ausklappen von Zeilen Für Tabellenzeilen können Detailanzeigen definiert werden. Diese sind zunächst nicht sichtbar, sobald der Benutzer jedoch auf eine Zeile drückt, werden die jeweiligen Daten geladen und die Detailansicht in der Tabelle eingeblendet. ![]() Für diese Funktion wird die Definition einer Zeile erweitert, so dass bei einem Klick des Benutzers eine S10-Methode abläuft. Zudem wird noch ein kleiner Pfeil am rechten Rand eingefügt, der dem Benutzer signalisieren soll, dass ein Aufklappen der Zeile möglich ist: HTML Definition der Tabelle <form class='table' name='myorders'> <div class="tablerow" onclick="S10ToggleDetail(this);"> <div class='outputcelldiv' name="vbeln"></div> <div class='outputcelldiv' name="audat"></div> <div class='outputcelldiv' name="netwr"></div> <div class='outputcelldiv' name="waerk"></div> <div class='tablerequestdetail' style='float: right;'></div> </div> </form> Der Bereich, der beim Aufklappen eingeblendet wird, kann relativ frei gestaltet werden und wird nur einmal im HTML-Code eingefügt. Hierbei sind auch iFrames möglich, so dass sehr einfach wiederverwendbare Bausteine entstehen können: Aufgerufene ABAP Methode Der Name der aufgerufenen Methode setzt sich zusammen aus: on_detail_ + Name der Tabelle Beispiel: method on_detail_myorders. * Get row number the user clicked in data: tabindex type i. tabindex = s10actionparameter( ). field-symbols: <s> type ref to order. * Read line read table myorders index tabindex assigning <s>. me->vbeln = <s>->vbeln. * read order data me->read( ). endmethod. HTML Definition des Detailbereichs zu einer Zeile: <div id="myorders_detail" class='tabledetail'> <!-- kunnr as linkkey for e.g. material price ---> <input type="hidden" class="output linkkey" name="kunnr" /> <button style="margin:8px;float:right;width:80px;border-radius:3px;" type="button" class="button-small" onclick="S10Apply('on_change')"> Ändern </button> <div class="infoblock"> <label class='label'>Auftragsart</label><br /> <span class='output' type="text" name='auart@text' /> </div> <div class="infoblocktext"> <label class='label' for="PURCH_NO_C">Kundenreferenz</label> <br /> <span class='output' type="text" name='PURCH_NO_C' /> </div><br> <div class="infoblock"> <label class='label' for="PURCH_DATE" name="PURCH_DATE@label"></label> <br /> <span class='output' type="text" name='PURCH_DATE' /> </div> <div class="infoblock"> <label class='label' for="contact_order">Ansprechpartner</label> <br /> <span class='output' type="text" name='contact_order' /> </div> </div> |
Generierung von Links Mit einem einfachen Mechanismus können Felder einer Zeile in einen Link umgewandelt werden, das heißt, der Benutzer kann auf den Eintrag klicken um eine Aktion zu starten, z.B. einen Dialog mit Details aufzurufen. Dazu wird einem Feld noch die Klasse "link" hinzugefügt. Wenn weitere Felder aus der Zeile in der ABAP-Methode benötigt werden, können diese als versteckte Felder in der Zeile aufgenommen werden mit der Klasse "linkkey". Beispiel: Der Benutzer kann in einer Liste Details zu einem Material anzeigen <form class='table' name='material_tab'> <div class="tablerow"> <div class="outputcelldiv link" name="matnr"></div> <div class="outputcelldiv linkkey" name="vkorg"></div> <div class="outputcelldiv linkkey" name="vtweg"></div> <div class='outputcelldiv' name="maktx"></div> </div> Der Name der ABAP-Methode, die automatisch aufgerufen wird, setzt sich zusammen aus on_link_ gefolgt von dem Namen es Feldes: method on_link_matnr. * material link data: matnr type mara-matnr, vkorg type mvke-vkorg, vtweg type mvke-vtweg. * set material number call method s10fromcontextinfo exporting key = 'matnr' changing result = matnr. call method s10fromcontextinfo exporting key = 'vkorg' changing result = vkorg. call method s10fromcontextinfo exporting key = 'vtweg' changing result = vtweg. * display material details material=>open_link( exporting matnr = matnr vkorg = vkorg vtweg = vtweg ). endmethod. Die Tabelle mit Links: ![]() Detailansicht zu Material 51: ![]() |
Download der Tabelle Jede Tabelle kann als Excel-Datei (.CSV) exportiert werden. Öffnen Sie dazu zunächst die Filteransicht und starten den Export mit dem folgenden Symbol: ![]() Die Tabelle wird mit den vom Benutzer gewählten Filtern und Sortierung gespeichert: ![]() Geöffnet in Excel: ![]() |
Komponente S10 Framework |