Table 

In einer Web-Dynpro-Tabelle werden Daten zweidimensional in Tabellenzellen, die in Zeilen und Spalten angeordnet sind, dargestellt. Tables sind scrollbar.

Die Web-Dynpro-Tabelle setzt sich aus dem übergeordneten UI-Element Table und mehreren View-Elementen für Tabellenspalten, TableColumn, zusammen. Die Table enthält Eigenschaften, die für die gesamte Tabelle gelten, wie beispielsweise die Festlegung, ob die Tabelle eingabefähig ist oder nicht (readOnly=true). Die TableColumn dagegen enthält sowohl Eigenschaften, die nur für die Spaltenüberschrift gelten, als auch Eigenschaften, die für die gesamte Spalte gelten und zusätzlich auch Eigenschaften, die für Zellen gelten und deren Wert per Bindung pro Zeile variieren kann.

Die Spaltenüberschrift wird durch die Aggregation Header über ein Caption-UI-Element realisiert. Die zweite Aggregation des TableColumn mit dem Namen TableCellEditor enthält ein UI-Element, das für die Darstellung der Zellen in der Spalte genutzt wird. Wenn die entsprechenden UI-Elemente auf readOnly-Attribute gebunden sind, sind sie daher auch in der Table nicht eingabebereit.

Die Table stellt die Elemente des an dataSource gebundenen Context-Knotens als Zeilen dar. Alle Eigenschaften eines TableCellEditors, die auf ein Attribut der dataSource gebunden sind, bzw. an Context-Knoten, die innerhalb der dataSource liegen, nehmen in einer Zeile nicht wie sonst üblich den Wert der Lead-Selection des Knotens an, sondern den Wert der aktuellen Zeile.

Die Aspekte, die bei dem Layouting einer Table bzw. TableColumn bezüglich der Spaltenbreite zu berücksichtigen sind, finden Sie in SAP-Hinweis 1253282.

Visualisierung

Eine Table besteht aus horizontalen und vertikalen Bereichen:

●      Table-Überschrift (Table-Header)

Diese Aggregation (Header einfügen) ist optional

●      ToolBar

Diese Aggregation (Toolbar einfügen) ist optional

●      Spaltenüberschriften/Hierarchie von Spaltenüberschriften (TableColumn-Header)

Ist für alle Spalten (auch unsichtbare) der Header auf Caption.visibility=none gesetzt, so wird die Zeile mit den Spaltenüberschriften ausgeblendet

●      Datenzeilen mit den TableCellEditoren (Cell-Editor einfügen)

Der Inhalt der Datenzeilen wird bestimmt durch:

○       TableColumns

○       Table.visibleRowCount

○       Inhalt der Table.dataSource

○       TableCellEditoren

●      Scrollbars

Für jede Table werden am rechten Rand Scrollbars angezeigt.

Beispiel:

Beim Scrollen durch eine Table wird ein Tooltip angezeigt. Die Texte für diese Scroll-Tipps legen Sie über die Aggregation SCROLL_TIP_PROVIDER fest. Wenn neue Daten geladen werden müssen, wird der Roundtrip zum Server durch das Loslassen der Maustaste ausgelöst.

Beispiel für eine einfache Table mit Header, Spaltenüberschriften, Datenzeilen und Scollbar:

 

Neben diesen allgemeinen Funktionen kann eine Table auch wesentlich komplexere Features enthalten:

●      Selektion und Selektionsspalte

●      Selektionsschalter

●      Hierarchien durch Masterspalten

●      Popins (auf Zellen- und Zeilen-Ebene)

●      Überschriften-Gruppierung

●      Zeilengruppierung

●      Spalten-Scrolling

●      Varianten

●      Sortierung von Spalten

●      Summierung

Beachten Sie, dass die Summierung nur für die SAP List Viewer Integration zur Verfügung steht.

Selektion und Selektionsspalte

Zusätzlich zu den durch die TableColumns definierten Spalten kann die Tabelle noch eine Selektionsspalte enthalten. Diese wird durch die Eigenschaft Table.selectionMode gesteuert.

Beispiel für eine Selektionsspalte in einer Table:

 

Bei readOnly-Tables (readOnly=true) kann eine Zeile auch durch Klick auf den Zeileninhalt selektiert werden. Beachten Sie dabei, dass beim Klicken auf einen Link, Button oder die Auf-/Zuklappen-Ikone der Tree-Spalte die Selektion jedoch nicht geändert wird.

Selektionsschalter

Tables können Selektionsschalter enthalten. Hierbei sind zwei Fälle zu unterscheiden:

●      Wenn selectionMode=auto und die dataSource gesetzt sind oder wenn selectionMode=multi, ist Mehrfachselektion möglich:

