Upload
arkadiusz-adamczak
View
226
Download
0
Embed Size (px)
Citation preview
8/8/2019 Art of Table in WebDynpro 2007
1/55
Develop ing St at e-of -t he-Ar tTab le User In t er fac es inWeb Dynpro J avaSAP Net Weaver 7.0
Bertram Ganz, SAP NetWeaver UI Foundation OPS
8/8/2019 Art of Table in WebDynpro 2007
2/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 2
Learning Objec t ives
Provide an overview of the new Web Dynpro table functions inSAP NetWeaver 7.0
Layout Web Dynpro tables
Use cell variants
Size tables using absolute and relative widths
Explain grouped table headers
Talks about some of the new table functions inSAP NetWeaver CE 7.1
8/8/2019 Art of Table in WebDynpro 2007
3/55
Outlook Table in SAP NetWeaver CE 7.1
Summary
Web Dynpro Table UI Elements
Designing Tables Sizing, Layouting, Grouping
Further Notes and Topics
8/8/2019 Art of Table in WebDynpro 2007
4/55
Web Dynpro Table Metamodel
Using Table Cell Variants
Web Dynpro Table UI Elements
New Feature Overview
8/8/2019 Art of Table in WebDynpro 2007
5/55
8/8/2019 Art of Table in WebDynpro 2007
6/55 SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 6
Tab le Func t ions in SAP Net Weaver 7 .0
Fix Table
Colum ns Rightor Lef t A l igned
You can also fix
columns aligned to theright or left.
All scrollable columnsshould have the same
widths to avoidresizing of the tableafter every scrollingaction
TableCel l Var iant s
Use different table celleditors in the sametable column fordifferent table rows(See Exercise 1)
8/8/2019 Art of Table in WebDynpro 2007
7/55 SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 7
Tab le Func t ions in SAP Net Weaver 7 .0
Fix ed Top
Table Cel l
Position cell editor(s)
at fixed position ontop of the table rows
Replace the generictable filter row with
custom filter editorslike checkboxes,dropdowns
Fix ed Bot t omTable Cel l
Position cell editor(s)at fixed position atbottom of displayedtable rows
8/8/2019 Art of Table in WebDynpro 2007
8/55 SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 8
Tab le Func t ions in SAP Net Weaver 7 .0
Fixed
Table Layout
Fix table layout to
predefined sizes
Avoidjumpingtablecolumns based ondiffering text lengths
in different table rows Hidden content gets
displayed via tooltip
Table
Grid Modes
Explicitly show or hideborders of tablecolumns and tablerows
VERTICAL
8/8/2019 Art of Table in WebDynpro 2007
9/55 SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 9
Tab le Func t ions in SAP Net Weaver 7 .0
Table
Row Popin
Insert popin container
displayed betweentable rows
Popins refers to thewhole table row
TableColumnPopin(also name d
Cell Popin)
Insert popin containerdisplayed betweentable rows
Popin refers to a
specific cell in a tablecolumn
Associated cell isassigned thebackground color ofthe popin
8/8/2019 Art of Table in WebDynpro 2007
10/55 SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 10
Furt her Tab le Enhanc ements in SAP NetWeaver 7 .0
Enhanced Table Selection Behavior Support multiple selection without changing the lead selection with
property selectionMode=multiNoLead
Define selectable and non-selectable table rows with TableUI Element
property rowSelectable
Enhanced Table Eventing
onFilterTable event:IWDTable.IWDOnSort onSortTable event:IWDTable.IWDOnFilter
Parameter enrichment for tables onLeadSelectEvent: newRow,
oldRow
Further Table Enhancements Display Empty Table Text
Custom extension columns for SAP NetWeaver Portal based WebDynpro applications using an Adaptive RFC Model.
8/8/2019 Art of Table in WebDynpro 2007
11/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 11
Table UI Elem ent Assoc ia t ions
Association Name
Association Cardinality
Association Source UI Element
Association Target UI Element
8/8/2019 Art of Table in WebDynpro 2007
12/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 12
Add ing Tab le UI Element Assoc ia t ions
UI element association Column
is deprecated. Use
GroupedColumn instead
8/8/2019 Art of Table in WebDynpro 2007
13/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 13
Web Dynpro Table APIs
IWDAbstractMasterTableColumn
IWDAbstractTableCellVariant
IWDAbstractTableColumn
IWDAbstractTreeTableColumn
WDTableCellDesign
WDTableColumnFixedPositionWDTableColumnHAlign
WDTableColumnSortDirection
WDTableCompatibilityMode
WDTableDesignWDTableGridMode
WDTablePopinTitleDesign
WDTableSelectionChangeBehaviour
WDTableSelectionMode
IWDTable
IWDTableColumn
IWDTableCellEditor
IWDTableColumnGroup
IWDTableMarkableCellEditorIWDTablePopin
IWDTablePopinToggleCell
IWDTableSingleMarkableCell
IWDTableStandardCell
IWDTreeByNestingTableColumn
WDTableMethods
WDTableMethods.IWDTableMethods
IWDAbstractTreeTableColumn.IWDOnLoadChildren
IWDAbstractTableColumn.IWDOnAction
IWDTable.IWDOnSort
IWDTable.IWDOnLeadSelect
IWDTablePopinToggleCell.IWDOnToggle
Abstract APIs
View Element APIs
Helper Class
Enumerations
Events
Web Dynpro Java Runtime API - packagecom.sap.tc.webdynpro.clientserver.uielib.standard.api
In
W b D T bl M t d l i SAP N t W 7 0
8/8/2019 Art of Table in WebDynpro 2007
14/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 14
Web Dynpro Tabl e Met am odel in SAP Net Weaver 7.0
U i T bl C l l V i t
8/8/2019 Art of Table in WebDynpro 2007
15/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 15
Using Table Cel l Var iant s
With the 0:n association CellVariant of the TableColumnUI element, you can display differentcell editors in thesametable column.
Table Cell Variant
= InputField
Table Cell Variant
= TextView
Table Cell Design
Tabl e Cel l V ar iant s St a ndar d Sc e nar io *
8/8/2019 Art of Table in WebDynpro 2007
16/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 16
Tabl e Cel l V ar iant s St a ndar d Sc e nar io *
In a typical scenario you define an InputFieldUI element as thestandard cell editor and a TextViewUI element for the associatedcell variant of type TableStandardCell.
Adding a Cel l Var iant t o a Table Colum n (1)
8/8/2019 Art of Table in WebDynpro 2007
17/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 17
Adding a Cel l Var iant t o a Table Colum n (1)
AddUI Elements toView Layout
Add CellVariant of typeTable-
StandardCellto TableColumn.
Add cell editor of typeTextViewtoTableStandardCellcell
variant.
DefineRequired
ContextElements
Every table node element
must be enriched with acontext attribute storingthe selected cell variantID per node element.
Add non-singleton node
CellInfo with cardinality1..1 to (mapped) tabledata node.
Add calculated contextattribute of type Stringto
get variantKey per nodeelement (row) at runtime.
1
2
Adding a Cel l Var iant t o a Table Colum n (2)
8/8/2019 Art of Table in WebDynpro 2007
18/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 18
Adding a Cel l Var iant t o a Table Colum n (2)
DefineBinding Relation
fromTableColumnUIElement to View
Context
Property selected-CellVariant of the
TableColumnUI elementdefines the cell variant to
be displayed per tablerow. Bind this property to the
calculated contextattributeSelCellVariant..
AssignVariant Key
to Added CellVariant
Every cell variant added
to a table column mustbe specified with acorresponding variantkey.
Set property variantKey
for the added cell variantof typeTableStandardCell.
ExamplevariantKey = SOLD
3
4
Table Cel l Var iants and Contex t Bind ing
8/8/2019 Art of Table in WebDynpro 2007
19/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 19
Table in View Layout Table in View UI
Design t im e Runt ime
Context
Node Element
NodeContext
TableDataNode0..n
1..1 / Non-Singleton
Article
IsSold
...
jacket
true
...
Attribute
CellInfo
SelCellVariantCalc
TableDataNode
SOLDSOLD
skirt
false
... """"
CellInfo
CellInfo
var ian tK ey = SOLD InputField
TextView
Table Cel l Var iants and Contex t B ind ing
se lectedCel lVar iant
1
2
1
2
(calculated attribute)
Adding a Cel l Var iant t o a Table Colum n (3)
8/8/2019 Art of Table in WebDynpro 2007
20/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 20
Adding a Cel l Var iant t o a Table Colum n (3)
ImplementCalculated
ContextAttribute Getter
Methodin View
Controller
Open view controller
Implementation tab. Implement
calculated contextattribute getter to retrievevariant keys per node
element (table row). For a calculated context
attribute CellInfo.SelCellVariantthis gettermethod is named
getCellInfo-SelCellVariant().
Returned variant keysmust match the definedcell variant keys (see
step 3). Use empty String as
key for standard celleditor.
5
Calc u lat ing Var iant K eys Per Node Elem ent /Table Row
8/8/2019 Art of Table in WebDynpro 2007
21/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 21
Calc u lat ing Var iant K eys Per Node Elem ent /Table Row
public java.lang.String getCellInfoQUANTITY_SelCellVariantString getCellInfoQUANTITY_SelCellVariant(IPrivateTableCellVariantsView.ICellInfoElement element)
{
//@@begin getCellInfoQUANTITY_SelCellVariant(//IPrivateTableCellVariantsView.ICellInfoElement)
IPrivateTableCellVariantsView.IProductsElement prodEl =
(IPrivateTableCellVariantsView.IProductsElement) element
.node().getParentElement();
returnprodEl.getISSOLD()prodEl.getISSOLD()
? MyCellVariantKey.SOLD.toString()
: "" // if VariantKey does not exist "" is used ->;
//@@end
}
Table Cel l Designs When Using Cel l Var iant s
8/8/2019 Art of Table in WebDynpro 2007
22/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 22
Table Cel l Designs When Using Cel l Var iant s
With the property cellDesign defined on TableColumn
UI Element and table cell variant(TableStandardCellUIElement) level you can change the design of thedisplayed table cells and consequently table rows.
Same table cell
designfor all cells insame table row
How can table rowshave the same celldesign when using
table cell variants?
Changing Cel l Designs for Dif ferent Table Colum ns (1)
8/8/2019 Art of Table in WebDynpro 2007
23/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 23
Changing Cel l Designs for Di f ferent Table Colum ns (1)
Define Required Calculated Context Attribute
Every table node element must be enriched with a context attribute storing theselected cell design per node element.
Add non-singleton node CellInfo with cardinality 1..1 to (mapped) data node. Add calculated context attribute of dictionary simple type
com.sap.ide.webdynpro.uielementdefinitions.TableCellDesign to getcell design per node element (table row) at runtime.
1
Data TypeData Type
calculated context attributecalculated context attribute
(readOnly = true)(readOnly = true)
Changing Cel l Designs for Di f ferent Table Colum ns (2)
8/8/2019 Art of Table in WebDynpro 2007
24/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 24
g g g ( )
Define Required Data Binding Relations
Bind property cellDesign of all TableColumnUI elements to the samecalculated context attribute SelectedCellDesignCalc.
Bind property cellDesign of associated table cell variants (TableStandardCellUIElements) to the same calculated context attribute SelectedCellDesignCalc
2
cellDesigncellDesign
cellDesigncellDesign
cellDesigncellDesign
cellDesigncellDesign
cellDesigncellDesign
cellDesigncellDesign
data bindingdata binding
calculated attribute
Changing Cel l Designs for Di f ferent Table Colum ns (3)
8/8/2019 Art of Table in WebDynpro 2007
25/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 25
g g g ( )
Implement Calculated Attribute Getter in View Controller
Calculate cell design value of typeWDTableCellDesign for every table cell.
All different cellDesign properties (see step 1) are bound to the same calculatedattribute calculated attribute getter method is invoked for every displayedtable cell, or for every context attribute of all displayed table node elements.
Make sure, that the calculated attribute getter returns the same cell design valuefor the same node element.
3
public com.sap.tc.webdynpro.clientserver.uielib.standard.api
.WDTableCellDesign getCellInfoSelectedCellDesignCalcWDTableCellDesign getCellInfoSelectedCellDesignCalc(
IPrivateTableCellVariantsView.ICellInfoElement element) {
//@@begin getCellInfoSelectedCellDesign(
// IPrivateTableCellVariantsView.ICellInfoElement)
IPrivateTableCellVariantsView.IProductsElement prodEl =
(IPrivateTableCellVariantsView.IProductsElement) element
.node().getParentElement();
returnprodEl.getISSOLD()
? WDTableCellDesign.BADVALUE_LIGHT
: WDTableCellDesign.STANDARD;
//@@end
}
8/8/2019 Art of Table in WebDynpro 2007
26/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 26
EXERCISE 1
Using Table Cel l
Var ian ts
20 Minut es
8/8/2019 Art of Table in WebDynpro 2007
27/55
Sizing and Layouting Table UIs
Designing Tables Sizing, Layouting, Grouping
Grouping Table Columns
Sizing and Layout ing Tables Use Case Sc enar ios
8/8/2019 Art of Table in WebDynpro 2007
28/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 28
How to sizetables withabsolutewidths
My table width is driven by the widths of theembedded table columns
I want to avoid varying table widths when scrolling
1
How to size
tables withrelativewidths
My table must span 100% width of its embedding
container UI element I want to set minimum widths for all columns
2
How to sizetables with fixed
table layout
My table must be sized with absolute not relative orminimum widths
I want to avoid varying column width when scrolling
3
How to wraptextsin Text-Viewtable celleditors
I want to reduce the column width by wrapping thetexts of the displayed TextView cell editors.
4
How to applyhorizontal table
scrolling
My table must display several columns and gets alarge width even when applying text wrapping
I want to display a subset of fixed columns and scroll
the other column horizontally.
5
Use Case Scenario
Relevant Propert ies for Sizing Web Dynpro Tab les Widt hs
8/8/2019 Art of Table in WebDynpro 2007
29/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 29
To change the widths of Web Dynpro Tables and Table Columns
three specific UI element properties must be defined: TableUI Element Property fixedTableLayout
TableUI Element Property width
TableColumnUI Element Property width
Depending an the defined combination of property values differentsizing results can be achieved.
150px
500px
50% 50%
truetrue
TableColumn
widthwidth
fixedTableLayoutfixedTableLayout
3
1
2
Table
Tablewidthwidth
When t o Apply Abso lu te Table Widt hs
8/8/2019 Art of Table in WebDynpro 2007
30/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 30
Se t absolute tab le co lumn w idths w hen the tab le w idth
is dr iven byor can inc rease w i th t he d isp layed t ab le c o lumns !
Keeps the table width independent of the embedding container width
Table width adapts to the width of its table column content (cell editor
texts, column header texts)
tabletable must notmust not spanspanthe container widththe container width
ContainerContainer
embedding tableembedding table
NOTE: Slide content only valid for TableUI property fixedTableLayout = false
Absolut e Table Widt hs are Min imumWidths
8/8/2019 Art of Table in WebDynpro 2007
31/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 31
With TableUI element propertyfixedTableLayout = false
all absolute table widths valuesare minimumwidths.
Without defining any tablewidth property, your table getsimplicitly sized by its content Widths of column header texts
Widths of cell editor content in visible rows
By defining suitable minimumwidths you can reduce theprobability of an implicit
increase of table widths basedon larger header or cell editorcontent widths!
NOTE: Slide content only valid for TableUI property fixedTableLayout = false
The Cel l Edi t or Type Can Af fec t t he Colum ns Widt h
8/8/2019 Art of Table in WebDynpro 2007
32/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 32
The type of the rendered table cell editor can affect the column
width (with TableUI element property fixedTableLayout=false):
In a readOnly table an InputFieldcell editor is rendered as a TextView.
In an InputFieldYou can scroll the hidden text content the absolute tablecolumn size does not get enlarged and remains 150px
In a TextViewYou cannot scroll the absolute (minimum) table column sizegets enlarged the table width gets enlarged
SOLUTION: Set Table UI property fixedTableLayout to true
NOTE: Slide content only valid for TableUI property fixedTableLayout = false
TextView
Cell Editortype
false
true
TablereadOnly
InputField 150px
150px
Columnwidth
scrolltext
Im pl ic i t Sizing of
http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=18/8/2019 Art of Table in WebDynpro 2007
33/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 33
Im pl ic i t Sizing of
Table Widt hs
Absolu te Widt hs
are Min imumWidt hs
When t o Apply Relat iveTable Widt hs
http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=18/8/2019 Art of Table in WebDynpro 2007
34/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 34
Set a relative table width when the table width is driven by the
width of its parent container but not of the table content!
Keeps the table width relative to the width of the embedding container
Table width only adapts to the width of its table columns when large
column header texts or cell content gets displayed.
table must span the container width
Container
embeddingtable
width = 100%
Sizing Tab les w i t h Relat iveWidths
8/8/2019 Art of Table in WebDynpro 2007
35/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 35
A relative table width is
controlled by the definedwidthof its embedding (scroll)container
When defining relativewidths atable gets still implicitly sizedby its content
With TableUI element property
fixedTableLayout = falseall relativetable width valuesare minimumwidths related tothe absolutewidth of the
embedding containerSet the TableUI element widthto 100% to span the wholewidth of the embedding
container by default!
width = 100%
NOTE: Slide content only valid for TableUI property fixedTableLayout = false
Combin ing Abso lu te w i t h Relat iveTable Widt hs (1)
8/8/2019 Art of Table in WebDynpro 2007
36/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 36
You can combine relativeand absolutewidths in the UI elements
Tableand TableColumn.
Set relative table width
Set absolute table width
Set some columns with absolutewidths
Set other columns with relative widths summed up to 100%
width = 100%
50%150px 50%
NOTE: Slide content only valid for TableUI property fixedTableLayout = false
100%
+
Relat ive Table Widt hs
http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=18/8/2019 Art of Table in WebDynpro 2007
37/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 37
Relat iveTable Widt hs
Mix ing Relat ivew i t hAbsolu te Widt hs
Tex t Wrapping of Cel l Edi t or Cont ent in Table Colum ns
http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=18/8/2019 Art of Table in WebDynpro 2007
38/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 38
Apply text wrapping of TextViewcell editor content to
keep the column width close to the defined minimum widths, as long ascell text does not enlarge it,
avoidor delayhorizontal scrolling based on long texts.
NOTE: Text wrapping only works for text containing whitespace
50% 50%
true falseTextView
textWrapping
false falseTextView
textWrapping
50% 50%
NOTE: Slide content only valid for TableUI property fixedTableLayout = false
Using a Fix ed Table Layout
8/8/2019 Art of Table in WebDynpro 2007
39/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 39
By setting the TableUI element property fixedTableLayout to
true you can achieve fixed widthsinstead of minimumtable(column) widths.
PRO: Avoid / Delay horizontal scrolling based on long texts in table
CON: Hidden cell editor or column header texts are displayed in tooltips
CON: Cannot be combined with cell editor text wrapping
150px
500px
50% 50%
fixedTableLayout = truefixedTableLayout = true
TableColumnwidths
Table
widthNOTE: Slide content only valid for TableUI property fixedTableLayout = true
Fix ed Table Colum ns and Hor izont a l Sc ro l l ing of Colum ns
8/8/2019 Art of Table in WebDynpro 2007
40/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 40
Apply scrollable and fixed table columns to reduce the number of
columns being displayed
PROS: Display large tables with large number of columns, without
scrolling the embedding container,
reading cell content in tooltips based on heavily shrunk column widths
CONS:
User must explicitly scroll columns to see hidden column content
Potential variation of displayed table columns based on varying column
content widths (see note)
Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7 Col 8 Col 9 Col 10
cell cell cell cell cell cell cell cell cell cell
cell cell cell cell cell cell cell cell cell cell
leftTableColumn
fixedPosition notFixed right
Table scrollableColCount 2
Table Tex t Wrapping
http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=18/8/2019 Art of Table in WebDynpro 2007
41/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 41
Using Fix ed Table Layout
Sc ro l l ing Table Colum ns
http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=1http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableSizingApp?SAPtestId=18/8/2019 Art of Table in WebDynpro 2007
42/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 42
EXERCISE 2
Sizing and Layout ingTable UIs
15 Minut es
Groupin g Table Colum ns
8/8/2019 Art of Table in WebDynpro 2007
43/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 43
Tables columns headers can be grouped hierarchically by
inserting TableColumnGroupUI elements between TableandTableColumnUI elements:
Grouped Table Columns Met am odel
8/8/2019 Art of Table in WebDynpro 2007
44/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 44
Migrat ing Deprecat ed Tab le UI Elem ent Assoc ia t ion
8/8/2019 Art of Table in WebDynpro 2007
45/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 45
The UI element association Columnfrom a TableUI element to a
TableColumnUI element is deprecated:
Do not use the Tablecontext menu item Insert Column any more!
Use the new association GroupedColumn instead
Depre c at ed As soc i at io n New Ass oc i at ion As soc i at ion Targ et U I Elem ent
Column GroupedColumn IWDTableColumn IWDTableColumnGroup
Migrate deprecated UI elementassociations of the Table UI
element with context function
Migrate Columns
http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableColumnGroupsApp8/8/2019 Art of Table in WebDynpro 2007
46/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 46
EXERCISE 3
Adding GroupedTable Colum ns
15 Minut es
http://wdfn00176445a:53000/webdynpro/dispatcher/local/CD254_WDTableUIs_Demo/TableColumnGroupsApp8/8/2019 Art of Table in WebDynpro 2007
47/55
Outlook Table in SAP NetWeaver CE 7.1
Summary
Web Dynpro Table UI Elements
Further Notes and Topics
Designing Tables Sizing, Layouting, Grouping
Furt her Not es and Topic s (1)
8/8/2019 Art of Table in WebDynpro 2007
48/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 48
Additional technical information on the Web Dynpro Table subject
matter can be found in SAP Online Help and on SDN:
Topic L ink
Table in SAP
Online Help
http://help.sap.com/saphelp_nw2004s/helpdata/en
/b8/f87842fdb70f53e10000000a155106/frameset.htm
Table Tutorial SDN Tutorial Creating a Tree Structue in a Tablehttps://www.sdn.sap.com/irj/servlet/prt/portal/
prtroot/com.sap.km.cm.docs/library/uuid/49f2ea9
0-0201-0010-ce8e-de18b94aee2d
Trees in Table SDN Tutorial Creating a Tree Structue in a TableLink URL: See Table Tutorial
Master Detail Table
Tutorial
SDN Tutorial Context Programming and Data Binding
Link URL: See Table Tutorial
Table SelectionBehavior
SDN Article Enhancing Table Performancehttps://www.sdn.sap.com/irj/sdn/weblogs?blog=/p
ub/wlg/2343
Furt her Not es and Topic s (2)
http://help.sap.com/saphelp_nw2004s/helpdata/en/b8/f87842fdb70f53e10000000a155106/frameset.htmhttp://help.sap.com/saphelp_nw2004s/helpdata/en/b8/f87842fdb70f53e10000000a155106/frameset.htmhttps://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/uuid/49f2ea90-0201-0010-ce8e-de18b94aee2dhttps://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/uuid/49f2ea90-0201-0010-ce8e-de18b94aee2dhttps://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/uuid/49f2ea90-0201-0010-ce8e-de18b94aee2dhttps://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/uuid/49f2ea90-0201-0010-ce8e-de18b94aee2dhttps://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/2343https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/2343https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/2343https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/2343https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/2343https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/uuid/49f2ea90-0201-0010-ce8e-de18b94aee2dhttps://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/uuid/49f2ea90-0201-0010-ce8e-de18b94aee2dhttps://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/uuid/49f2ea90-0201-0010-ce8e-de18b94aee2dhttp://help.sap.com/saphelp_nw2004s/helpdata/en/b8/f87842fdb70f53e10000000a155106/frameset.htmhttp://help.sap.com/saphelp_nw2004s/helpdata/en/b8/f87842fdb70f53e10000000a155106/frameset.htm8/8/2019 Art of Table in WebDynpro 2007
49/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 49
Additional technical information on the Web Dynpro Table subject
matter can be found in SAP Online Help and on SDN:
Topic L ink
Downloading Files
in Tables on-demand
SDN Article Uploading and Downloading Files in Web
Dynpro Tables - SAP NetWeaver 7.0https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/6603
Excel Export in
Tables
SDN Wiki Code Tutorial Exporting Table Data Using On-Demand Streams - SAP NetWeaver 7.0https://wiki.sdn.sap.com/wiki/x/0mQ
Sorting in Tables SDN WebLog Enhanced Web Dynpro Java TableSorter forSAP NetWeaver 04shttps://www.sdn.sap.com/irj/sdn/weblogs?blog=/p
ub/wlg/3287
Vetoable LeadSelection Change
Web Dynpro Runtime API JavaDoc:WDTableSelectionMode
https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/6603https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/6603https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/6603https://wiki.sdn.sap.com/wiki/x/0mQhttps://wiki.sdn.sap.com/wiki/x/0mQhttps://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/3287https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/3287https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/3287http://production/makeresults/repository/WebDynproRuntime/645_SP_COR/gen/dbg/java/javadocs/api/com/sap/tc/webdynpro/clientserver/uielib/standard/api/WDTableSelectionMode.htmlhttp://production/makeresults/repository/WebDynproRuntime/645_SP_COR/gen/dbg/java/javadocs/api/com/sap/tc/webdynpro/clientserver/uielib/standard/api/WDTableSelectionMode.htmlhttp://production/makeresults/repository/WebDynproRuntime/645_SP_COR/gen/dbg/java/javadocs/api/com/sap/tc/webdynpro/clientserver/uielib/standard/api/WDTableSelectionMode.htmlhttps://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/3287https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/3287https://wiki.sdn.sap.com/wiki/x/0mQhttps://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/6603https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/66038/8/2019 Art of Table in WebDynpro 2007
50/55
Outlook Table in SAP NetWeaver CE 7.1
Summary
Web Dynpro Table UI Elements
Further Notes and Topics
Designing Tables Sizing, Layouting, Grouping
New Feat ures i n SAP Net Weaver CE 7.1
8/8/2019 Art of Table in WebDynpro 2007
51/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 51
The UI element Table has been enhanced in SAP NetWeaver CE 7.1
Multi sorting ability and visualize filtered column
Horizontal and vertical table scrolling
Provide scroll tip for scroll status (index scroll tips)
Wrapping of table column headers
Generic selection menu (Select/deselect all)
Selectable columns
Scroll tip
Selection MenuSelection Menu
8/8/2019 Art of Table in WebDynpro 2007
52/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 52
8/8/2019 Art of Table in WebDynpro 2007
53/55
Outlook Table in SAP NetWeaver CE 7.1
Summary
Web Dynpro Table UI Elements
Interacting with Table UIs
Further Notes and Topics
Designing Tables Sizing, Layouting, Grouping
Summary
8/8/2019 Art of Table in WebDynpro 2007
54/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 54
Have an overview of the new Web Dynpro table functions in
SAP NetWeaver 7.0 Know about table layouting functions
Understand how to use cell variants
Know how to size tables using absolute and relative widths
Have a grasp of table grouping
Know about some of the functions in SAP NetWeaver CE 7.1
Fur t her Informat ion
8/8/2019 Art of Table in WebDynpro 2007
55/55
SAP AG 2007, SAP NetWeaver F UI OPS / Bertram Ganz / 55
SAP Publ ic Web:SAP Developer Network (SDN): www.sdn.sap.com and
www.sdn.sap.com/irj/sdn/developerareas/webdynpro
Business Process Expert (BPX) Community: www.bpx.sap.com
Relat ed SAP Educ at ion and Cert i f ic at ion Opport un i t ieshttp://www.sap.com/education/
Relat ed SAP Cont entCD254 Developing State-of-the-Art Table UIs in WD Java - Exercises
https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/80d81237-b780-2a10-d398-cc33af6bd75chttps://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/80d81237-b780-2a10-d398-cc33af6bd75c