Ziel
Daten sollen in Tabellenform angezeigt werden.



Folgende Funktionen werden vom S10 Framework bereitgestellt:
  • Ein- und Ausgabefelder
  • Sortierung von Spalten
  • Filtern der Tabelle
  • Generierung der Überschriften
  • Ausklappen von Zeilen
  • Generierung von Links
  • Download der Tabelle
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:
  • Ein normales Eingabefeld eines bestimmten Typs, z.B. Text oder Datum:
     <input type="text" class='inputcell' name="vbeln">
    
     <input type="date" class='inputcell' name="audat">
    

  • Eine Checkbox:
    <input type="checkbox" class='checkbox' name="selected">
    

  • Eine Dropdownliste mit selbst definierten Werten:
    <select size="1" name='lprio' class='inputcellselect'>                 
        <option value="1">Hoch</option>
        <option value="2">Mittel</option>
        <option value="3">Niedrig</option>
    </select>
    

  • Eine Dropdownliste, deren möglichen Werte vom S10 Framework automatisch generiert werden:
    <select size="1" name='vstel' class='inputcellselect'
                     data-s10dropdownlist='vstel@dropdownlist'> 
    </select>
    

Wertehilfe
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:
  • Der Inhalt des Feldes in dem ABAP Objekt wird als Text ausgegeben.
    Hierzu die Klasse 'outputcelldiv' verwenden:
     <div class='outputcelldiv landscape' 
          style='width: 200px;' name="matnr"></div>
    

  • Der Inhalt des Feldes im ABAP Objekt wird als HTML-text interpretiert und auf der Seite ausgegeben. Dadurch können einfache Formatierung mitgegeben, prinzipiell aber auch komplexere HTML-Teile ausgegeben werden.
    Hierzu die Klasse 'outputcelldivhtml' angeben:
    <div name="telm_numbr_html" class="outputcellhtmldiv"
         style='width:240px;  max-width: 240px;'></div>
    

  • Der Text wird automatisch vom S10 Framework anhand des Feldwertes ermittelt.
    Dazu beim Feldnamen noch @text anfügen:
     <div class='outputcelldiv landscape' 
          style='width: 200px;' name="matnr@text"></div>
    
    Hier wird automatisch den Materialtext zur im Feld gespeicherten Materialnummer ausgeben, da das Feld vom Typ mara-matnr ist.
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>
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