Der Benutzer kann über den Selektionsschalter alles (alle Zeilen) auswählen oder die Auswahl löschen.

Sie finden ein Beispiel im System in der Component WDR_TEST_TABLE unter Selection.

●      Wenn die Table mit der Aggregation TableRowArrangement der Art TableRowGrouping versehen ist, kann der Benutzer zusätzlich zum Alles auswählen und Auswahl löschen auch alles aufklappen bzw. alles zuklappen.

Sie finden ein Beispiel im System in der Component WDR_TEST_TABLE unter RowGrouping.

Beispiele für Selektionsschalter

 

 

Hierarchie

Tabellen können auch mittels der Aggregation ROW_ARRANGEMENT (RowArrangement einfügen) eine Hierarchie darstellen.

Es gibt zwei Arten dieser Aggregation, die sich im Aufbau der dataSource unterscheiden:

●      TreeByKeyTableColumn

Die dataSource ist ein flacher Knoten, in dem die Hierarchie mittels Parent-Key-Beziehung ausgedrückt wird.

●      TreeByNestingTableColumn

Die dataSource ist ein Rekursionsknoten, deren Unterknoten untergeordnete Elemente enthalten.

Beispiel für eine RowArrangement in einer Table:

 

Popin

Mit TablePopins können weitere Informationen zu einer Zeile oder Tabellenzelle direkt unterhalb der betreffenden Zeile angezeigt werden.

Beispiel für ein Row-Popin in einer Table:

 

Überschriften-Gruppierung

Wenn mehrere Zeilen oder Spalten die gleiche Überschrift haben, ist es möglich, über die Aggregation Gruppenspalten einfügen Zeilen und Spalten zusammenzufassen und eine Hierarchie zu erstellen. Hierbei gibt es zwei Arten:

●      Gruppenspalten (TableColumnGroup)

●      Table-Spalten (TableColumn)

Dabei werden die ersten drei Header-Zeilen farblich hervorgehoben.

Beispiel für eine Header-Gruppierung in einer Table:

 

Zeilengruppierung

Um gleiche Felder einer Spalte zusammenzufassen, muss der Wert TableColumn.groupingValue auf die dataSource gebunden werden. Es werden dann die aufeinander folgenden Felder zu einem Feld zusammengefasst, die den gleichen groupingValue und selectedCellVariant haben.

Beispiel für eine Zeilengruppierung in einer Table:

 

Zusätzlich steht das UI-Element TableRowGroupingfür die Darstellung gruppierter Zeilen innerhalb einer Table zur Verfügung.

Spalten-Scrolling

Generell empfiehlt es sich, nicht zu viele Spalten in eine Table einzufügen. Falls dies dennoch nötig sein sollte, dann kann durch Spalten-Scrolling das horizontale Scrolling des Browserfensters verhindert werden.

Es gibt zwei sinnvolle Varianten für das Spalten-Scrolling:

●      Feste Angabe der Anzahl sichtbarer Spalten

Dieser Modus wird durch die Angabe einer festen Zahl scrollbarer Spalten in der Eigenschaft scrollableColumnCount aktiviert. Es werden dann immer maximal die angegebene Anzahl an Spalten angezeigt und ein Paginator im Footer wird zum Scrollen angeboten.

●      In die Table passende Spalten

Damit dieser Modus zuverlässig funktioniert, müssen eine Reihe von Vorraussetzungen erfüllt werden:

○       scrollableColumnCount = -2 aktiviert den Modus

○       Es sollte zudem mit fixedTableLayout=true aktiviert werden, dass Spalten nur so breit wie angegeben werden

○       Die Breitenangaben aller Spalten und der Table müssen gesetzt sein, und das auch in der selben Einheit (Ausnahme: die Table-Breite kann auch in anderen Einheiten sein, wenn die Spaltenbreiten in Prozent angegeben sind)

Es werden dann so viele Spalten angezeigt wie in die Table passen. Sollte eine der Spalten zu breit sein, eine falsche Einheit oder gar keine Breitenangabe haben, so wird sie einzeln in voller Table-Breite angezeigt. Beachten Sie, dass bei vorhandener Selektionsspalte die Table um diese Spalte breiter als angegeben wird.

Variante

Eine Variante ist eine Liste alternativer Zellen. Sie wird über die Aggregation Zellenvarianten einfügen erstellt. Die TableStandardCell hat einen eigenen TableCellEditor.

Beachten Sie, dass von den drei Auswahlmöglichkeiten lediglich die TableStandardCell für eine Table verwendet werden sollte. Die anderen beiden Auswahlmöglichkeiten sind für den ALV reserviert.

Sortierung von Spalten

Sie können festlegen, dass eine Table bzw. die einzelnen Spalten (TableColumn) sortierbar sind. Dafür müssen die folgenden Bedingungen erfüllt sein:

