Table 

In a Web Dynpro table, data is displayed two-dimensional in table cells arranged in rows and columns.

The Web Dynpro table consists of the higher-level UI element Table and several view elements for table columns, TableColumn. The table contains properties that apply to the entire table, such as one to determine whether entries can be made in the table (readOnly=true). In comparison, the TableColumn contains properties that are valid only for column headings, properties valid for the whole column, and also other properties valid for cells whose values can vary for each row binding.

The column heading is implemented by the aggregation Header using a caption UI element. The second aggregation of TableColumn with the name TableCellEditor contains a UI element that is used to display the cells in the column. If the relevant UI elements are bound to readOnly attributes, data cannot be entered in them in the table.

The Table represents the elements of the context node bound to dataSource. All the properties of a TableCellEditor that are bound to an attribute of dataSource or to context nodes within the dataSource, do not assume the value of the lead selection of the node as is usual, instead they have the value of the selected row.

Visualization

A Table consists of five horizontal areas:

●      Table header

This aggregation (Insert Header) is optional.

●      ToolBar

This aggregation (Insert Toolbar) is optional.

●      Column headers/hierarchy of column headers (TableColumn header)

If the header is set to Caption.visibility=none for all columns (including hidden ones), the row with the column headers is hidden.

●      Data rows with TableCellEditors (Insert Cell Editor)

The content of the data rows is determined by:

○       TableColumns

○       Table.visibleRowCount

○       Content of Table.dataSource

○       TableCellEditors

●      Scrollbars

Scroll bars can be displayed on the right-hand side of each table, provided you have set Application Parameter WDTABLENAVIGATION to SCROLLBAR.

Example:

When you scroll through a table, a tooltip is displayed. You determine the texts for these scroll tips using the aggregation SCROLL_TIP_PROVIDER. If new data needs to be loaded, releasing the mouse triggers the round trip to the server.

●      Footer (for accessible mode)

CL_WD_TREE_BY_NST_TABLE_COL=>E_CELL_DESIGN-GOODVALUE_DARK

Pushbuttons provided in the footer of the table allow navigation. The following scroll bar functions are available:

First page	Page up	Line up
Last page	Page down	Line down

Example of a simple table with header, column headings, data rows and scrollbar:

In addition to these standard functions, a table can also contain more complex features:

●      Selection and selection column

●      Selection key

●      Master column hierarchies

●      Popins (at cell and row levels)

●      Header group

●      Row grouping

●      Column scrolling

●      Variants

●      Totaling

Note that aggregation is available only for the SAP List Viewer Integration.

Selection and selection column

In addition to the columns defined by TableColumns, the table can also contain a selection column. This is controlled by the property Table.selectionMode.

Example of a selection column in a table:

In the case of readOnly tables (readOnly = true), you can select a row by clicking the row content. Note that the selection is not changed if you click a link, button, or the expand/collapse icons of the tree column.

Selection key

Tables can contain selection keys. There are two cases here:

●      If selectionMode=auto and the dataSource are set, or if selectionMode=multi, multiple selection is possible:

The user can use the selection key to select everything (all rows) or to delete the selection.
You can find an example in the system in component WDR_TEST_TABLE, under selection.

●      If the table has aggregation TableRowArrangement of type TableRowGrouping, the user can also expand and collapse everything, in addition to selecting and deleting everything:

You can find an example in the system in component WDR_TEST_TABLE, under RowGrouping.

Examples of selection key:

Hierarchy

Tables can also represent a hierarchy using the aggregation master column (Insert Master Column).

There are two types of master column differentiated by the structure of the data source:

●      TreeByKeyTableColumn

The data source is a flat node, meaning that the hierarchy is displayed using the parent to key relationship.

●      TreeByNestingTableColumn

The data source is a recursive node whose subnodes contain lower-level elements.

Example of a master column in a table:

Popin

TablePopins display further information about a row or table cell directly beneath the row in question.

Example of a row popin in a table:

 

Header group

If several rows or columns have the same header, rows and columns can be combined using the aggregation Insert Group Columns and a hierarchy created. There are two ways of doing this:

●      Group columns (TableColumnGroup)

●      Table columns (TableColumn)

For this purpose the first three header lines are highlighted in color.

Example of a header grouping in a table:

Row grouping

To combine the fields belonging to one column, the value TableColumn.groupingValue must be bound to the dataSource. The consecutive fields that have the same values for groupingValue and selectedCellVariant are merged into one field.

Example of a row grouping in a table:

Column scrolling

We recommend that you do not insert too many columns into a table. If it is however still necessary to do so, horizontal scrolling in the browser window can be avoided by using column scrolling.

There are ways to implement column scrolling:

