The basic list outputs one line per service order (order number, short text,...). By clicking on a line, the detailed information (workplace, ABC indicator,...) is expanded.

The definition of the list and the detail area:

We now want to display a table of order operations in the expanded area as further information, namely operation number and short text in each case:

The S10 generator does not provide an option for this; we therefore include the additional table in the generated code. For this we need a part in ABAP (definition of the task table, reading of the data) and a part in HTML (display of the task table).

The procedure is as follows:

1. Define the row structure of the table as a local ABAP class

We need the transaction number and the short text of the transaction as columns. We can enter the ABAP class in the ABAP Editor or have it generated in /s10/util as an S10 class, which saves time especially when there are numerous columns. We use the view VIAUFK_AFVC as the underlying database table:

During generation, the key fields of the view are automatically added, in this case AUFPL and APLZL, which we don't need here; but there's no harm in leaving them in the class.

The name of the class is arbitrary; we choose "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 the ABAP class that is responsible for the detail output, create a table with the new class as the row structure

In our case the detail class is called "viaufk_detail". We add the following line to the "Public" data of the class, with which we define the operation table "tabafvc":

    data: tabafvc type table of ref to afvc_db.

3.  In the ABAP class that is responsible for the detail output, implement a build method that reads in the table data

In our case, we only need the order number as the key. We read the data using the 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.

With this we are done with the ABAP part. All the coding is kept in such a way that to add more columns to the task table, we only need to include the corresponding fields in the afcv_db class.

Now for the HTML part:

4. In the HTML file, after outputting the detail fields, include the output of the table

In our case, this looks as follows:

 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: car"
        data-s10title="Item table" name="tabafvc">

        <!-- column headers -->
        <div class="colheaders">
            <div class='colhead' style="width: 60px;">Item</div>
            <div class='colhead' style="width: 400px;">Short Text</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>

Line 1: The "Info Block" class is used for all parts of the detail area that are separately controllable via the layout definition

Line 2: With "data-s10title=" you specify a freely selectable text that is displayed to the user in the layout definition. Name the table name under "name=".

Line 5 and following: Column headings. 

Line 11: A <form> tag with the name of the table. Since the table is located in the "myviaufk" detail object, the entire name is "myviaufk.tabafvc". You can also see the name of the detail object in the single fields above it in the HTML file, e.g. <span class='output' name='myviaufk.tplnr'>.

Row 14 and following:Columns of the task table. Enter the same width for "width" as in the headings.

5. Switch on the output of the table in the layout definition.

The layout definition in our case looks like this:

Now the operation table appears when you expand a row:

If the item table is not enabled in the layout definition, the S10 Framework does not call the build method of the item table tabafvc, so no unnecessary database accesses occur and no table data is sent to the browser.