●      Die Table muss enabled sein (Table.enabled = TRUE)

●      Die Table-Action OnSort muss aktiviert sein (also einen Action-Handler haben)

●      Die Eigenschaft TableColumn.sortstate muss auf none, up oder down gesetzt sein

Summierung

Diese Funktionalität sollte nicht von der Anwendungsentwicklung eingesetzt werden. Verwenden Sie stattdessen die Funktionalität des ALV.

Über die Summierung können Sie Zwischensummen und Endsummen bilden.

Beispiel für Summierungen in einer Table:

 

Barrierefreiheit

Um die Entwicklung barrierefreier Anwendungen zu ermöglichen, wird im Rahmen des Syntaxchecks die Eigenschaft accessibilityDescription überprüft, wenn die caption-Eigenschaft nicht gesetzt wurde.

Zusätzlich findet eine Überprüfung statt, ob für Spalten die Aggregation Header gesetzt ist bzw. ob die Aggregation Header sichtbar ist.

Es findet keine Überprüfung auf die Eigenschaft tooltip statt.

Im barrierefreien Modus werden bei eingeschaltetem Parameter WDLIGHTSPEED keine Paginatoren mehr verwendet. Die entsprechenden Applikationsparameter für den Paginator und Barrierefreiheit-Modus werden ignoriert.

Sie können im barrierefreien Modus mit den Cursor-Tasten in der Table navigieren.

Table-Details

Laufzeit-Klasse

CL_WD_TABLE

 

Eigenschaften im View Designer

Name	Typ	Anfangswert	Bindbar
id	STRING	(automatisch)	nein
accessibilityDescription	Übersetzbarer Text		ja
activateAccessKey	WDY_BOOLEAN	false	nein
contextMenuBehaviour	WDUI_CONTEXT_MENU_BEHAVIOUR	inherit	nein
contextMenuId	WDY_MD_UI_ELEMENT_REFERENCE		nein
dataSource	Context-Knoten		muss
design	WDUI_TABLE_DESIGN	standard	ja
displayEmptyRows	WDY_BOOLEAN	true	ja
emptyTableText	Übersetzbarer Text		ja
enabled	WDY_BOOLEAN	true	ja
firstActualRow	I	0	ja
firstVisibleRow	I	0	ja
firstVisibleScrollableCol	STRING		ja
fixedTableLayout	WDY_BOOLEAN	false	ja
footerVisible	WDY_BOOLEAN	true	ja
gridMode	WDUI_TABLE_GRID_MODE	both	ja
handleHotkeys	WDY_BOOLEAN	false	nein
legendId	WDY_MD_UI_ELEMENT_REFERENCE		ja
multiColSorting	WDY_BOOLEAN	false	ja
readOnly	WDY_BOOLEAN	false	ja
rowCount	I	-1	ja
rowSelectable	WDY_BOOLEAN	true	ja
scrollableColCount	I	-1	ja
selectedPopin	STRING		ja
selectionChangeBehaviour	WDUI_TABLE_SEL_CHNG_BEHVR	auto	nein
selectionMode	WDUI_TSMODE	auto	ja
tooltip	Übersetzbarer Text		ja
visible	WDUI_VISIBILITY	visible	ja
visibleRowCount	I	5	ja
width	STRING		ja

 

Aggregationen im View Designer

Name	Kardinalität	Typ
Tabellenspalte	0..n	TableColumn
DRAG_SOURCE_INFO	0..1	DragSourceInfo
DROP_TARGET_INFO	0..1	DropTargetInfo
Gruppenspalte	0..n	AbstractTableColumn
Header	0..1	Caption
Legendenpopin	0..1	Popin
Masterspalte	0..1	AbstractMasterTableColumn
Tabellenpopin	0..1	TablePopin
Zeilenanordnung	0..1	TableRowArrangement
SCROLL_TIP_PROVIDER	0..1	TableScrollTipProvider
Toolbar	0..1	ToolBar

 

Events im View Designer

Name

onColSelect

onDrop

onFilter

onLeadSelect

onScroll

onSelect

onSort

Weitere Eigenschaften, die über Vererbung zur Verfügung stehen, sind in den dazugehörigen übergeordneten Klassen definiert. Die dazugehörigen Oberflächenelemente sind:

●    UIElement

●    ContextMenuProvider

●    ViewElement

Datenbindung

Eine Table erhält ihre Daten von einem Context-Knoten, d.h. die Table-Eigenschaft dataSource ist an einen multiplen Context-Knoten zu binden.

Zur Laufzeit repräsentiert jedes Knotenelement der Knotenkollektion eine Zeile.

Die Anzahl der Zeilen wird durch die Anzahl der Knotenelemente bestimmt. Ebenso entsprechen die selektierten Zeilen der Knotenselektion. Ändert sich die Selektion des Context-Knotens, dann ändern sich auch die selektierten Zeilen.

