Die Grundliste gibt pro Serviceauftrag eine Zeile aus (Auftragsnummer, Kurztext,...). Bei Klick auf eine Zeile wird die Detailinformation (Arbeitsplatz, ABC-Kennzeichen,...) ausgeklappt.

Die Definition der Liste und des Detailbereichs:

Wir wollen in dem ausgeklappten Bereich nun als weitere Information eine Tabelle der Auftragsvorgänge ausgeben, und zwar jeweils Vorgangsnummer und Kurztext:

Der S10 Generator bietet hierzu keine Option; wir bauen deshalb die zusätzliche Tabelle in das generierte Coding ein. Hierzu brauchen wir einen Teil in ABAP (Definiton der Vorgangstabelle, Einlesen der Daten) und einen Teil in HTML (Anzeige der Vorgangstabelle).

Das Vorgehen ist wie folgt:

1. Zeilenstruktur der Tabelle als lokale ABAP-Klasse definieren

Wir benötigen als Spalten die Vorgangsnummer und den Kurztext des Vorgangs. Die ABAP-Klasse können wir im ABAP Editor eingeben oder in /s10/util als S10 Klasse generieren lassen, was insbesondere bei zahlreichen Spalten Zeit spart. Als zugrundeliegende Datenbanktabelle verwenden wir den View VIAUFK_AFVC:

Bei der Generierung werden die Schlüsselfelder des Views automatisch ergänzt, in diesem Fall AUFPL und APLZL, die wir hier nicht benötigen; es schadet aber auch nichts, wenn wir sie in der Klasse drin lassen.

Der Name der Klasse ist beliebig; wir wählen "afvc_db":

class afvc_db definition inheriting from /s10/any.
  public section.

    data:
      vornr type viaufk_afvc-vornr, 
      ltxa1 type viaufk_afvc-ltxa1.

    constants:
      dbtablename type string value 'viaufk_afvc'. 
endclass.

2. In der ABAP-Klasse, die für die Detailausgabe zuständig ist, eine Tabelle mit der neuen Klasse als Zeilenstruktur anlegen

In unserem Fall heisst die Detailklasse "viaufk_detail". Wir ergänzen die "Public" Daten der Klasse um folgende Zeile, mit der wir die Vorgangstabelle "tabafvc" definieren:

    data: tabafvc type table of ref to afvc_db.

3.  In der ABAP-Klasse, die für die Detailausgabe zuständig ist, eine build-Methode implementieren, welche die Tabellendaten einliest

In unserem Fall benötigen wir als Schlüssel nur die Auftragsnummer. Wir lesen die Daten über den View VIAUFK_AFVC:

    methods:
      build_tabafvc
        importing
          aufnr type viaufkst-aufnr
        exporting
          tabafvc type table.

class viaufk_detail implementation.
   method build_tabafvc.

     s10databaseselect(
        exporting
          condition = |aufnr = @aufnr|
      changing
         folder =tabafvc ).

  endmethod.
endclass.

Damit sind wir mit dem ABAP-Teil fertig. Das gesamte Coding ist so gehalten, dass wir zum Hinzufügen weiterer Spalten in der Vorgangstabelle nur die entsprechenden Felder in der Klasse afcv_db aufnehmen müssen.

Nun zum HTML-Teil:

4. In der HTML-Datei nach Ausgabe der Detailfelder die Ausgabe der Tabelle aufnehmen

Diese sieht in unserem Fall wie folgt aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10 
11
12
13
14
15
16
17
18
19

<div class="infoblock" style="height: auto; width: auto"
        data-s10title="Vorgangstabelle" name="tabafvc">

        <!-- column headers -->
        <div class="colheaders">
            <div class='colhead' style="width: 60px;">Vorgang</div>
            <div class='colhead' style="width: 400px;">Kurztext</div>
        </div>

        <!-- list rows -->
        <form class='table' name='myviaufk.tabafvc'>

            <div class="tablerow">
                <div class='outputcelldiv ' style="width: 60px;" name="vornr"></div>
                <div class='outputcelldiv ' style="width: 400px;" name="ltxa1"></div>
            </div>

        </form>
</div>

Zeile 1: Die Klasse "Infoblock" wird verwendet für alle Teile des Detailbereichs, die separat über die Layoutdefinition steuerbar sind

Zeile 2: Mit "data-s10title=" geben Sie einen frei wählbaren Text an, der in der Layoutdefinition dem Benutzer angezeigt wird. Unter "name=" den Tabellennamen nennen.

Zeile 5 und folgende: Die Spaltenüberschriften. 

Zeile 11: Ein <form> Tag mit dem Namen der Tabelle. Da die Tabelle in dem Detailobjekt "myviaufk" liegt, ist der gesamte Name "myviaufk.tabafvc". Den Namen des Detailobjekts sehen Sie auch in den darüberliegenden Einzelfeldern in der HTML-Datei, z.B. <span class='output' name='myviaufk.tplnr'>

Zeile 14 und folgende: Spalten der Vorgangstabelle. Bei "width" die gleiche Breite angeben wie in den Überschriften.

5. Die Ausgabe der Tabelle in der Layoutdefinition einschalten

Die Layoutdefinition sieht in unserem Fall wie folgt aus:

Jetzt erscheint die Vorgangstabelle beim Ausklappen einer Zeile:

Falls die Vorgangstabelle in der Layoutdefinition nicht eingeschaltet ist,  ruft das S10 Framework  die build-Method der Vorgangstabelle tabafvc nicht auf, sodass keine unnötigen Datenbankzugriffe anfallen und keine Tabellendaten zum Browser gesendet werden.