Controls¶

SAP GUI for HTML offers various kinds of UI controls. Some of them offer more complex operations than simple input and output operations. This guide gives a short overview about the control supported by mobile transaction bridge, their characteristics and implemented operations.

Text Controls¶

SAP GUI for HTML features various different text field controls used to display text or to accept user input.

Edit Text Field¶

Property	Value
UI Type	`Text`
RestGUI Type	`GuiTextField`
GUI Type	`Edit`
Input Supported	`true`
Output Supported	`true`

The Edit Text Field is the most basic control which supports both text input and output.

Password Field¶

Property	Value
UI Type	`Text`
RestGUI Type	`GuiPasswordField`
GUI Type	`PASSWORD`
Input Supported	`true`
Output Supported	`false`

The Password Field is very similar to the Edit Text Field but can only be used to input data. Retrieving the current value is not supported.

Search Help Input¶

Property	Value
UI Type	`Text`
RestGUI Type	`SAP.TABControl.1.Edit`
GUI Type	`n/a`
Input Supported	`true`
Output Supported	`true`

The Search Help Input control is used for F4 Search Help Results.

Text Editor¶

Property	Value
UI Type	`Text`
RestGUI Type	`SAPGUI.TextEditCtrl.1`
GUI Type	`n/a`
Input Supported	`true`
Output Supported	`true`

The Text Editor control is used to display or enter very long text.

Table Controls¶

Tables in SAP GUI for HTML are mainly used as output controls in order to display a collection of complex objects. Depending on the type they also allow more complex operations like pagination, row selection or adding rows.

Search Help Result Grid¶

Property	Value
UI Type	Table
RestGUI Type	`SAP.TABControl.1.ResultGrid`
GUI Type	n/a
Input Supported	`false`
Output Supported	`true`
Additional Operations	Pagination

The Result Grid of the SAP GUI for HTML Search Help is used to display the result of an F4 Help. An example can be found in the SU01 transaction as explained in the SU01 sample scenario.

Result Grid example in SU01

Result Grid example

Table View¶

Property	Value
UI Type	`Table`
RestGUI Type	`TABLEVIEW`
GUI Type	`GuiTableControl`
Input Supported	`false`
Output Supported	`true`
Additional Operations	Pagination, Row Selection

The Table View is as basic Table which supports pagination and row selections. An example can be found in the PR05 transaction.

Table View example in PR05

Table View example

Grid View¶

Property	Value
UI Type	`Table`
RestGUI Type	`SAPGUI.GridViewCtrl.1`
GUI Type	`GuiGridView`
Input Supported	`true` (add single row)
Output Supported	`true`
Additional Operations	Pagination, Row Selection

The Grid View is a more advanced table which supports pagination and row selections. In contrast to a Table View it can also be used to input data. An example can be found in the SU01 transaction as explained in the SU01 sample scenario.

Grid View example in SU01

Grid View example

Pagination¶

By default only the visible area of an output table is present in the OData response. Therefore it requires to be scrolled through in order to get all entries. To do so, the generated OData actions and functions allow to apply pagination for tables under the following circumstances:

The sequence contains only a single output table and
The table is located at the end of the sequence.

If these requirements apply, the OData action/function will contain additional input properties:

Name	Type (Length)	Optional (Default Value)	Description
Top	Integer	Yes (25)	Maximum number of elements to request.
Skip	Integer	Yes (0)	Zero-based index of the first element.

Furthermore the sequence will contain the following output properties:

Name	Type (Length)	Description
Top	Integer	Maximum number of elements to request.
Skip	Integer	0-based index of the first element.
Count	Integer	Number of total elements in that table.

Whenever a page request is made, the full sequences will be executed. This implies that paging can cause unwanted side effects if the sequence isn't read-only. To avoid unexpected behavior we suggest to create an additional sequence only consisting of the data retrieval step. This sequence can be invoked multiple times to read the full table without triggering other actions.