Die Spalten entsprechen den Context-Attributen und werden durch eine Aggregation von TableColumn-Objekten beschrieben. Diese bestimmt sowohl die Anzahl und Ordnung der Spalten als auch die Spaltenüberschriften sowie die Breite der Spalten.

Der darzustellende Inhalt einer Zelle wird durch den Tabellenzellen-Editor (TableCellEditor) der Spalte bestimmt. Dieser muss nicht unbedingt editierbar sein, ein TableCellEditor kann den Inhalt in einer Zelle auch nur anzeigen. Folgende TableCellEditors stehen zur Auswahl:

●      Button, LinkToAction, LinkToURL:

Oberflächenelemente, die Sie zum Auslösen von Ereignissen verwenden können. Von der Benutzung des Buttons in der Table wird wegen des schwergewichtigen Designs abgeraten.

●      Caption, Image, ProgressIndicator, TextView:

Oberflächenelemente, die Sie zum Anzeigen von Texten oder Grafiken verwenden können.

Beachten Sie, dass zu lange Texte im TextView umgebrochen werden und dadurch das Layout der Table gestört werden kann. Um dies zu verhindern, nutzen Sie den fixedTableLayout-Modus der Table und setzen sie im TextView wrapping=false.

●      CheckBox, RadioButton, DropDownByKey:

Oberflächenelemente, die Sie zum Auswählen von Elementen einer bestimmten Wertemenge verwenden können.

●      DropDownByIndex

●      InputField:

Dieses Oberflächenelement erlaubt das Editieren von Zelleninhalt.

Der Inhalt, der in einer Table dargestellt werden soll, muss keine 1:1-Beziehung zur Datenquelle der Table herstellen. Beispielsweise können zwei Spalten das gleiche Context-Attribut anzeigen oder zwei Context-Attribute in der gleichen Spalte dargestellt werden.

Dynamische Programmierung

Für die dynamische Programmierung stehen dieselben Eigenschaften, Ereignisse und Aggregationen zur Verfügung wie im View Designer. Beachten Sie dabei die unterschiedlichen Schreibweisen.

Dynamische Programmierung der Eigenschaften

View Designer Name	Laufzeitname	Typ
accessibilityDescription	ACCESSIBILITY_DESCR	WDY_MD_TRANSLATABLE_TEXT
activateAccessKey	ACTIVATE_ACCESS_KEY	WDY_BOOLEAN
contextMenuBehaviour	CONTEXT_MENU_BEHAVIOUR	WDUI_CONTEXT_MENU_BEHAVIOUR
contextMenuBehaviour: inherit	CL_WD_TABLE=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT
contextMenuBehaviour: provide	CL_WD_TABLE=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE
contextMenuBehaviour: suppress	CL_WD_TABLE=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS
contextMenuId	CONTEXT_MENU_ID	WDY_MD_UI_ELEMENT_REFERENCE
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
design: transparentWithGrid	CL_WD_TABLE=>E_DESIGN-TRANSPARENT_WITH_GRID
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
handleHotkeys	HANDLE_HOTKEYS	WDY_BOOLEAN
legendId	LEGEND_ID	WDY_MD_UI_ELEMENT_REFERENCE
multiColSorting	MULTI_COL_SORTING	WDY_BOOLEAN
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

 

Dynamische Programmierung der Ereignisse

View Designer Name	Laufzeitname
onColSelect	ON_COL_SELECT
onDrop	ON_DROP
onFilter	ON_FILTER
onLeadSelect	ON_LEAD_SELECT
onScroll	ON_SCROLL
onSelect	ON_SELECT
onSort	ON_SORT

 

Dynamische Programmierung der Aggregationen

View Designer Name	Laufzeitname	Kardinalität
Tabellenspalte	COLUMNS	0..n
DRAG_SOURCE_INFO	DRAG_SOURCE_INFO	0..1
DROP_TARGET_INFO	DROP_TARGET_INFO	0..1
Gruppenspalte	GROUPED_COLUMNS	0..n
Header	HEADER	0..1
Legendenpopin	LEGEND_POPIN	0..1
Masterspalte	MASTER_COLUMN	0..1
Tabellenpopin	POPIN	0..1
Zeilenanordnung	ROW_ARRANGEMENT	0..1
SCROLL_TIP_PROVIDER	SCROLL_TIP_PROVIDER	0..1
Toolbar	TOOLBAR	0..1

 

 

Beispiel

Beispiele für dieses Oberflächenelement finden Sie im System in der Web-Dynpro-Applikation WDR_TEST_UI_ELEMENT, in der Component WDR_TEST_EVENTS in der View Table sowie in der Component WDR_TEST_TABLE und DEMO_TABLE.