●      Fixed number of visible columns

This mode is activated by specifying a fixed number of scrollable columns in the property scrollableColumnCount. The maximum number of columns specified is always displayed and a paginator is provided in the footer for scrolling.

●      Columns that fit in the table

So that this mode functions reliably, a range of prerequisites must be met:

○       scrollableColumnCount = -2 activates the mode.

○       Furthermore fixedTableLayout=true should be activated so that columns are shown only as wide as specified.

○       The width specifications of all columns and of the table must be defined, and in the same unit too (exception:  the table width can be in a different unit if the column widths are given as a percentage).

As many columns as fit in the table will be displayed. If one of the columns is too wide, in the wrong unit of measure, or has no width specification, it is displayed separately in the full table width. Note that with an existing selection column, this column is added to the table making the table wider than specified.

Variant

A variant is a list of alternative cells. It is created with the aggregation Insert Cell Variants. The TableStandardCell has its own TableCellEditor.

Note that from the three selection options only the TableStandardCell should be used for a table. The other two options are reserved for the ALV.

Totaling

This function should not be used by application developers. Instead they should use the ALV functions.

With totaling you can create subtotals and totals.

Example of totaling in a table:

Accessibility

To enable the development of accessible applications, the accessibilityDescription property is checked during the syntax check if the caption property is not set.

In addition a check is made whether the aggregation Header is set of columns and whether the aggregation header is visible.

The tooltip property is not checked.

Table Details

Runtime Class

CL_WD_TABLE

Properties in View Designer

Name	Type	Initial Value	Bindable
ID	STRING	(automatic)	no
accessibilityDescription	Translatable text		yes
dataSource	Context nodes		Mandatory
design	WDUI_TABLE_DESIGN	standard	yes
displayEmptyRows	WDY_BOOLEAN	true	yes
emptyTableText	Translatable text		yes
enabled	WDY_BOOLEAN	true	yes
firstActualRow	I	0	yes
firstVisibleRow	I	0	yes
firstVisibleScrollableCol	STRING		yes
fixedTableLayout	WDY_BOOLEAN	false	yes
footerVisible	WDY_BOOLEAN	true	yes
gridMode	WDUI_TABLE_GRID_MODE	both	yes
legendId	STRING		yes
readOnly	WDY_BOOLEAN	false	yes
rowCount	I	-1	yes
rowSelectable	WDY_BOOLEAN	true	yes
scrollableColCount	I	-1	yes
selectedPopin	STRING		yes
selectionChangeBehaviour	WDUI_TABLE_SEL_CHNG_BEHVR	auto	no
selectionMode	WDUI_TSMODE	auto	yes
tooltip	Translatable text		yes
visible	WDUI_VISIBILITY	visible	yes
visibleRowCount	I	5	yes
width	STRING		yes

 

Aggregations in View Designer

Name	Cardinality	Type
Table Column	0..n	TableColumn
Group Column	0..n	AbstractTableColumn
Header	0..1	Caption
Legend Popin	0..1	Popin
MasterColumn	0..1	AbstractMasterTableColumn
TablePopin	0..1	TablePopin
Toolbar	0..1	ToolBar

 

Events in View Designer

Name

onFilter

onLeadSelect

onScroll

onSort

Other properties that can be inherited are defined in the associated higher-level classes. The associated UI elements are:

●        UIElement

●        ViewElement

Data Binding

A table receives its data from a context node – that is, the table property dataSource must be bound to a multiple context node.

At runtime, each node element of the node collection is a row.

The number of rows is identical to the number of node elements. The selected rows correspond to the node selection. If the selection of the context node changes, the selected rows also change.

The columns correspond to the context attributes and are described by the aggregation of TableColumn objects. They specify the number and order of columns as well as the headers and the width of the columns.

The content of a cell to be displayed is specified by the table cell editor (TableCellEditor) of the column. The table cell editor can only display the content in a cell, so it does not make any difference if the content cannot be edited. The following table cell editors can be selected:

●      Button, LinkToAction, LinkToURL:

UI elements that can be used to trigger events. We recommend not to use Button in the table due to its problematic design.

●      Caption, Image, ProgressIndicator, TextView:

UI elements that can be used to display texts or graphics.

Note that if the texts are too long they are wrapped in TextView and this can spoil the layout of the table. To prevent this use the fixed table layout mode of the table and set wrapping=false in TextView.

●      CheckBox, RadioButton, DropDownByKey:

UI elements that can be used to select elements of a specific value set.

●      DropDownByIndex

●      InputField:

This UI elements enables cell contents to be edited.

The content to be displayed in a table does not have to be identical to the data source of the table. For example, two columns can display the same context attribute or two context attributes can be displayed in the same column.

