Instead of displaying the order items table directly in the detail area of the basic list, the expanded detail area contains a "SHow operations" pushbutton that can be used to display the tasks separately.

The user now also has all the S10 options for selecting data and configuring layouts in the activity table.

Sorting by individual columns and expanding and collapsing the filter area also work exactly as in the basic list:

Clicking on the back arrow will take you back to the basic list, exactly where we started from. The entire state of the basic list, including applied filters, sorting and expanded details, remains unchanged.

Now for the implementation. We do not build the activity table directly into the ABAP program for the basic list, but use a separate ABAP program for this purpose. This is technically more demanding, but offers the following advantages:

• We can also generate the operation table with the S10 generator.
• The implementation of the order items table is independent of the implementation of the basic list.
• The order items table can also be accessed from other S10 applications.

How To Proceed:

1. Generate the display of operations with transaction /s10/util as a separate list

We use the AFVC table of operations as the output table.

Please note:

• Rather include too many columns than too few, because by defining the layout we can later limit the display to the columns we need. Analogous for the filters.
• Later, only the operations of a single order are to be displayed. In principle, therefore, the order number would be useful as a selection, but here there is a small difficulty: The order number is not stored directly by SAP in the AFVC operation table. Instead, there is a "plan number" AUFPL in the AFVC, which is assigned to the order via a separate table (table AFKO). We therefore include the plan number as a filter criterion.  It is sufficient to define it as an invisible selection, which is not displayed to the user, but is later used internally for selection:

2. Include a "Show operations" pushbutton in the detailed display of the order list (HTML)

 <div class="infoblock" style="padding: 4px;"
            data-s10title="Link operation table" name="display_items">

    <button type="button" class="button"
            onclick="S10Apply('display_items');">
                Show operations
    </button>
</div>

The name "display_items" of the "infoblock" is arbitrary. We call the method "display_items" via the onclick= clause, in which we will call the display of the operation table in the next step.

Tip: Leave the direct output of the order items list from tutorial 10 in the HTML file, so that later in the layout definition it can be decided whether the tasks are displayed directly in the detail area or shown via the pushbutton. Optionally, both the pushbutton and the direct display in the layout can then be switched on. For this purpose, it is best to limit the directly displayed activity table to a maximum height, e.g. 200px (style='max-heigth:200px' in the "infoblock" in HTML). The user then has a small scrollable preview display and can use the pushbutton for the full display:

3. In the configuration of the detail view, select the "Link operation table" instead of "Operation table"  (or both, see tip above)

4. Implement a method "display_items" in the ABAP class of the basic list to call the operation list.

The "display items" button calls the "display_items" method of the basic list (class "viaufkst_manager"). There we now implement the call of the operation table:

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

* method to display items in a separate screen
  method display_items.

* read current entry in tabviaufk
    read table tabviaufk
        index s10contextinfo( )->rownumber
          assigning field-symbol(<viaufk>).

* create object to display the items
    data:  iw_order_items type ref to /s10/any.
    create object iw_order_items type ('\PROGRAM=ZZS10_IW_ORDER_ITEMS\CLASS=MAIN').

* call up method to display items, pass order number
   call method  iw_order_items->('DISPLAY')
      exporting
        aufnr = <viaufk>->aufnr.

  endmethod.

    Explanations:

• Line 5: We get the number of the current row in the base table "tabviaufk" from the HTML display via s10contextinfo(), so that we can later access the current order number in line 16 with <viaufk>->aufnr. This is because the last order line that was expanded is not necessarily the line for which the user retrieves the operation list: he can open the detail view for several orders and later click on "Show operations" in one of the detail views.
• Line 10: An object reference "iw_order_items" is created. We specify /s10/any as the class - which is the superclass of the object to be created - since the actual class is defined in another program. The specified notation is the standard ABAP notation for classes in external programs.
• Line 11: Here the object "iw_orderitems" is created. The program is called "ZZS10_IW_ORDER_ITEMS", which we store as a copy of the generated operation list (see next point), the class is "MAIN".
• Line 14: We call the 'display' method of the created object.

In the case of frequently used objects, it is practical to define the external class (in our case, the class for displaying order operations) in the ABAP class library SE24, for example under the name /ABC/IW_DISPLAY_ORDERITEMS where /ABC/ would be your namespace. The creation of the object and the method call can then be formulated more easily:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

* method to display items in a separate screen
  method display_items.

