Implementing Table Controls

Table Data

The data displayed in table control fields is made available to the HTMLBusiness interpreter via the field names used on the screen, as shown in the following graphic:

The field index starts with 1 and increments up to the maximum number of lines of the dataset displayed in the table control.

Table Control Attributes

In HTMLBusiness, a table control is identified by the name assigned in the Screen Painter. The attributes contain information about the table control, as shown in the following table:

The following example shows the different attributes of the table control TABLE:

The name of the table control assigned in the Screen Painter is TABLE.

Table Control Navigation

To navigate to the place in the table where the user scrolls, you need to be able to position the table control slider box accordingly.

Previously, only function codes (OK codes) could be sent back to SAP system. However, since there can now be more than one table control on a screen, you need to be able to communicate with a particular object on the screen. In the HTMLBusiness template, you therefore specify the object with which you want to communicate and the particular action you want to perform.

In accordance with the standard terminology for user interfaces, you raise a particular event on a particular control:

• The term event refers to the action performed

• The term control refers to the object on the screen with which you want to communicate

For the the control type "Table Control", the following events are defined:

To raise an event on a particular control, you use the HTMLBusiness command wgateUrl() and specify the two parameters ~control and ~event, as follows:

wgateUrl(~event="EventName" ~control="TableName"

The following example shows how to display the table control data in an HTML page and how to scroll through the table control using two pushbuttons:

<FORM ACTION="~wgateUrl()" METHOD="POST">
<TABLE>
 <THEAD>
  <TD>Account Number</TD>
  <TD>Account Description</TD>
</THEAD>
`repeat with i from Table.firstVisible to Table.lastVisible`
<TR>
  <TD>`ACCOUNT-NUMBER[i]`</TD>
  <TD>`ACCOUNT-DESCR[i]`</TD>
</TR>
`end`
<INPUT TYPE="SUBMIT"
  NAME="~Event=PrevPage, ~Control=Table"
  VALUE="Previous Page">
<INPUT TYPE="SUBMIT"
  NAME="~Event=NextPage, ~Control=Table"
  VALUE="Next Page">
<TABLE>
</FORM>
            

The following example shows the same functionality using two hypertext links:

<TABLE>
<THEAD>
  <TD>Account Number</TD>
  <TD>Account Description</TD>
</THEAD>
`repeat with i from Table.firstVisible to Table.lastVisible`
<TR>
  <TD>`ACCOUNT-NUMBER[i]`</TD>
  <TD>`ACCOUNT-DESCR[i]`</TD>
</TR>
`end`
<A HREF="wgateUrl(~Event=PrevPage, ~Control=Table)"
  Previous Page" </A>
<A HREF="wgateUrl(~Event=NextPage, ~Control=Table)"
  Next Page" </A>
</TABLE>
            

Posting Data to a Table Control

To post data to a table control, you use HTML text fields with names assigned in the Screen Painter, and an index. The index is equal to the absolute number of the record of the dataset displayed by the table control. See the following example:

<FORM ACTION="~wgateUrl()" METHOD="POST">
<TABLE>
 <THEAD>
   <TD>Account Number</TD>
   <TD>Account Description</TD>
 </THEAD>
`repeat with i from Table.firstVisible to Table.lastVisible`
<TR>
   <TD><INPUT TYPE="TEXT"
     NAME="ACCOUNT-NUMBER[`i`]"
     VALUE="ACCOUNT-NUMBER[`i`]"</TD>
   <TD><INPUT TYPE="TEXT"
     NAME="ACCOUNT-DESCR[`i`]"
     VALUE="ACCOUNT-DESCR[`i`]"</TD>
</TR>
`end`
<INPUT TYPE="SUBMIT"
   NAME="~Event=PrevPage, ~Control=Table"
   VALUE="Previous Page">
<INPUT TYPE="SUBMIT"
   NAME="~Event=NextPage, ~Control=Table"
   VALUE="Next Page">
<TABLE>
</FORM>
            

Automatic Repositioning and Resynchronization

When a user scrolls through the dataset displayed in a table control, not all the data is always visible. Since only visible fields can be ready for input, an HTML page should allow data input only for those fields currently visible in the table control.

To enforce this, you present only those fields between the lines Table.firstVisible and Table.lastVisible (as shown in the example above).

The following example shows how to transfer data from an HTML page to SAP system:

Unfortunately, using the Web browser's Back button may result in HTML pages being pulled out of the browser's page cache, so that the data displayed in the Web browser is not visible on the SAP transaction screen.

To resolve this problem, the ITS:

• Repositions the scroll bar of the table control, so that the first field posted from the Web is displayed in the first line of the table control.

• Posts the data to the SAP system application.

This method works, unless:

• The number of lines in the table control has changed

• The order of the lines in the table control has changed

If in doubt, set the switch ~syncBehaviour to NoResync in your service file. In this case, the ITS detects when the Back button in the Web browser has been used, and displays a warning message. This method safeguards against data loss, but the user loses the ability to use the Back button.

Automatic Scrolling

Although the functionality of table controls and step loops is similar, table controls do not support the automatic scrolling possible with step loops.

Table Row Selection

To select a particular row of the dataset displayed by a table control, you can use the name <table control>-ROWSELECT, where <table control> is the name of the table control assigned in the Screen Painter. At present, it is not possible to use the name of the line selection variable assigned in the Screen Painter.

To determine whether a particular line of the table control is currently selected, you can use the attribute <table control>-ROWSELECT.selected:

For example:

<FORM ACTION="~wgateUrl()" METHOD="POST">
<TABLE>
 <THEAD>
  <TD>Account Number</TD>
  <TD>Account Description</TD>
 </THEAD>
 `repeat with i from Table.firstVisible to Table.lastVisible`
 <TR>
  <TD><INPUT TYPE="CHECKBOX"
    NAME="TABLE-ROWSELECT[`i`]"
    VALUE="X"
    `if (TABLE-ROWSELECT[i].selected)`
    checked 
    `end`>   </TD>
  <TD><INPUT TYPE="TEXT" 
    NAME="ACCOUNT-NUMBER[`i`]"
    VALUE="`ACCOUNT-NUMBER[i]`"> </TD>
  <TD><INPUT TYPE="TEXT" 
    NAME="ACCOUNT-DESCR[`i`]"
    VALUE="`ACCOUNT-DESCR[i]`"> </TD>
 </TR>
    `end`
 <INPUT TYPE="SUBMIT"
   NAME="~Event=PrevPage, ~Control=Table"
   VALUE="Previous Page">
 <INPUT TYPE="SUBMIT"
   NAME="~Event=NextPage, ~Control=Table"
   VALUE="Next Page">
 </TABLE>
</FORM>
            

Table Column Attributes

The identifier <table control>-COLUMN[i] contains information about the column number i of the table control <table control>.

The only attribute currently available is .title which contains the column title.

For example:

<FORM ACTION="~wgateUrl()" METHOD="POST">
<TABLE>
 <THEAD>
 `repeat with i from 1 to Table.columnCount`
  <TD>`TABLE-COLUMN[i].title`</TD>
  `end`
  </THEAD>
  `repeat with i from Table.firstVisible to Table.lastVisible`
   <TR>
   <TD><INPUT TYPE="CHECKBOX"
     NAME="TABLE-ROWSELECT[`i`]"
     VALUE="X"
     `if (TABLE-ROWSELECT[i].selected)`
     checked 
     `end`>   </TD>
   <TD><INPUT TYPE="TEXT"
     NAME="ACCOUNT-NUMBER[`i`]"
     VALUE="`ACCOUNT-NUMBER[i]`"> </TD>
   <TD><INPUT TYPE="TEXT"
     NAME="ACCOUNT-DESCR[`i`]"
     VALUE="`ACCOUNT-DESCR[i]`"> </TD>
   </TR>
    `end`
   <INPUT TYPE="SUBMIT" 
     NAME="~Event=PrevPage, ~Control=Table"
     VALUE="Previous Page">
   <INPUT TYPE="SUBMIT"
     NAME="~Event=NextPage, ~Control=Table"
     VALUE="Next Page">
 </TABLE>
</FORM>