Tables

Goal
Data should be displayed in tabular form.

The following functions are provided by the S10 Framework:

Input and output fields
Sorting columns
Filter the table
Generation of the headings
Expand lines
Generation of links
Download the table

Implementation
Tables are in the S10 Framework on the ABAP page mapped as a list of references to another S10 object. In the HTML view, the reference to it is established via name= .

Declaration of the variables:

data: myorders type table of ref to order.

ABAP class

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:
Table header area with headers:

<div class="colheaders">
    
     <div class='colhead output' name="vbeln" style='width: 100px;'></div>
     <div class='colhead' style='width: 80px;'>Document date</div>
     <div class='colhead' style='width: 80px;text-align:right;'>Net Value</div>
     <div class='colhead' style='width: 50px;'>Currency</div>

</div>

Definition of the rows of the table:

<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>

No data
If there are no data when the table is read, this can be indicated in a separate area as a note which is then automatically displayed:

<div class="tablenocontent" style="display: block;">
   No orders
</div>

Number of rows
The number of rows in the table can be output via tablename@rowcount:

<label class="label">Selected</label>
<br>
<div class="output" name="myorders@rowcount"></div>

Input fields in a table row
The following options are available for changeable fields:

A normal input field of a certain type, e.g. text or date:

 <input type="text" class='inputcell' name="vbeln">

 <input type="date" class='inputcell' name="audat">

A checkbox:

<input type="checkbox" class='checkbox' name="selected">

A drop-down list with self-defined values:

<select size="1" name='lprio' class='inputcellselect'>
     <option value="1">High</option>
     <option value="2">Medium</option>
     <option value="3">Low</option>
</select>

A drop-down list with possible values from the S10 Framework generated automatically:

<select size="1" name='vstel' class='inputcellselect'
                 data-s10dropdownlist='vstel@dropdownlist'> 
</select>

Input help
If an input help is to be available for an input field, only the CSS class "valuehelp" has to be added. If the user requests the input help, an ABAP method is called automatically:

methods:    
  on_valuehelp_fieldname.

Example: Input help for the material

<input type="text" class='inputcell valuehelp'
 style='float:left; width: 120px;' name="material">

Note: The method in the class is called in a table, to which the table object belongs, not that of the row object.

ABAP method

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.

Note: A special feature of the S10 Framework comes into play here: A new dialog opens in which the user can search for a material and select it. The dialog is then closed and the processing is continued in the ABAP method with the next statement.

Output fields in a table row
For fields in a row that cannot be changed by the user, there are three basic mechanisms:

The content of the field in the ABAP object is output as text.
To do this, use the 'outputcelldiv' class:
```
 <div class='outputcelldiv landscape' 
      style='width: 200px;' name="matnr"></div>
```
The content of the field in the ABAP object is displayed as HTML text interpreted and output on the page. This allows simple formatting to be provided, in principle, however, more complex HTML parts can also be output.
To do this, specify the class 'outputcelldivhtml':
```
<div name="telm_numbr_html" class="outputcellhtmldiv"
     style='width:240px;  max-width: 240px;'></div>
```
The text is automatically generated by the S10 Framework using the Field value determined.
Add @text to the field name:
```
 <div class='outputcelldiv landscape' 
      style='width: 200px;' name="matnr@text"></div>
```
Here the material text for the material number stored in the field is automatically output, as the field is of type mara-matnr.

Calling JavaScript or ABAP methods
The user can trigger actions by clicking. For this purpose, an onclick-event can be assigned to each element. This can be a push button, but also a simple text (link). To call an ABAP method, S10Apply( ) can be used:

You can provide information about the context of the item, e.g. the name of the table or the row above s10contextinfo () in the called ABAP method.

Example: Deleting a line

HTML definition of the table:

<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 method:

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.

Dynamic setting of a CSS class
It is possible to set the CSS classes of an S10 field in an ABAP method. Depending on the available classes in the integrated stylesheet, the appearance can be influenced as desired, e.g. colour markings, size and so on.
It can also be useful to set input fields to not ready for input to switch when the data is no longer to be changed. To do this, add the "inputdisabled" class with the s10addcss () command.

