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.
Die Verwendung des Table UI-Elements in den UI-Elementen TablePopin und RowRepeater wird nicht unterstützt.
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
● Selektions- und Hierarchiemenü
● 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.
Selektions- und Hierarchiemenü
Tables können Selektionsschalter (Tabellen-Selektionsmenü) in der linken oberen Ecke enthalten.
● Falls Mehrachselektion in der Table möglich ist, d.h. falls selectionMode = multi oder multiNoLead oder aber wenn selectionMode=auto und die dataSource die Selektionskardinalität 0..n oder 1..n hat, kann der der Benutzer über das Menü alle Zeilen selektieren oder deselektieren. Die Lead-Selection bleibt beim "Select all" erhalten. Falls keine Lead-Selection gesetzt ist, wird durch "Select all" keine Lead-Selection gesetzt. Beim "Deselect all" wird auch die Lead-Selection mit gelöscht.
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
Beachten Sie, dass der Selektionsschalter (Tabellen-Selektionsmenü) für hierarchische Tabellen (TreeByKeyTableColumn, TreeByNestingTableColumn) nicht zur Verfügung steht.
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:
Die dataSource ist ein flacher Knoten, in dem die Hierarchie mittels Parent-Key-Beziehung ausgedrückt wird.
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 |
Übersetzbarer Text |
|
ja |
|
WDY_BOOLEAN |
false |
nein |
|
WDUI_CONTEXT_MENU_BEHAVIOUR |
inherit |
nein |
|
WDY_MD_UI_ELEMENT_REFERENCE |
|
nein |
|
Context-Knoten |
|
muss |
|
WDUI_TABLE_DESIGN |
standard |
ja |
|
WDY_BOOLEAN |
true |
ja |
|
Übersetzbarer Text |
|
ja |
|
WDY_BOOLEAN |
true |
ja |
|
I |
0 |
ja |
|
I |
0 |
ja |
|
STRING |
|
ja |
|
WDY_BOOLEAN |
false |
ja |
|
WDY_BOOLEAN |
true |
ja |
|
WDUI_TABLE_GRID_MODE |
both |
ja |
|
WDY_BOOLEAN |
false |
nein |
|
WDY_MD_UI_ELEMENT_REFERENCE |
|
ja |
|
WDY_BOOLEAN |
false |
ja |
|
WDY_BOOLEAN |
false |
ja |
|
I |
-1 |
ja |
|
WDY_BOOLEAN |
true |
ja |
|
I |
-1 |
ja |
|
STRING |
|
ja |
|
WDUI_TABLE_SEL_CHNG_BEHVR |
auto |
nein |
|
WDUI_TSMODE |
auto |
ja |
|
Übersetzbarer Text |
|
ja |
|
WDUI_VISIBILITY |
visible |
ja |
|
I |
5 |
ja |
|
STRING |
|
ja |
Aggregationen im View Designer
Name |
Kardinalität |
Typ |
0..n |
||
0..1 |
||
0..1 |
||
0..n |
||
0..1 |
||
0..1 |
||
0..1 |
||
0..1 |
||
0..1 |
TableRowArrangement |
|
0..1 |
||
0..1 |
Events im View Designer
Name |
Weitere Eigenschaften, die über Vererbung zur Verfügung stehen, sind in den dazugehörigen übergeordneten Klassen definiert. Die dazugehörigen Oberflächenelemente sind:
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 |
ACCESSIBILITY_DESCR |
WDY_MD_TRANSLATABLE_TEXT |
|
ACTIVATE_ACCESS_KEY |
WDY_BOOLEAN |
|
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 |
|
CONTEXT_MENU_ID |
WDY_MD_UI_ELEMENT_REFERENCE |
|
DATA_SOURCE |
OBJECT |
|
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 |
|
DISPLAY_EMPTY_ROWS |
WDY_BOOLEAN |
|
EMPTY_TABLE_TEXT |
WDY_MD_TRANSLATABLE_TEXT |
|
ENABLED |
WDY_BOOLEAN |
|
FIRST_ACTUAL_ROW |
I |
|
FIRST_VISIBLE_ROW |
I |
|
FIRST_VISIBLE_SCROLL_COL |
STRING |
|
FIXED_TABLE_LAYOUT |
WDY_BOOLEAN |
|
FOOTER_VISIBLE |
WDY_BOOLEAN |
|
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 |
|
HANDLE_HOTKEYS |
WDY_BOOLEAN |
|
LEGEND_ID |
WDY_MD_UI_ELEMENT_REFERENCE |
|
MULTI_COL_SORTING |
WDY_BOOLEAN |
|
READ_ONLY |
WDY_BOOLEAN |
|
ROW_COUNT |
I |
|
ROW_SELECTABLE |
WDY_BOOLEAN |
|
SCROLLABLE_COL_COUNT |
I |
|
SELECTED_POPIN |
STRING |
|
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 |
|
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 |
WDY_MD_TRANSLATABLE_TEXT |
|
VISIBLE |
WDUI_VISIBILITY |
|
visible: none |
CL_WD_TABLE=>E_VISIBLE-NONE |
|
visible: visible |
CL_WD_TABLE=>E_VISIBLE-VISIBLE |
|
VISIBLE_ROW_COUNT |
I |
|
WIDTH |
STRING |
|
Dynamische Programmierung der Ereignisse
View Designer Name |
Laufzeitname |
ON_COL_SELECT |
|
ON_DROP |
|
ON_FILTER |
|
ON_LEAD_SELECT |
|
ON_SCROLL |
|
ON_SELECT |
|
ON_SORT |
Dynamische Programmierung der Aggregationen
View Designer Name |
Laufzeitname |
Kardinalität |
COLUMNS |
0..n |
|
DRAG_SOURCE_INFO |
0..1 |
|
DROP_TARGET_INFO |
0..1 |
|
GROUPED_COLUMNS |
0..n |
|
HEADER |
0..1 |
|
LEGEND_POPIN |
0..1 |
|
MASTER_COLUMN |
0..1 |
|
POPIN |
0..1 |
|
ROW_ARRANGEMENT |
0..1 |
|
SCROLL_TIP_PROVIDER |
0..1 |
|
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.