Sample request for pagination:

POST /FindUsers http/1.1

{
    "FirstName": "John",
    "Top": 10,
    "Skip": 499
}

Sample response for pagination

{
    "Output": {
        "Users": [{
            "FirstName": "John",
            "LastName": "Wayne",
            "UserName": "john.wayne",
            "RowIndex": 1
        }],
        "Top": 10,
        "Skip": 499,
        "Count": 500
    },
    "State": {
        "ErrorCode": 0,
        "SubsequentActions": [
            "Get"
        ],
        "PrecedingActions": [
            "Home"
        ]
    }
}

Row Selection¶

Some SAP GUI for HTML tables may allow to select individual rows. This can be useful when processing a single item out of a collection e.g. displaying details of a specific list element. When selecting a row during a recording, mobile transaction bridge allows to change the selected row at runtime.

The following limitations apply:

Only Grid View and Table View are supported
The same table can only be used once per sequence as row selection
Table input and row selection aren't possible in the same sequence
Only one row can be selected per table

When selection a table row at design time an additional input property will be generated where ${InputName} is the table name:

Name	Type (Length)	Description
$	Integer	1-based index of selected element.

Sample request for a row selection which selects the second element of a list:

POST /FindUsers http/1.1

{
    "ListOfTripsSelection": 2
}

Note

SAP GUI for HTML expects all row indices to be 1-based. Every output table will provide the row index for its elements using the RowIndex property. This is added for each table entry and can be used for further table row selections.

Table Restrictions¶

Scrolling is only supported for a single output table per sequence, located at the last step. Read more about pagination
Table scrolling will execute the whole sequence for each requested page
For input, only a row a time can be added/edited - a row index is part of the API and needs to be provided.
Deletion of rows is not supported.
Table input is only possible for row indexes inside the visible area (no scrolling).

Tree Controls¶

Table Tree¶

Property	Value
UI Type	Table Tree
RestGUI Type	`SAP.TableTreeControl.1`
GUI Type	n/a
Input Supported	`false`
Output Supported	`true`

The Table Tree control can be used to display hierarchical data with a well defined structure. It allows nesting of objects each having the same properties/columns.

Mobile Transaction Bridge allows to record Table Tree controls as output. The structure of the selected columns is represented in the OData contract using complex types similar to tables. In addition to the columns, each item contains the following properties:

Name	Type (Length)	Nullable	Description
RowIndex	Integer	false	1-based index of the element relative to all elements of the tree using depth-first search.
ItemIndex	Integer	false	1-based index of the element relative to its parent.
NestingLevel	Integer	false	1-based index of the current nesting level.
SubItems	Collection(self)	true	List containing the child elements. Will be null if the node is collapsed and empty if no child elements exist.

Sample Response for a Table Tree¶

{
   "Output": {
      "Tree": [
         {
            "ItemIndex": 1,
            "NestingLevel": 1,
            "Title": "1st Element",
            "RowIndex": 1,
            "SubItems": [
               {
                  "ItemIndex": 1,
                  "NestingLevel": 2,
                  "Title": "2nd Element",
                  "RowIndex": 2
               },
               {
                  "ItemIndex": 2,
                  "NestingLevel": 2,
                  "Title": "3rd Element",
                  "RowIndex": 3
               }
            ]
         },
         {
            "ItemIndex": 2,
            "NestingLevel": 1,
            "Title": "4th Element",
            "RowIndex": 4
         }
      ]
   },
   "State": {
      "ErrorCode": 0,
      "SubsequentActions": [
         "Get"
      ],
      "PrecedingActions": [
         "Home"
      ]
   }
}

Table Tree example in CN41N

Result Grid example

Table Tree Restrictions¶

Table Trees are only supported as output (read-only) control.
The tree must contain a fixed column structure. Trees without a column heading are not supported.
Nesting is only supported for web applications. Mobile Development Kit apps will display trees as flat tables.

Last update: November 18, 2021