Table 

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

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.

Visualisierung

Eine Table besteht aus 5 horizontalen 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 können am rechten Rand Scrollbars angezeigt werden, wenn Sie bei den Applikationsparametern den Parameter WDTABLENAVIGATION auf SCROLLBAR gesetzt haben.

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.

●      Fußzeile (für den barrierefreien Modus)

Die Sichtbarkeit des Footers wird über Table.footerVisible gesteuert.

In der Fußzeile der Tabelle werden Drucktasten zur Verfügung gestellt, die ein Navigieren erlauben. Dazu werden folgende Blätter-Funktionen angeboten:

Erste Seite (First page)	Auf der Seite oben (Page up)	Zeile nach oben (Line up)
Letzte Seite (Last page)	Auf der Seite nach unten (Page down)	Zeile nach unten (Line down)

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

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

●      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 Masterspalte (Masterspalte einfügen) eine Hierarchie darstellen.

Es gibt zwei Arten der Masterspalte, 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 Masterspalte 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:

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.

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.

Table-Details

Laufzeit-Klasse

CL_WD_TABLE

Eigenschaften im View Designer

Name	Typ	Anfangswert	Bindbar
id	STRING	(automatisch)	nein
accessibilityDescription	Übersetzbarer Text		ja
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
legendId	STRING		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
Gruppenspalte	0..n	AbstractTableColumn
Header	0..1	Caption
Legendenpopin	0..1	Popin
Masterspalte	0..1	AbstractMasterTableColumn
Tabellenpopin	0..1	TablePopin
Toolbar	0..1	ToolBar

 

Events im View Designer

Name

onFilter

onLeadSelect

onScroll

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

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

 

Dynamische Programmierung der Ereignisse

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

 

Dynamische Programmierung der Aggregationen

View Designer Name	Laufzeitname	Kardinalität
Tabellenspalte	COLUMNS	0..n
Gruppenspalte	GROUPED_COLUMNS	0..n
Header	HEADER	0..1
Legendenpopin	LEGEND_POPIN	0..1
Masterspalte	MASTER_COLUMN	0..1
Tabellenpopin	POPIN	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.