Dynamic programming

For dynamic programming, the same properties, events and aggregations are available as in the view designer. Bear in mind the different spellings.

Dynamic Programming of Properties

View Designer Name	Runtime Name	Type
accessibilityDescription	ACCESSIBILITY_DESCR	WDY_MD_TRANSLATABLE_TEXT
dataSource	DATA_SOURCE	OBJECT
design	DESIGN	WDUI_TABLE_DESIGN
design: alternating	CL_WD_TABLE=>E_DESIGN-ALTERNATING
design: standard	CL_WD_TABLE=>E_DESIGN-STANDARD
design: transparent	CL_WD_TABLE=>E_DESIGN-TRANSPARENT
displayEmptyRows	DISPLAY_EMPTY_ROWS	WDY_BOOLEAN
emptyTableText	EMPTY_TABLE_TEXT	WDY_MD_TRANSLATABLE_TEXT
enabled	ENABLED	WDY_BOOLEAN
firstActualRow	FIRST_ACTUAL_ROW	I
firstVisibleRow	FIRST_VISIBLE_ROW	I
firstVisibleScrollableCol	FIRST_VISIBLE_SCROLL_COL	STRING
fixedTableLayout	FIXED_TABLE_LAYOUT	WDY_BOOLEAN
footerVisible	FOOTER_VISIBLE	WDY_BOOLEAN
gridMode	GRID_MODE	WDUI_TABLE_GRID_MODE
gridMode: both	CL_WD_TABLE=>E_GRID_MODE-BOTH
gridMode: horizontal	CL_WD_TABLE=>E_GRID_MODE-HORIZONTAL
gridMode: none	CL_WD_TABLE=>E_GRID_MODE-NONE
gridMode: vertical	CL_WD_TABLE=>E_GRID_MODE-VERTICAL
legendId	LEGEND_ID
readOnly	READ_ONLY	WDY_BOOLEAN
rowCount	ROW_COUNT	I
rowSelectable	ROW_SELECTABLE	WDY_BOOLEAN
scrollableColCount	SCROLLABLE_COL_COUNT	I
selectedPopin	SELECTED_POPIN	STRING
selectionChangeBehaviour	SELECTION_CHANGE_BEHAVIOUR	WDUI_TABLE_SEL_CHNG_BEHVR
selectionChangeBehaviour: auto	CL_WD_TABLE=>E_SELECTION_CHANGE_BEHAVIOUR-AUTO
selectionChangeBehaviour: ifNoLoss	CL_WD_TABLE=>E_SELECTION_CHANGE_BEHAVIOUR-IF_NO_LOSS
selectionChangeBehaviour: manual	CL_WD_TABLE=>E_SELECTION_CHANGE_BEHAVIOUR-MANUAL
selectionMode	SELECTION_MODE	WDUI_TSMODE
selectionMode: auto	CL_WD_TABLE=>E_SELECTION_MODE-AUTO
selectionMode: multi	CL_WD_TABLE=>E_SELECTION_MODE-MULTI
selectionMode: multiNoLead	CL_WD_TABLE=>E_SELECTION_MODE-MULTI_NO_LEAD
selectionMode: none	CL_WD_TABLE=>E_SELECTION_MODE-NONE
selectionMode: single	CL_WD_TABLE=>E_SELECTION_MODE-SINGLE
selectionMode: singleNoLead	CL_WD_TABLE=>E_SELECTION_MODE-SINGLE_NO_LEAD
tooltip	TOOLTIP	WDY_MD_TRANSLATABLE_TEXT
visible	VISIBLE	WDUI_VISIBILITY
visible: none	CL_WD_TABLE=>E_VISIBLE-NONE
visible: visible	CL_WD_TABLE=>E_VISIBLE-VISIBLE
visibleRowCount	VISIBLE_ROW_COUNT	I
width	WIDTH	STRING

 

Dynamic Programming of Events

View Designer Name	Runtime Name
onFilter	ON_FILTER
onLeadSelect	ON_LEAD_SELECT
onScroll	ON_SCROLL
onSort	ON_SORT

 

Dynamic Programming of Aggregations

View Designer Name	Runtime Name	Cardinality
Table Column	COLUMNS	0..n
Group Column	GROUPED_COLUMNS	0..n
Header	HEADER	0..1
Legend Popin	LEGEND_POPIN	0..1
MasterColumn	MASTER_COLUMN	0..1
TablePopin	POPIN	0..1
Toolbar	TOOLBAR	0..1

Example

You can find examples of this interface element in the system in the Web Dynpro application WDR_TEST_UI_ELEMENT, and in the component WDR_TEST_EVENTS in the component WDR_TEST_TABLE.