* read current entry in tabviaufk
    read table tabviaufk
        index s10contextinfo( )->rownumber
          assigning field-symbol(<viaufk>).

* create object to display the items
    data(iw_order_items) = new /abc/iw_display_orderitems( ).

* call up method to display items, pass order number
    iw_order_items->display( <viaufk>->aufnr ).

endmethod.

5.  Implement a method "display" in the ABAP class "main" of the operation list to display the operations

Copy the ABAP program generated for displaying the operations, e.g. "ZZS10_AFVC", preferably first under a different name, because otherwise it is easy to overwrite the program when generating it again, and the inserted methods are gone again. We have chosen the program name "ZZS10_IW_ORDER_ITEMS" for our example here.

The declaration of the new method "display" is done in the class "main":

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

* main class for this application
class main definition inheriting from /s10/any.

  public section.

    data: my_afvc_manager type ref to afvc_manager.

    methods:
      logon,
      display
        importing
          aufnr type aufk-aufnr.

endclass.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

* display item table in popup
  method display.

* create manager object
    create object my_afvc_manager.

* set defaults
    my_afvc_manager->set_defaults( ).

* set aufnr
     my_afvc_manager->header_aufnr = aufnr.


* determine aufpl from afko
    select single aufpl from afko into my_afvc_manager->search_aufpl
        where aufnr = aufnr.

* not found ?
    if sy-subrc ne 0.
      s10errormessage( |Invalid order number specified when calling ZZS10_IW_ORDER_ITEMS->DISPLAY: | && aufnr ).
    endif.


* start display
    my_afvc_manager->s10dialog( 'display_items').

  endmethod.

Explanations:

• Lines 5 to 8: Identical to the already generated "logon" method. With set_defaults( ) any filter fixed values are entered if they were set in the generation configuration.
• Line 11: We transfer the order number to an attribute of the class to be able to display the order number later in the header of the operation list:
  

class afvc_manager definition inheriting from /s10/any.

  public section.

* header data
   data: header_aufnr type onk-aufnr.
...

• Line 15: Here we read the plan number "AUFPL" to the order from the table "AFKO". If the order does not exist, an error message is displayed. The plan number is placed in the generated selection field "search_aufpl".
• Line 25: Now we call the HTML page "display_items" in dialog mode, which means that the basic list remains and becomes active again after returning from the operation display. We still need to create the HTML page "display_items (step 6).

If we test the flow now, an error message occurs because the HTML file does not exist yet:

6.  Create the HTML file "display_items.html"

To do this, we copy the "afvc_manager" folder from the generated project folder of the activity display into our own project. Then we rename the HTML file "list.html" to "display_items.html". With this, the display already works:

However, not yet the return to the basic list. We still need to add the "Back" button instead of "End" in the HTML page header and add the order number display. The beginning of the HTML file "display_items.html" is then as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel='stylesheet' type='text/css' href='../../../style/s10.style.css'>
    <link rel='stylesheet' type='text/css' href='../../../style/custom.style.css'>
    <script src='../../synactiveS10/synactiveS10.java.js'></script>

    <title>Operations</title>
</head>
<body style="width: 100%; margin: 0px; padding: 0px;" onload='init();' class="colorscheme9">

    <div class="toolbar">

        <button type="button" class="button back" onclick="S10Apply('exit_display_items');">
            &#9664;&#xFE0E;
        </button>

        <b>Operations for the order <span class='output' name="header_aufnr"></span></b>

        <span style="float: right;" class="tablefilterinfo"></span>

    </div>

    <!-- filter -->
    <div class="tablefilteractive">
...

Explanation of the HTML file:

• Line 15: The Unicode symbol &#9664; is used for the "Back" key. The subsequent &#65038; is the so-called "text presentation selector"; it specifies that the symbol should be displayed as text, not as an "emoji", which would otherwise be the case under iOS.The CSS addition class "back" is defined in "style.css"; it displays the button without a frame with a transparent background.
  
  
• Line 19: Here the class variable "header_aufnr" is inserted into the text.

Now the only thing missing is the implementation of the routine "exit_display_items" to return from the operations to the order list:

7.  Implement a method "exit_display_items" in the ABAP class "afvc_manager" of the operation list to return to the basic list.

 For this purpose it is sufficient to call s10exitdialog( ):

1
2
3
4

* return from itemdisplay
  method exit_display_items.
    s10exitdialog( ).
  endmethod.

This completes our implementation of the separately displayed operation list.