Example:
It should no longer be possible to change the position:

ABAP method (excerpt)

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.

Sorting columns
By pressing on a column heading, it can be sorted either in ascending or descending order. Here, the S10 Framework takes over a sensible sorting according to the data type, e.g. names, date formats and amounts.
When sorted by the user, the element of the column header automatically receives the class colheadup (sorted ascending) or colheaddown (sorted descending). You can also set this class yourself in the HTML code if you want to indicate an initial sort.

Column is sorted in descending order:

<div class="colhead output colheaddown"
 style="width: 90px; text-overflow: ellipsis; border: 0px;" 
name="audat"></div>

Note:
Although the user can select the maximum number of rows to be displayed, if the sort is repeated, all rows will be compared and only then will the result list in the display be limited again.

Filter the table
The S10 Framework automatically generates a dropdown field for each table column, in which occurring values are grouped. If selected, only the rows of the table with the selected value are displayed.

By default, this view is hidden and can be activated by the filter symbol:

Example:
The orders are filtered based on a specific date:

Automatic totaling
You can additionally assign the class "totals" to a certain column. This automatically totals all displayed values if there is more than one row:

<div class='colhead output totals'
 style='width: 80px; text-align: right;' name="netwr">

Generation of headings
Since the HTML view is saved for each language key, texts such as column headings can either be done manually or be translated automatically.

For existing fields from the SAP system, however, the S10 Framework can also determine the language-dependent text automatically.
To do this, add the class "output" to the column heading and specify the corresponding S10 field by name=.

Example:
The S10 field is of the type kunnr and it will automatically determines the column heading "Debitor":

ABAP declaration:

data: kunnr type kna1-kunnr.

Corresponding field in the HTML view:

<div class="colhead output" name="kunnr"></div>

s10columnheader()
The method s10columnheader () is automatically called by the S10 Framework if the Class "colhead output" is specified.

Expand lines
Detailed displays can be defined for table rows. These are not visible at first, but as soon as the user presses on a line, the corresponding data is loaded and the detailed view is shown in the table.

The definition of a line is extended for this function, so that when the user clicks, an S10 method runs. In addition, a small arrow is inserted on the right edge, which should signal to the user that the line can be expanded:

Called ABAP method
The name of the called method is composed of:

on_detail_ + Table name

Example:

  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 of the table

<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>

The area that is displayed when the window is opened can be designed relatively freely and is only used once in the HTML code. IFrames are also possible here, so that reusable building blocks can be created very easily:

HTML definition of the detail area for a line:

<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')">
            To change
        </button>

        <div class="info block">
            <label class='label'>Order type</label><br />
            <span class='output' type="text" name='auart@text' />
        </div>

        <div class="infoblocktext">
            <label class='label' for="PURCH_NO_C">Customer Reference</label>
            <br />
            <span class='output' type="text" name='PURCH_NO_C' />
        </div><br>

        <div class="info block">
            <label class='label' for="PURCH_DATE" name="PURCH_DATE@label"></label>
            <br />
            <span class='output' type="text" name='PURCH_DATE' />
        </div>

        <div class="info block">
            <label class='label' for="contact_order">Contact person</label>
            <br />
            <span class='output' type="text" name='contact_order' />
        </div>
</div>

Generation of links
With a simple mechanism, fields of a row can be converted into a link, i.e. the user can click on the entry to start an action, e.g. to call up a dialogue with details.

To do this, the "link" class is added to a field. If further fields from the line are required in the ABAP method, these can be included as hidden fields in the line with the class "linkkey".

Example:
The user can view details about a material in a list

    <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>

The name of the ABAP method that is called automatically, is made up of on_link_ followed by the name of the field:

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.

The table with links:

Detailed view of material 51:

Download the table
Each table can be exported as an Excel file (.CSV). To do this, first open the filter view and start the export with the following symbol:

The table is created with the filters and sorting chosen by the user saved:

Opened in Excel:

Component S10 Framework