UI Element Guide

UI Element Guide
Applies to:
Web Dynpro for Java in SAP NetWeaver CE 7.11
Summary
What you probably will know as “control” or “UI control”, in Web Dynpro it is called UI element. On the first
view a UI element looks similar to a control, since you also find buttons, input fields and text views. But a
Web Dynpro UI element is a lot more than a simple HTML control. It is implemented as an interface and
provides many functions. There are UI elements to display different kinds of business graphics, complex UI
elements like the Table with numerous display options and many different layouts to arrange UI elements in
a view.
This document is a compressed version of the UI Element Guide
you can find on SAP Help Portal or in the help section of your
NWDS. Check out the full version here: UI Element Guide
Author: Stefanie Bacher
Company: SAP AG
Created on: 1 December 2008
Author Bio
Stefanie Bacher works as a product specialist and information developer within the SAP
NetWeaver Solution Management Rollout for User Interaction Technology. She focuses on
knowledge distribution of Web Dynpro for Java.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2008 SAP AG 1
UI Element Guide
Table of Contents
UI Element Guide............................................................................................................................................7
Common UI Element Properties .....................................................................................................................7
WDTableCellDesign........................................................................................................................................8
Specifying the Image Source ..........................................................................................................................9
Choosing the Layout .....................................................................................................................................10
ColumnLayout ...............................................................................................................................................10
ColumnLayoutData and ColumnLayoutHeadData........................................................................................12
FlowLayout....................................................................................................................................................12
FlowData .......................................................................................................................................................12
GridLayout.....................................................................................................................................................13
GridData........................................................................................................................................................14
MatrixLayout..................................................................................................................................................15
MatrixData and MatrixHeadData...................................................................................................................15
RowLayout ....................................................................................................................................................18
RowData and RowHeadData........................................................................................................................18
Defining PageLayout.....................................................................................................................................20
Implementing Drag and Drop........................................................................................................................21
DragSourceInfo .............................................................................................................................................22
DropTarget ....................................................................................................................................................23
DropTargetInfo ..............................................................................................................................................23
FileDropTarget ..............................................................................................................................................24
Containers.....................................................................................................................................................25
ScrollContainer ........................................................................................................................................25
Group .......................................................................................................................................................26
TransparentContainer ..............................................................................................................................27
Tray ...............................................................................................................................................................28
AnalyticsChart ...............................................................................................................................................29
BIApplicationFrame .................................................................................................................................32
BIMethods API: Access to Actions of a BEx Web Application......................................................................33
Breadcrumb Navigation.................................................................................................................................34
BreadCrumb ............................................................................................................................................34
BreadCrumbStep .....................................................................................................................................34
MultipleBreadCrumbStep ..............................................................................................................................35
BusinessGraphics .........................................................................................................................................35
Category........................................................................................................................................................38
Series ............................................................................................................................................................38
Point ..............................................................................................................................................................39
SimpleSeries .................................................................................................................................................39
NumericValue................................................................................................................................................40
TimeValue .....................................................................................................................................................41
Button - ButtonRow ............................................................................................................................41

© 2008 SAP AG 2
UI Element Guide
ButtonChoice ...........................................................................................................................................42
Calendar........................................................................................................................................................43
CalendarYearView ...................................................................................................................................43
CalendarMonthView ................................................................................................................................44
HierarchicalCalendarMonthView...................................................................................................................45
CalendarWeekView .................................................................................................................................47
CalendarDayView ....................................................................................................................................48
CalendarEntry ...............................................................................................................................................49
CalendarPaginator ........................................................................................................................................50
Day Patterns .................................................................................................................................................50
DayPattern ....................................................................................................................................................51
WeekDayPattern ...........................................................................................................................................51
WorkingTime .................................................................................................................................................51
Caption .....................................................................................................................................................52
CheckBox .................................................................................................................................................52
CheckBoxGroup ......................................................................................................................................53
DateNavigator ..........................................................................................................................................55
DateNavigatorMarking .............................................................................................................................56
DateNavigatorLegend ...................................................................................................................................56
DropDownByIndex ...................................................................................................................................56
DropDownByKey .....................................................................................................................................58
Explanation ..............................................................................................................................................59
FileUpload ................................................................................................................................................60
FileDownload ...........................................................................................................................................60
Binding resource Property .........................................................................................................................63
Loading the InputStream at FileDownload on Demand ................................................................................64
Adobe Flash Islands for Web Dynpro Java...................................................................................................65
FlashIsland....................................................................................................................................................67
GACDataSource ...........................................................................................................................................67
GACProperty.................................................................................................................................................67
GACEvent .....................................................................................................................................................67
GACEventParameter ....................................................................................................................................67
Displaying and Editing Formatted Text .........................................................................................................67
Supported XHTML Tags for FormattedText..................................................................................................68
FormattedTextEdit ................................................................................................................................69
FormattedTextView ..............................................................................................................................70
SimpleFormattedTextField ............................................................................................................................71
Implementing a SimpleFormattedTextField ..................................................................................................72
Creating Formatted Text ...............................................................................................................................73
Gantt ........................................................................................................................................................74

© 2008 SAP AG 3
UI Element Guide
HorizontalGutter .......................................................................................................................................75
Image .......................................................................................................................................................76
InputField .................................................................................................................................................76
Implementing a Combo Box..........................................................................................................................78
Enabling AutoComplete for InputFields ........................................................................................................79
ItemListBox ..............................................................................................................................................79
Label ........................................................................................................................................................81
Legend .....................................................................................................................................................82
LegendItem ...................................................................................................................................................82
MultipleLegendItem.......................................................................................................................................83
FrameworkLegendItem .................................................................................................................................83
LinkToAction ............................................................................................................................................84
LinkToURL ...............................................................................................................................................85
LinkChoice ....................................................................................................................................................86
MeltingGroup ...........................................................................................................................................86
Implementing Menus: ContextMenu, MenuBar and PopupMenu .................................................................88
Utilizing ContextMenus .................................................................................................................................90
MenuBar ..................................................................................................................................................91
Menu ........................................................................................................................................................91
MenuActionItem .......................................................................................................................................92
MenuCheckBox .......................................................................................................................................93
MenuRadioButton ....................................................................................................................................93
MessageBasedTrigger ..................................................................................................................................94
Network ....................................................................................................................................................94
OfficeControl ............................................................................................................................................96
Using OfficeControl .......................................................................................................................................98
IWDIOSFactory .............................................................................................................................................99
Implementing IWDIOSFactory ....................................................................................................................100
Pattern UI Elements ....................................................................................................................................101
PageLayout .................................................................................................................................................101
PageHeader ...........................................................................................................................................102
PageHeaderArea ........................................................................................................................................102
HorizontalContextualPanel .........................................................................................................................103
ContextualPanel..........................................................................................................................................103
ViewSwitch..................................................................................................................................................104
FreeContextualArea ....................................................................................................................................105
NavigationList..............................................................................................................................................105
ExpandableTitle ..........................................................................................................................................106
PatternTabStrip ......................................................................................................................................106
PatternTab ..................................................................................................................................................107

© 2008 SAP AG 4
UI Element Guide
PatternTray .................................................................................................................................................108
PatternContentArea ....................................................................................................................................108
PatternExpandFunction...............................................................................................................................109
Shuttle .........................................................................................................................................................110
MessageArea ..............................................................................................................................................110
PhaseIndicator ............................................................................................................................................111
PhaseIndicator .......................................................................................................................................111
Phase .....................................................................................................................................................112
MultiPhase ..................................................................................................................................................112
ProgressIndicator ...................................................................................................................................113
RadioButton ...........................................................................................................................................114
RadioButtonGroupByKey .......................................................................................................................114
RadioButtonGroupByIndex ....................................................................................................................115
RoadMap ...............................................................................................................................................116
RoadMapStep ........................................................................................................................................118
MultipleRoadMapStep.................................................................................................................................119
RowRepeater .........................................................................................................................................120
SectionHeader .......................................................................................................................................121
Implementing Tables...................................................................................................................................121
Table ...........................................................................................................................................................123
Filtering and Sorting in a Table ...................................................................................................................127
TableColumnGroup.....................................................................................................................................128
TableColumn...............................................................................................................................................129
TableScrollTipProvider................................................................................................................................131
TableRowGrouping .....................................................................................................................................132
Implementing TableRowGrouping ..............................................................................................................132
TreeByNestingTableColumn.......................................................................................................................134
Cell Variants................................................................................................................................................137
TableStandardCell ......................................................................................................................................137
TableSingleMarkableCell ............................................................................................................................138
Defining Cell Variants..................................................................................................................................139
TablePopin ..................................................................................................................................................141
TablePopinToggleCell.................................................................................................................................142
TextBar........................................................................................................................................................143
Tabstrip .......................................................................................................................................................143
TabStrip .................................................................................................................................................143
Tab .........................................................................................................................................................144
TextEdit ..................................................................................................................................................144
TextView ................................................................................................................................................145
TimedTrigger .........................................................................................................................................147
ToggleButton .........................................................................................................................................148

© 2008 SAP AG 5
UI Element Guide
ToggleLink .............................................................................................................................................149
ToolBar ..................................................................................................................................................149
ToolBarButtonChoice .............................................................................................................................150
ToolBarDropDownByIndex ....................................................................................................................151
ToolBarDropDownByKey ............................................................................................................................151
ToolBarInputField ..................................................................................................................................152
ToolBarLinkToAction .............................................................................................................................153
ToolBarLinkToURL ................................................................................................................................154
ToolBarSeparator ..................................................................................................................................155
ToolBarToggleButton .............................................................................................................................155
ToolBarLinkChoice......................................................................................................................................156
Tree ........................................................................................................................................................157
TreeNodeType .......................................................................................................................................158
TreeItemType ........................................................................................................................................159
TriStateCheckBox ..................................................................................................................................165
ValueComparison ..................................................................................................................................166
Copyright.........................................................................................................................................................168

© 2008 SAP AG 6
UI Element Guide
UI Element Guide
BarCodeReader, FunctionKey and RFIDReader only can be used with Pocket PCs, refer to Mobile Web
Dynro Online
For documentation on interactive Adobe forms, refer to SAP Interactive Forms By Adobe for Web Dynpro
More information
JavaDocs: http://help.sap.com/javadocs/nwce/current/wdr/index.html
Common UI Element Properties

In Web Dynpro, the UI elements are defined as interfaces. All independent elements are derived from the
abstract base classes IWDUIElement and IWDViewElement, whereas the aggregated elements are
derived from abstract base class IWDViewElement.
Universal Properties
• id. Describes the ID that uniquely identifies this view element within its containing view
• enabled. This property specifies whether or not an event can be triggered by a user interaction.
• tooltip. This property describes a note for the UI element that is displayed when the user places the
cursor on the UI element.
• visible. This property specifies the visibility of the UI element. The default value for this property is
visible.
{ visible. The UI element is displayed on the screen.
{ none. The UI element is not visible on the screen and takes up no space.
{ notYet. The UI element is not yet visible in its view and is treated like NONE. It can be made
visible by personalization. This can be used to ship hidden parts of a screen which can then be
made visible on demand.
{ always. A UI element is always visible and cannot be hidden by personalization.
{ blank. The UI element is not visible on the screen but takes up space.
This value should not be used for security reasons. Use none instead.
Advanced Properties
You can also assign a context menu to every UI element and specify the behavior of the context menu.
To set these properties, you have to make them visible. To do this, navigate in
the view designer for your NWDS to the properties tab and select Show
Advanced Properties, as shown below:
• contextMenuId. Describes the ID that identifies the context menu you

want to assign to this UI element.
• contextMenuBehaviour. Specifies the behavior of the assigned context
menu. The default value for this property is inherit. This property can
take the following values and is represented by enumeration type WDContextMenuBehaviour:
{ inherit
Inherits the menu behavior from the parent view element
{ suppress
Suppresses the context menu. No context menu will be displayed.
{ provide
Provides the context menu, even if the parent element suppresses it.

© 2008 SAP AG 7
UI Element Guide
WDTableCellDesign
With WDTableCellDesign you can set the background for single cells or table columns or define colors for a
Legend. The enumeration WDTableCellDesign can take the following values:
standard
negative
positive
badvalue_dark
badvalue_medium
badvalue_light
criticalvalue_dark
criticalvalue_medium
criticalvalue_light
goodvalue_dark
goodvalue_medium
goodvalue_light
key_medium
group_level1
group_level2
group_level3
one
two
three
four
calendarMetal
calendarPeach
calendarBlue
calendarRose
calendarPurple
calendarAqua

© 2008 SAP AG 8
UI Element Guide
calendarTeal
calendarYellow
calendarBrown
calendarStandard
calendarGreen
PSpecifying the Image Source

Some UI elements, such as Button or LinkToAction, can display icons. To assign an icon or to specify the
source property of an Image UI element, you need to set the path to the image file.
Procedures
• You can store the image files in the Mime Repository in directory <DC
name>/src/mimes/Components/<component name>. To reference to the Mime Repository,
select the property in question, choose Browse and then ComponentImage… in the Properties
window. The directory for the Mime Repository will open, and you can choose the file in question.
• You can assign an absolute web address – http://….
• You can set a reference to Web Icons, also stored on the SAP NetWeaver Application Server. To do
this, select Browse and then Web Icon…
You can now choose between
• Icon
In this folder you will find the current version of the SAP icons in the format: 14 x 14 px. These icons
are deprecated and should not be used anymore
• IconLarge
In this folder you will find the current version of the SAP icons in the format: 32 x 32 px, for example:
• Pictogram
There you will find a set of standard pictograms, for example:
•
You can set a reference to SAP icons, stored on the SAP NetWeaver Application Server.
To do this, select Browse and then SAP Icon…. The directory where the SAP icons are stored locally will
open, and you can choose the icon in question. This directory will be replaced by the Icon directory
below the Web Icon directory.

© 2008 SAP AG 9
UI Element Guide
Choosing the Layout

The layout specifies the arrangement of UI elements in their container. You can specify the layout for a view
by specifying the RootUIElement’s layout. For each child object in a container you can specify the
layoutData property.
Layouts
The following layout classes are available for arranging the UI elements in a view:
• ColumnLayout arranges content on a common grid across container or view boundaries, even
across component boundaries. ColumnLayout is designed to define a content area combining several
forms and tables that have to be aligned.
• GridLayout arranges the container children in a two-dimensional grid with a defined column number
and any number of rows. Line breaks can be defined. Line breaks are automatically inserted when a
UI element is too long to be displayed within one row.
• MatrixLayout arranges the container children in a tabular format, similar to the GridLayout.. Certain
functions available when using the GridLayout are not available here. For example, you cannot
explicitly define the number of columns. To define a new row, you set the layoutData property of
the relevant UI element to MatrixHeadData. A great advantage of the MatrixLayout compared to the
GridLayout is that you can create consistent layout structures easily using the cell classes provided.
• RowLayout has similar behavior to the MatrixLayout. However, it sequentially assigns the UI
elements to exactly one column. If you set the layoutData property to RowHeadData to a UI
element, it is exactly this UI element that is wrapped. A great advantage of the RowLayout is that you
can easily create consistent layout structures using the predefined cell classes that are also provided
in the MatrixLayout.
• FlowLayout sequentially arranges the container children. This means that you cannot describe
defined line breaks, for example. A FlowLayout depends on the client technology and the size of the
browser window.
• PageLayout. To define a standalone application view, you can use the PageLayout that is assigned to
the RootElement.
Procedure
...
1. Select the relevant container and set the layout property to the desired value. The layoutData
property of the contained UI elements is automatically set to a corresponding value
2. To define a new row in your view layout, you can set the layoutData property to the corresponding
*HeadData value, for example RowHeadData, if the specified container layout is RowLayout.
3. To define empty cells in a Layout, you can use the InvisibleElement.
ColumnLayout
ColumnLayout is a layout mechanism that can work across container boundaries, arranging content on a
common grid which consists of a fixed number of columns and a variable number of rows. Embedded UI
element containers are merged with their embedding container. This means that the content of both
containers is arranged on the same grid, on condition that both are non-scrolling transparent containers with
column layout. This even works across view and component boundaries.
A container with a layout other than ColumnLayout is treated as one big block, similar to the tab-strip, and
cannot be embedded into a single grid cell. It always spans all columns and also "suspends" the layout.
The following figure illustrates the alignment of UI elements on a screen built up of different views using
ColumnLayout. Using the MeltingGroup element, you can define a container in which you can arrange more
than one UI element. Inside a MeltingGroup, you can specify the width of each contained UI element
explicitly.

© 2008 SAP AG 10
UI Element Guide
Column 1 Column 2 Column 3
View 1
View 2
Melting
Group
View 3
The colCount property defines the number of columns the Container occupies. colCount can take is
represented by enumeration type WDColumnLayoutColCount and can take the following values:
• one, two, three, four, five or inherit: Uses the colCount value specified by the
enclosing column layout. If there is no enclosing column layout the value is set to one .
Default Behavior of Different UI Elements

UI elements occupy exactly the number of rows and columns determined by their ColumnLayoutData’s
rowSpan and colSpan properties. If that information is missing, it defaults to one, except as follows:
• All UI elements that provide a grid of their own default to span all columns and one row.
• The same applies for all UI element containers with a layout other than ColumnLayout.
• Table, TabStrip, Tree also default to span all columns and one row.
• All UI element containers that do not provide a grid of their own, and use ColumnLayout default to
span as many columns as indicated by their layout’s colCount property, and as many rows as
needed to properly lay out their content.
• CheckBoxGroup and RadioButtonGroupByIndex/ key have a colCount property providing the default
colSpan. Their number of individual check boxes or radio buttons resp. determines the default
rowSpan.
• ItemListBox has a visibleItems property providing the default rowSpan.
• Legend has a colCount property providing the default colSpan.
• ViewContainerUIElement defaults to span as many rows and columns as determined by its content
view’s root UI element (container). Note that this may also be an ViewContainerUIElement if you have
an interface view.
• MessageArea has a maxVisibleMessages property, providing the default rowSpan. Note that the
number of currently existing messages may be smaller, but this is not taken into account in order to
achieve a stable layout. It also defaults to span all columns.
• AbstractPatternContainer, ContextualPanel, PageHeader also default to span all columns and one
row.
• BIApplicationFrame, BusinessGraphics, Gantt, GeoMap, InteractiveForm, Network, OfficeIntegration
also default to span all columns and one row.
• UI elements with visible = NONE will not occupy any grid cells.

© 2008 SAP AG 11
UI Element Guide
ColumnLayoutData and ColumnLayoutHeadData

The ColumnLayoutData and ColumnLayoutHeadData provide the layout data for a UI element in a container
(to which a ColumnLayout is assigned). You can specify a new row in a ColumnLayout with
ColumnLayoutHeadData.
With ColumnLayout(Head)Data, you can define the number of columns and rows spanned by a UI element.
If you do not specify a value, the spanning will be automatically determined by the Web Dynpro Framework.
Properties
• colSpan. Specifies the number of columns spanned by the UI element.
• rowSpan. Specifies the number of rows spanned by the UI element.
FlowLayout
In Web Dynpro, a flow layout is a container layout that arranges the UI elements on the screen from left to
right in a flow and wraps UI elements, if necessary.
The properties defaultPaddingBottom, defaultPaddingLeft, defaultPaddingRight, and
defaultPaddingTop are deprecated and can no longer be used.
• wrapping. The property wrapping of the type boolean specifies whether or not the UI elements can
be wrapped. The default value is true. This property is not bindable.
If the value of this property is false, the UI elements are not wrapped. If the space is too small, UI
elements are not displayed in one line but truncated on the right.
FlowData
The Web Dynpro IWDFlowData provides the layout data for an user interface element in a container (to
which a flow layout is assigned).
Description of Properties
The properties paddingBottom, paddingLeft, paddingRight, and paddingTop are deprecated and can no
longer be used.
• cellDesign
lPad This value specifies the distance of 2 pixels to the upper and lower edge and can
be used in the last right column.
lrNoPad This value specifies the distance of 2 pixels to the upper and lower edge and can
be used in the last right and the first left column.
lrPad This value specifies the distance of 2 pixels to the upper and lower edge and a
margin of the page of 4 pixels. It should not be used in the far left and far right
column.
padless This value specifies a distance of 0 pixel to the edges. It is used for contents with
their own padding.
rPad This value specifies the distance of 2 pixels to the upper and lower edge and a
margin of the page of 4 pixels. It can also be used in the far left column and
prevents the contact between cell contents.
The default value is rPad.
• vGutter. Specifies additional, horizontal distances between the cell contents. The default value of this
property is none. It can be set separately for each cell.
The vGutter property can be filled with the following values and is represented by the enumeration
type WDLayoutCellSeparator .
Value Display in default cell Short description
design

© 2008 SAP AG 12
UI Element Guide
large Additional horizontal distance of 31 pixels
largeWithRule Additional horizontal distance of 31 pixels

with a vertical line
Medium Additional horizontal distance of 17 pixels
mediumWithRule Additional horizontal distance of 17 pixels

none No additional distance
xLarge Additional horizontal distance of 63 pixels

xLargeWithRule Additional horizontal distance of 63 pixels
GridLayout
The grid layout (IWDGridLayout) is a layout that arranges the UI elements in the UI element container in the
form of a grid. The number of grid columns can be specified using the grid layout property colCount.
The UI element InvisibleElement allows you to fill cells that should not display anything.
Description of GridLayout Properties

• cellPadding. Specifies the padding of the UI element to the grid cell edge for all grid layout cells.
• cellSpacing. Specifies the space between the individual grid cells for all grid layout cells.
• colCount. Specifies the number of grid columns.
• stretchedHorizontally. Specifies whether or not the UI elements match the container size of the
horizontal alignment.
• stretchedHorizontally. Specifies whether or not the UI elements match the container size of the
vertical alignment.
The following diagram illustrates how the GridLayout properties work:

© 2008 SAP AG 13
UI Element Guide
GridData
GridData provides the layout data for an user interface element in a container to which a GridLayout is
assigned. A grid layout defines a number of cells. In a grid layout cell, you can align a UI element both
horizontally (left-justified, horizontally centered, right-justified, and so on) and vertically (top-aligned, vertically
centered, bottom-aligned, and so on). The default settings for the alignment of the UI elements within the grid
layout is left-justified and top-aligned.
• cellBackgroundDesign. Specifies the design of the cell background. The default value for this
property is transparent. You can use the background colors fill1, fill2, and fill3 as
separators between the individual semantically different cell contents. Property
cellBackgroundDesign can take the following values and is represented by enumeration type
WDCellBackgroundDesign.
Value Description
border This is the color of the cell borders. This value is used for nested grid
layouts to create grid net lines.
fill1 The color corresponds to value primarycolor of property design in
UI element Group. *)
fill2 The color corresponds to value secondarycolor of property design
in UI element Group. *)
fill3 This color corresponds to the color value of the third level of a Tree UI
element. *)
header The color is identical with the color of the header area of a Tree UI
element or a table.
plain White background.
transparent The background is transparent. The individual cells are displayed
without grid net lines.
*) The colors to be displayed depend on the design topic and the documentation refers to the SAP
Standard Design 2002.
• colSpan. Specifies the number of columns occupied by the UI element in the grid.
• dragData. The text representation of the data to be transported along the way to the drop target. This
property takes precedence over the grid layout's DragSourceInfo and allows to assign different drag
data to individual grid layout cells.
• hAlign. Specifies the horizontal alignment of the UI element in the grid layout cell. The default value of
this property is beginOfLine. Property hAlign is represented by enumeration type WDCellHAlign
and can take following values:
beginOfLine The text is always displayed at the beginning of the line. Therefore, the text for
value ltr of property textDirection is left-justified. The text for value
rtl is right-justified.
center Centered alignment.
char Specifies the alignment using a specific character. Assigning value char allows
you to align the cell contents to a single character.
endOfLine The text is always displayed at the end of the line. Therefore, the text for value
ltr of property textDirection is right-justified. The text for value rtl
is left-justified.
forcedLeft The text is always left-justified, regardless of whether the value is ltr or rtl

© 2008 SAP AG 14
UI Element Guide
for property textDirection.

forcedRight The text content is always right-justified, regardless of whether the value is ltr
or rtl for property textDirection.
justify Justified - This value allows forced justification within a grid layout cell.
left Left-justified alignment. This value is deprecated. Use beginOfLine instead.
right Right-justified alignment. This value is deprecated. Use forcedRight instead.
• height. Specifies the height of the UI element in the grid layout cell.
• paddingBottom. Specifies the padding of the UI element to the bottom grid layout cell.
• paddingLeft. Specifies the left padding of the UI element to the grid layout cell.
• paddingRight. Specifies the right padding of the UI element to the grid layout cell.
• paddingTop. Specifies the padding of the UI element to the top grid layout cell.
• vAlign. Specifies the vertical alignment of the UI element in the grid layout cell. The default value of
this property is baseline. Property vAlign property is represented by enumeration type
WDCellVAlign and can be used to specify the alignment value of the grid layout cell.
baseline Alignment with a common baseline, the first text line is always displayed
at the defined location.
bottom Bottom padding - alignment with bottom edge.
middle Centered vertically.
top Top padding - alignment with top edge.
• width
Specifies the width of the UI element in the grid layout cell.
MatrixLayout
The matrix layout (IWDMatrixLayout) arranges the UI elements in a grid structure. It uses predefined cell
classes that guarantee appropriate distances between cells in the grid. The vGutter property lets you
specify additional horizontal distances easily. You can set these additional distances (known as gutters) with
or without separators. The matrix layout can also include horizontal separators to separate the rows further,
represented by the HorizontalGutter UI element. The distance for each cell is specified by assigning a
specific enumeration value of the class WDLayoutCellSeparator of the MatrixData object. This type of
layout is preferable to the Grid Layout, since it makes the layout structure in a container more consistent.
Using the IWDMatrixHeadData interface, you can specify the UI element that appears at the start of each
new line.
Properties
• stretchedHorizontally. Specifies whether UI elements aligned using this layout are adapted
horizontally to the container size, so that the container is completely filled horizontally.
• stretchedVertically. Specifies whether UI elements aligned using this layout are adapted vertically to
the container size, so that the container is completely filled vertically.
MatrixData and MatrixHeadData

The Web Dynpro IWDMatrixData API provides the layout data for a user interface element in a container (to
which a Matrix layout is assigned). You can specify a new line in a Matrix layout with MatrixHeadData.
Properties
• cellBackgroundDesign. Specifies the design of the cell background. The default value for this
property is transparent. You can use the background colors fill1, fill2, and fill3 as separators
between the individual semantically different cell contents. The cellBackgroundDesign property
can have the following values and is represented by the enumeration type WDCellBackgroundDesign:

© 2008 SAP AG 15
UI Element Guide
Value Description
the Group UI element. *)
in the Group UI element. *)
element. *)
element or a table.
• cellDesign. Specifies the distance between the cell content and the outer edge of the cell. The default
value of this property is rPad. Property cellDesign can take the following values and is represented
by enumeration type WDLayoutCellDesign.
Value Appearance Description

lPad This value specifies a distance to the top edge (2
pixels), the bottom edge (2 pixels) and can be
used in the last matrix column on the right.
lrNoPad This value specifies a distance to the top edge (2
pixels), the bottom edge (2 pixels) and can be
used in the last matrix column on the right or the
first on the left.
lrPad This value specifies a distance to the top edge (2
pixels), the bottom edge (2 pixels), the left edge (4
pixels), and the right edge. It should not be used
as the last matrix column on the right or first on
the left.
padless This value specifies a distance of zero pixels to
the edges of the cell. It is intended for nested
contents that have their own specified padding or
for cases where there is no need for cell content
padding.
rPad This value is appropriate for displaying most
content, and is thus set as the default value. It can
be used as the first matrix column on the left. It
specifies a distance to the top edge (2 pixels), the
bottom edge (2 pixels), and the right edge (4
pixels) and thus prevents cell contents from
touching.
• colSpan. Specifies the number of columns the UI element occupies in the matrix layout.
• hAlign. Specifies the horizontal alignment of the UI element in the matrix layout cell. The default value
of this property is beginOfLine. Property hAlign is represented by enumeration type
WDCellHAlign and can have the following values:

© 2008 SAP AG 16
UI Element Guide
beginOfLine The text is always displayed at the beginning of line. Therefore, the text for
value ltr of property textDirection is left-justified. The text for value rtl
is right-justified.
ltr of property textDirection is right-justified. The text for value rtl is left-
justified.
forcedRight The text is always right-justified, regardless of whether the value is ltr or
rtl for property textDirection.
• height. Specifies the height of the cell.
• vAlign. Specifies the vertical alignment of the UI element within the grid. The default value of this
property is baseline. Proprty vAlign can have the following values and is represented by
enumeration type WDCellVAlign.
baseline Alignment with a common baseline, the first text line is always displayed
at the defined location.
bottom Bottom padding - alignment with bottom edge.
middle Centered vertically.
top Top padding - alignment with top edge.
• vGutter. Specifies additional, horizontal distances between the cell contents. The default value of this
property is none. It can be set separately for each cell.
Property vGutter can take the following values and is represented by enumeration type
WDLayoutCellSeparator

largeWithRule Additional horizontal distance of 31 pixels with a

vertical line
Medium Additional horizontal distance of 17 pixels
mediumWithRule Additional horizontal distance of 17 pixels with a

vertical line

© 2008 SAP AG 17
UI Element Guide
xLargeWithRule Additional horizontal distance of 63 pixels with a

vertical line
• width. Specifies the width of the cell.
RowLayout
The row layout arranges the UI elements in a single column. Like the Matrix-Layout, the row layout uses
predefined cell classes, which ensure that the distances between cells are appropriate for the entire row. The
vGutter property of the RowHeadData object lets you specify additional horizontal distances easily. You
can set these additional distances with or without separators. The distance for each cell is specified by
assigning a specific enumeration value of the class WDLayoutCellSeparator of the RowHeadData
object. The subelement RowHeadData allows you to specify which UI element appears at the start of each
new row within the container. The row layout differs from the matrix layout in that the content is not organized
in table cells. That is, the individual elements are not aligned vertically with each other. When the row layout
is implemented in an application, performance is better than if a matrix layout were used, but the layout
flexibility is not compromised. For this reason, you should structure the view and container in horizontal
areas as early as possible, using the row layout. You should only use the Matrix layout if you need to display
a table and align the elements vertically.
RowData and RowHeadData

The RowData provides the layout data for a UI element in a container (to which a row layout is assigned).
The layout data is valid for the entire row. You can specify a new line in a RowLayout with RowHeadData.
Properties
• hAlign. Specifies the horizontal alignment of the UI element in the row layout cell. The default value of
this property is beginOfLine. Property hAlign is represented by enumeration type WDCellHAlign
and can take the following values:
is right-justified.
justified.
or rtl for the textDirection property.
justify Justified - This value allows forced justification within a row layout cell.
• rowDesign. Specifies the design (padding) of a row, meaning that the row has a right edge. This
prevents you from creating gaps between the elements of a row. The default value of this property is
rPad . Property rowDesign can take the following values and is represented by enumeration type
WDLayoutCellDesign

© 2008 SAP AG 18
UI Element Guide
• .

lPad Specifies the distance to the top edge (2 pixels), the
bottom edge (2 pixels), and the left edge (4 pixels).
lrNoPad Specifies the distance to the top edge (2 pixels) and

the bottom edge (2 pixels).
lrPad Specifies the distance to the top edge (2 pixels), the

bottom edge (2 pixels), the left edge (4 pixels), and
the right edge (4 pixels).
Padless There is no distance between the row and the edges.
rPad Specifies the distance to the top edge (2 pixels), the

bottom edge (2 pixels), and the right edge (4 pixels)
and thus prevents cell contents from touching.
• rowBackgroundDesign. Specifies the design of the row background. The default value of this
property is transparent. You can use the background colors fill1, fill2, and fill3 to
highlight semantically different rows. Property rowBackgroundDesign can take the following values
and is represented by enumeration type WDCellBackgroundDesign.
Value Description
border This is the color of the cell borders. This value is used for nested row
the Group UI element.
in the Group UI element.
element.
element or a table.
• vGutter. Specifies an additional distance to the left edge. The default value of this property is none.
Other values are only appropriate if the row layout is used in a matrix layout.
Property vGutter can have the following values and is represented by enumeration type
WDLayoutCellSeparator .
largeWidthRule Additional horizontal distance of 31 pixels with a

vertical line

© 2008 SAP AG 19
UI Element Guide
medium Additional horizontal distance of 17 pixels
mediumWithRule Additional horizontal distance of 17 pixels with a

vertical line

xLargeWithRule Additional horizontal distance of 63 pixels with a
vertical line
Defining PageLayout
PageLayout only should be used to define the layout of a main view and should not be nested. You can
insert the following page panels:
• Type PagePanel: Begin, InnerTop, InnerBegin, Center, InnerEnd, InnerBottom, End
• Type PageFullWidthPanel: Top, Bottom. These panels always span the entire width of a view.
Therefore no width property is provided.
Top
InnerTop
Inner Inner
Begin Center End
Begin End
InnerBottom
Bottom
You can fill the panels using

• individual containers or
• inserting views using ViewContainerUIElement.

© 2008 SAP AG 20
UI Element Guide
Procedure
In...
1. In the ViewDesigner in the Outline view open the context menu of the RootElement and select Replace
with and subsequently PageLayout.
2. Open the context menu of the RootElement again, select Insert and select the desired PagePanels.
Implementing Drag and Drop

The possibility to drag and drop objects is defined for different use cases, for example:
• Browse and collect pattern: The user can select one or more data values and drag them to a
specific position at another UI element. This is normally used to move or copy.
In this case the following UI elements are available: ItemListBox, Table, Tree,
• Generic drag and drop: The user drags a UI element that represents a business object and drops it
onto another business object, either also representing a business object or . In this case also the
Image and the GridLayout can be used. In this case you can use the DropTarget UI element as a
wrapping UI element.
• Enabling runtime authoring. To enable the user to rearrange different screen areas, you can define
Image, Caption or SectionHeader as drag handle. For this use case an in-place editing option also
can be defined using the displayAsText property e. g. of an InputField.
To ensure accessibility, you always have to implement an option that the user can fulfill the
respective task without drag and drop.
What does the user do?

The drag and drop function in Web Dynpro is designed as follows:
...
1. The user drags either a UI element (e. g. an Image) or data taken from a Table, a Tree or a
ItemListBox
2. As long as the user holds the mouse key pressed, a ghost is displayed that indicates his action.
If the user moves the mouse over a UI element that is defined as a drop target, the UI element
indicates this either by displaying a dotted line around the container or by displaying a bold line
between the respective rows. As long as the user moves the ghost over areas, that are not defined as
drop targets, a prohibitory symbol is displayed additionally.
3. When the user drops this ghost, the onDrop event of the respective UI element is triggered. The
application developer is now responsible to move or copy the respective data or to implement the
necessary steps.

© 2008 SAP AG 21
UI Element Guide
Procedure
This example describes the basic steps to implement a browse and collect pattern.
Creating the UI elements

...
1. To define a drag source, insert a DragSourceInfo into an ItemListBox.

2. To define a drop target, insert a DropTargetInfo into the other ItemListBox.
An example how this can be implemented, is displayed below:
3. To specify the drag source and its corresponding drop target, enter the same string to the tag property
of the relevant DragSourceInfo and DropTargetInfo elements.
4. Map the parameters of the respective onDrop event accordingly.
DragSourceInfo
The DragSourceInfo is inserted into a UI element, e. g. into a Table, to enable you to define this UI element
as a drag source.
Properties
• data. The text representation of the data to be transported along the way to the drop target.
• enabled. Determines whether this DragSourceInfo is enabled. If set to false, the user cannot start a
drag action from here.
• mimeType. The MIME type describing the format for the data property. The default is to use plain
text. We recommend to align to the MIME types, but you can define any string here.
• scope. Defines whether this drag source can only take part in drag-and-drop operations which are
local to the enclosing Web Dynpro component instance. Possible values are:
{ componentInstance: The drag-and-drop operation can be executed inside the same
component instance.
{ global: The drag-and-drop operation can be executed over component and application
boundaries. This includes any Web Dynpro application the same tags are defined for.
• tags. A space-separated list of identifiers which is used to determine compatibility of a given drag
source with potential drop targets. If the list is empty, no drag can be started from that source.
We recommend to specify the tags according these rules:
ID part allowed characters
Namespace A to Z
a to z
digits from 0 to 9
hyphen -
ID A to Z
a to z

© 2008 SAP AG 22
UI Element Guide
digits from 0 to 9
hyphen -
period .
Examples:
CRM:Customername
Name-Space42:com.asap3.first-name
DropTarget
DropTarget is a generic drop target which acts as an invisible frame around another UI element.
The DropTarget is visualized by a dotted line around the container inside this UI element, as shown in the
picture below:
Event
• onDrop (String data, String mimeType, String tags)
This event is triggered when the user drops an object onto this drop target.
{ data: The text representation of the drag source’s data.
{ mimeType: The mime type specified for the drag source.
{ tags: The set of tags corresponding to the data which has been dropped here, as defined by
the drag source.
DropTargetInfo
Inserting a DropTargetInfo into a UI element allows you to specify the necessary properties for a drag-and-
drop operation.
Properties
• enabled. Determines whether this DragTargetInfo is enabled; if set to false, the user cannot drop an
object here.
• scope. Defines whether the drop target can only take part in drag-and-drop operations which are local
to the enclosing Web Dynpro component instance. Possible values are:
{ componentInstance: The drag-and-drop operation can be executed inside the same
component instance.
{ global: The drag-and-drop operation can be executed over component and application
boundaries. This includes any Web Dynpro application the same tags are defined for.
• tags. A space-separated list of identifiers which is used to determine compatibility of a given drag
source with potential drop targets. We recommend to specify the tags according these rules:

© 2008 SAP AG 23
UI Element Guide
•
Namespace A to Z
a to z
digits from 0 to 9
hyphen -
ID A to Z
a to z
digits from 0 to 9
hyphen -
period .
Examples:
CRM:Customername
Name-Space42:com.asap3.first-name
FileDropTarget
With FileDropTarget you can define an area in the Web Dynpro application, where a file can be dropped
onto. The file can be dragged for example from the Windows Explorer.
FileDropTarget only can be used, if the application is running in SAP NetWeaver Business Client (NWBC).
Description of UI Element Properties

• fileNamePatterns
The initial value is "*" and allows all types of files to be dropped. The file name patterns determine a
restriction on the permissible names of files dropped here. The following wildcards can be used:
{ “*”. The asterisk can be used as wildcard for 0 to n characters
{ “?”. The question mark replaces a single character.
{ “|”. The vertical bar character is used to separate multiple file name patterns from one another
(in a disjunctive manner).
Example: *.gif|*.jpg|*.png A file may be dropped onto this file drop target if and only if its
name matches at least one of the individual file name patterns
An empty pattern ("") allows no files to be dropped!
• resource
Specifies the data source and contains the data, the file name, and the MIME type. The resource
property must be bound to a context attribute of the type IWDResource.
Event
• onDrop() The event is triggered when a file has been dropped onto this file drop target. Of course,
the file's name must have matched the given file name pattern. The file is uploaded before the event
is triggered and is available in the same manner as with an ordinary FileUpload UI element.

© 2008 SAP AG 24
UI Element Guide
Containers
The abstract basis class of the container elements is IWDUIElementContainer. The UIElementContainer UI
element is the abstract base class of a container that can contain any number of UI elements known as
children of the container. The display of the container children within the container is specified by the layout
object.
The size of a container is specified using the properties width and height whose values can be specified
in CSS units.
For each container you can maintain a default button that gets the focus, when the user clicks into the
container.
The following container classes are available for the application developer:
• TransparentContainer
The class TransparentContainer is a UI element container without any visual representation. A
TransparentContainer UI element is transparent and can be filled with an any quantity of UI elements
(children).
• ScrollContainer
• Group
• Tray
The ScrollContainer, Group and Tray provide the opportunity for horizontal and vertical scrolling.
ScrollContainer
The ScrollContainer UI element enables you to use a vertical and horizontal scroll bar for the visible UI
elements Group and Tray.
Properties
• accessibilityDescription. When accessibility is activated, the assigned text is added to the tool tip.
This description provides semantic details of the UI element and is only read by the screen reader if
the user focuses the complete Ul element.
• defaultButtonId. Specifies the ID of the assigned default button.
• enabled. The enabled property has no effect on the UI element children you inserted into the UI
element container. If, for example, you set the enabled property to false in the group UI element,
an input field inserted in it is not automatically deactivated. If the UI element children in this group UI
element are also to be deactivated, you must set the relevant property for each UI element separately.
• handleHotkeys. Specifies whether this ScrollContainer acts as a separate container for hotkeys. If
this property is set to true then all hot keys defined by UI elements within this ScrollContainer will be
handled by this ScrollContainer. This defines a new scope for hot keys.
• height. Determines the height of the ScrollContainer, which you can specify in relative CSS units like
em or ex.
• scrollingMode. Specifies how the scroll bar appears within the UI element container.
The scrollingMode property can be filled with the following values and is represented by the
enumeration type WDScrollingMode.
auto The scroll bar within the container is activated automatically.

both A vertical and horizontal scroll bar are activated.
none Scrolling within the text context is not possible.
• width. Determines the width of the ScrollContainer. You can specify this in CSS sizes, such as em, ex,
pixels or percentage values.

© 2008 SAP AG 25
UI Element Guide
Group
The Group UI element is a UI element container and can be used to group multiple UI elements under one
common title. The following diagram shows that the UI element resembles a display panel with a colored
background.
Properties
• activateAccessKey. Indicates whether access key for this control is activated.
• accessibilityDescription. When accessibility is activated, the assigned text is added to the tooltip.
• design. Describes the appearance of the Group UI element. The design property can be filled with
the following values and is represented by the enumeration type WDGroupDesign.
primarycolor The group panel has the same background color as the title bar
(color of the primary group).
sapcolor The title bar and the borders around the panel have the blue SAP
color. The background color of the panel is white.
secondarybox The panel does not have borders.
secondaryboxcolor The background color of the panel is different from the
background color of the title bar.
secondarycolor The panel has the same background color as the title bar (color
of the secondary group). You can use this value when you want
to display subgroups within a group.
• enabled. The inherited enabled property is ignored and does not affect the browser. The label in the
header of the Group UI element can be hidden by setting the value of the visible property for the
header to none.
• handleHotkeys. specifies the key combination that triggers the onAction event. The value is
defined as enumeration type WDHotKey.
• hasContentPadding. Specifies whether or not it is possible to insert padding between content and UI
element borders.
• height. Determines the height of the Group, which you can specify in relative CSS units like em or ex.


© 2008 SAP AG 26
UI Element Guide
• width. Determines the width of the Group. You can specify this in CSS sizes, such as em, ex, pixels or
percentage values.
TransparentContainer
The TransparentContainer (IWDTransparentContainer) is a UI container without any visual representation. A
TransparentContainer UI element is transparent and can be filled with an any quantity of UI elements
(children). In addition, the TransparentContainer UI element allows you to arrange its inserted UI elements
through the specified layout.
You can distinguish whether the TransparentContainer only serves to structure the layout
(isLayoutContainer = true).
You have to set the isLayoutContainer property to false to enable the following properties:
• accessibilityDescription
• defaultButtonId
• labeledBy.
In addition the TransparentContainer only will be part of the tab sequence if isLayoutContainer is set to
false.
Properties
• defaultButtonId. Specifies the ID of the assigned default button. To maintain a default button the
isLayoutContainer property has to be set to false.
• enabled. The enabled property has no effect on the UI element children you inserted into the UI
element container. If, for example, you set the enabled property to false in the group UI element,
an input field inserted in it is not automatically deactivated. If the UI element children in this group UI
element are also to be deactivated, you must set the relevant property for each UI element separately.
• handleHotkeys. Specifies whether this TransparentContainer acts as a separate container for
hotkeys. If this property is set to true then all hot keys defined by UI elements within this
TransparentContainer will be handled by this TransparentContainer. This defines a new scope for hot
keys.
• isLayoutContainer. Specifies whether the TransparentContainer can be used as a layout container.
• labeledBy. Determines the ID of the labeled SectionHeader. It's used to connect a SectionHeader as
a title control to this container. The connection between an existing SectionHeader and transparent
container via labeledBy is important for accessibility reasons.
• scrollingMode. Specifies how the scroll bar appears within the TransparentContainer.
The scrollingMode property can take the following values and is represented by enumeration type
WDScrollingMode.
• width. Determines the width of the TransparentContainer. You can specify this in CSS sizes, such as
em, ex, pixels or percentage values.

© 2008 SAP AG 27
UI Element Guide
Tray
The Tray UI element (IWDTray) is a UI element container like the Group UI element container and can be
used to group a set of UI elements under one common title. Unlike the Group UI element it provides
additional functions. For example, the Tray UI element can be displayed or hidden. A Tray UI element may
have an optional menu represented by a PopupMenu. A toolbar can be inserted as well - see Toolbar. The
following graphic shows how the UI element is displayed when a Menu UI element and a UI element are
used within the Tray UI element.
Properties
• design. Describes the appearance of the Tray UI element. The design property can take the
following values and is represented by enumeration type WDTrayDesign.
fill The content area appears with a background color.

plain The content area appears with a white background and a frame.
transparent The background is transparent; the content area appears without a frame.
• expandable. Determines whether the Tray can be expanded and collapsed. If this property is set to
false, no button for expanding/collapsing is displayed.
• expanded. Specifies whether the Tray UI element is expanded. The value false only shows a header
with the expand icon. The toolbar and content area are invisible in this state. Pressing the button
expands the Tray UI element and the expand button and the expand button changes to a collapse
button.
• handleHotkeys. Specifies whether this Tray acts as a separate container for hotkeys. If this property
is set to true then all hot keys defined by UI elements within this Tray will be handled by this Tray.
This defines a new scope for hot keys.
• hasContentPadding. Specifies whether there is a padding between the content area and the tray
border.
• height. Determines the height of the Tray, which you can specify in relative CSS units like em or ex.

• width. Determines the width of the Tray. You can specify this in CSS sizes, such as em, ex, pixels or
percentage values.

© 2008 SAP AG 28
UI Element Guide
Events
• onToggle (boolean expanded). The event onToggle is triggered when the user expands or collapses
the tray. The event parameter is the new state. The value true means that the tray has been
expanded.
AnalyticsChart
The AnalyticsChart UI element is used to display data in a chart. An AnalyticsChart is rendered into a Flash
component. The dataSource property of the AnalyticsChart itself must point to the context node. The binding
can be done in a similar way that a Table is bound to the context, with the CategoryAxis and DataSeries
corresponding to TableColumns It is required that a dataSource and CategoryAxis is defined.
Properties
• animateBy. Defines over which elements the chart animation is applied. animateBy is of type
WDChartAnimateBy and can take the following values:
{ mixed. Animate each data series in turn and within each series animate each data point in
turn.
{ chart. The entire chart is animated as one unit.
{ points Animate each data point in turn (runs in parallel in all data series).
{ series. Animate each data series in turn (each data series is animated as one unit).
• animation. The animation to apply whenever the chart data changes. animation is of type
WDChartAnimation and can take the following values:
{ fold. Fold out the old data and fold in the new data.
{ interpolate. Interpolate the old data into the new data.
{ none. Don't animate.
{ slide. Slide out the old data and slide in the new data.
• animationDirection. Defines the animation sliding direction, ignored for all animations except slide.
animationDirection is of type WDAnimationDirection and can take the following values:
{ bottomToTop. Animate from the bottom to the top.
{ leftToRight. Animate from the left to the right
{ rightToLeft. Animate from the right to the left.
{ topToBottom. Animate from the top to the bottom.
• animationDuration. Defines the animation duration. animationDuration is of type
WDAnimationDuration and can take the following values:
{ fast. Approximately 1 second.
{ medium. Approximately 2 seconds.
{ slow. Approximately 3 seconds.
{ veryfast. Approximately 0.5 seconds.
{ veryslow. Approximately 5 seconds.
• chartStyle. chartStyle is of type WDChartStyle and can take the following values:
{ clustered. Series are clustered by category. This applies to the chart types bar and column.
{ overlaid. Data series are overlaid on top of each other. This attribute applies to the chart
types: area line
{ stacked. Data series are stacked on top of each other. This attribute applies to the chart
types: area bar column line
• chartType. chartType is of type WDAnalyticsChartType and can take the following values:

© 2008 SAP AG 29
UI Element Guide
value description screenshot

area Displays data series with connected
lines and the area below the lines are
filled with color. The chart requires a
category axis.
bar Displays data series horizontally and

requires a category axis.
column Displays data series vertically and

combo A Combo Chart control, displays data

series of varying series type. For
each series specify the series type.
The chart requires a category axis.
doughnut A doughnut chart is identical to a pie

chart, but has a hollow center.
Multiple data series can be displayed
using concentric doughnut charts.
Doughnut charts can be drawn either
in two or three dimensions

© 2008 SAP AG 30
UI Element Guide
line A Line Chart control, displays data

series with connecting lines and
pie A pie chart has a single data series.

Pie charts can be drawn either in two
or three dimensions
• colorAlgorithm. This property uses the color palette defined in the legend. The color scheme this
property is of type WDColorAlgorithm and can take the following values:
{ reverse. Reversed color palette.
{ snake. The chart's color palette is 'snaked' through to determine the color.
{ straight. Color scheme that goes through the color palette.
• dataSeriesAxisMinorTicks. Defines the number of minor ticks to draw between major ticks on the
data series axis. This property can be set for the following chartTypes: bar, column, line, area
and combo.
• dataSeriesAxisTitle. Title for the DataSeries axis, opposite the Category Axis. For chartType
column, area, line and combo this is the title on the Y axis. For chartType bar it is the title on
the X axis.
• dataSeriesAxisUnit. Unit for the DataSeries Axis, opposite the Category Axis. For chartType
column, area, line and combo Charts this is the units string appended to the visible values on the axis.
The values for example would be 10, 20, 30, ... 100 (assuming the data was in the range of 0 to 100).
By setting this attribute to "$" for example the values will be appended like so: 10$, 20$, 30$, .. 100$.
For Bar Charts this is the unit setting on the X axis.
• dataSource. Determines the context node from which the AnalyticsChart gets its data.
• height. Specifies the height of the AnalyticsChart and can be specified in relative CSS units like em or
ex.
• legendPosition. Defines the position in relation to the chart, where the legend is displayed. This
property is of type WDLegendPosition and can take the following values.
{ above, below, left, none (Legend is not shown) or right.
• radius. This property only applies to the chartType doughnut and specifies the inner radius of the
doughnut in pixels.
• range. Defines how the AnalyticsChart's values range is determined. this property is of type
WDChartRange. and can take the following values:
{ auto. Automatically calculate the values range based on the actual data.
{ fixed. Fix the value range according to the maximum and minimum attributes.
{ live. Same as slider, except the chart is continuously updated while the user is dragging the
range slider (and not just upon release of the mouse).

© 2008 SAP AG 31
UI Element Guide
{ slider. Set the initial value range to minimum and maximum, but let the user change the
range at any time by dragging a range slider.
{ zero. Similar to auto, but also ensures that the range starts or ends on the zero baseline.
• selectable. Indicates whether the user is allowed to modify the leadSelection.
• title. Specifies the text displayed.
• wedgeLabelPosition. Defines the position of pie wedge labels. This property only applies to the
chartType pie and doughnut. This property is of type WDChartWedgeLabel and can take the
following values.
{ auto. The labels are positioned in the optimal way depending on the pie's size and available
space
{ callout. Draw labels in callouts on either side of the chart.
{
{ inside. Draw labels inside the pie
{ none. Hide labels
{ outside. Draw labels outside (but close to) the pie.
• width. Specifies the width of the AnalyticsChart and can be specified in relative CSS units like em, ex,
or percentage.
BIApplicationFrame
In a BIApplicationFrame, Web templates that are based on BEx Web Applications can be accessed using a
URL. Various attributes can be set for a Web template. They are transferred as parameters using the URL.
When using the BIApplicationFrame, these parameters can be set as properties of the UI element.
Description of Properties of the BIApplicationFrame

• dataMode. Specifies the DATA_MODE property of the Web template to be displayed.
dataMode is of enumeration type WDDataMode and, in accordance with the values of the Web
template, it can take the following values: default, hybrid, new, static, staticHybrid, and
stored.
• dataProviderStateName. Specifies the data provider of the Web template to be displayed and
corresponds to property DATA_PROVIDER.
• dataProviderStateType. Specifies the data provider type. dataProviderStateType is of
enumeration type WDDataProviderStateType and can take the following values:
Value of the property Corresponding properties of the data
provider in the Web template
Infoprovider INFOCUBE
Query QUERY
View VIEW
• height. Specifies the height of the BIApplicationFrame and can be specified in relative CSS units
like em, ex, or percentage.
• meltVariables. Specifies the property MELT_VARIABLES of the Web template to be displayed.
• Server. Specifies the Web address of the server.

© 2008 SAP AG 32
UI Element Guide
• serverType. Specifies whether the addressed Web Application Server is a Java Server or an ABAP
Server.
• stateless. Specifies the property STATELESS of the Web template to be displayed.
• suppressSystemMessages. Specifies the property SUPPRESS_SYSTEM_MESSAGES of the Web
template to be displayed. Value CONDITIONAL is not supported.
• suppressWarnings. Specifies the value of property SUPPRESS_ WARNINGS of the Web template
to be displayed.
• templateId. Specifies the property TEMPLATE_ID of the Web template to be displayed.
• usePersonalization. Specifies the property USE_PERSONALIZATION of the Web template to be
displayed.
• variablesClear. Specifies the property VARIABLES_CLEAR of the Web template to be displayed.
• variableScreen. Specifies the property VARIABLES_ SCREEN of the Web template to be displayed.
• variant. Specifies the property VARIANT of the data provider.
• width. Specifies the width of the BIApplicationFrame and can be specified in relative CSS units like
em, ex, or percentage.
BIMethods API: Access to Actions of a BEx Web Application

Various actions can be performed in a Bex Web Application – for example filtering or arranging data in a
table. These actions are mapped in the BIApplicationFrame to the BIMethods methods. You can find the
Javadocs for the BIMethods in package:
com.sap.tc.webdynpro.clientserver.uielib.bi.api.WDBIMethods.
Methods
The following methods allow users to set and remove filters:
• clearSelectionState
• setSelectionState in multiple overloaded versions
The DrillDown methods are used to arrange of elements of a table in the Web template and to specify
whether they are arranged in columns or rows.
• removeDrillDown
• drillDown
The following methods map to the methods for defining Web items:
• resetItem
• resetItemToLibraryItem
• setItemParameter
Parameter
The parameters of type WDOperator can be take the following values: bt for BETWEEN, eq for equal to, ge
for greater than or equal to, gt for greater than, le for less than or equal to and lt for less than. These
parameters correspond to the relational operators of Open SQL. The parameters of type WDAxis can take
the following values: columns, row, free. This parameter specifies whether the elements are arranged in
columns or rows.

© 2008 SAP AG 33
UI Element Guide
Breadcrumb Navigation
A BreadCrumb displays the current page in the context of a navigation path. You can, for example, display a
history of the pages last visited or the structure of the information provided. A BreadCrumb consists of
individual links or entirely represents a link, as displayed in the following screen graphics:
• behaviour Property and Its Effect at Runtime
multipleLinks
singleLink
You can insert two different types of BreadCrumb steps into a BreadCrumb.
• BreadCrumbStep (IWDBreadCrumbStep)
• MultipleBreadCrumbStep (IWDMultipleBreadCrumbStep)
BreadCrumbSteps are bound to individual context attributes. In this way, the number of displayed steps is
defined during runtime. A MultipleBreadcrumbStep is bound to a context node. This allows the number of
displayed steps to be dynamically adjusted at runtime.
BreadCrumb
The Web Dynpro class BreadCrumb, which implements the IWDBreadCrumb interface, is the base class
for representing Breadcrumb navigation.
Properties
• behavior. This property defines whether the entire breadcrumb path is a link or each single
breadcrumb step. The behaviour property can be filled with the following values and is represented
by the listing type WDBreadCrumbBehavior.
multipleLinks Each breadcrumb step is an independent link.

singleLink The entire BreadCrumb path is a single link.
• separatorImageSource. This property defines the file path of the screen that serves as a separator
between the individual BreadCrumb steps.
• separatorText. This property defines the text or characters that serves as a separator between the
individual BreadCrumb steps.
• size. The size property can have the following values and is represented by enumeration type
WDBreadCrumbSize: large, medium, and small. The standard value is medium.
Events
The event onSelect is triggered whenever a user clicks a breadcrumb step.
Name Class Parameter
onSelect IWDBreadCrumb (String step)
BreadCrumbStep
The Web Dynpro class BreadCrumbStep implements the IWDBreadCrumbStep interface. A breadcrumb
step is an element of a BreadCrumb that is implemented as IWDBreadCrumb.

© 2008 SAP AG 34
UI Element Guide
Properties
• text. This property specifies the text.
• textDirection. With this property you can specify the text direction. This enables the labels for the
BreadCrumb step to be read in other languages that require a specific text direction. The
textDirection property can be filled with the following values and is represented by the listing type
WDTextDirection.
inherit
The text direction is inherited from the parent element. Therefore, the
text direction is identical to the one of the parent element.
ltr The text runs from left to right.
rtl The text runs from right to left.
The default value for this property is inherit.

• tooltip. This property describes a note for the view element, which is displayed when the user places
the cursor on the view element.
• visible. This property specifies whether or not the BreadCrumb step is displayed. This property
enables you to easily hide a BreadCrumb step.
MultipleBreadCrumbStep
A MultipleRoadMapStep is bound to a context node and enables the application developer to dynamically
adapt the BreadCrumb. Depending on how many elements are assigned to the context node, the number of
displayed BreadCrumb steps can vary.
Properties
• dataSource. This property defines the context node to which the MultipleBreadCrumbStep must be
bound.
BusinessGraphics
The BusinessGraphics UI element provides several chart types, such as vertical bar charts or pie charts, that
can be used for the graphical illustration of data and data relationships. Other more complex chart types are
available too, such as portfolio and gantt. These can help the user of your Web application to make decisions
for corporate planning or find information in general. You can use the Chart Designer to modify the UI
element properties and additional properties, known as the chart elements, and adapt them to suit your
requirements.
For accessibility reasons, you should always display this UI element together with a Label UI element when
using a business graphic.

© 2008 SAP AG 35
UI Element Guide
Properties
• alwaysDisplayGraphic. deprecated. For existing applications you can define whether the Graphic is
displayed as a table in accessibility mode. For new applications you can define the data presentation
in accessibility mode on your own.
• backgroundColor. Specifies the background color of a BusinessGraphics UI element.
• chartType. Specifies the chart type. The following chart types are available:
Chart Type Description Example

area Describes a surface diagram.
bars Describes a bar chart
columns Describes a vertical bar chart.
doughnut Describes a ring chart.
gantt Describes a chart of type

Gantt.
lines Describes a line chart.
pie Describes a pie chart.

pipeline Describes a chart of type
pipeline.
polar Describes a chart of type polar.
portfolio Describes a chart of type
portfolio. This chart type can
be used as an analytical tool in
strategic corporate planning. It
can be used to provide a visual
display of a company’s
competitiveness, for example.
profile_area Describes a chart of type
profile_area.
profiles Describes a chart of type
profiles.
radar Describes a chart of type
radar.
scatter Describes a chart of type
scatter.
speedometer Describes a chart of the type

speedometer.
split_pie Describes a chart of type

© 2008 SAP AG 36
UI Element Guide
split_pie.
stacked_area Describes a chart of type
stacked_area.
stacked_bars Describes a chart of type

stacked_bars.
stacked_columns Describes a chart of type

stacked_columns.
stacked_lines Describes a chart of type

stacked_lines.
stacked_profile_area Describes a chart of type

stacked_profile_area.
stacked_profiles Describes a chart of type
stacked_profiles.
stacked_radar Describes a chart of type
stacked_radar.
• customizing. Describes how the chart is displayed on the screen. This property is assigned to a Web
address (URL) linking to an XML file that describes the appearance of the business graphic on the
screen – for example, the graphic color, the background color, fonts, and so on. It also specifies
whether or not the graphic displays a legend. You can make these settings directly in the SAP
NetWeaver Developer Studio using the Chart Designer tool. To call the tool, place the cursor on the
UI element, click the right mouse button, and select the Start Chart Designer menu option in the
context menu.
• seriesSource. Describes the path to the context node in the hierarchical structure of the context that
provides the data.
• dimension. Describes the dimensions of the chart. The following dimensions are available:
pseudo_three A pseudo-three-dimensional chart, the z-axis is not displayed.

three A real three-dimensional chart.
two A two-dimensional chart (surface diagram).
• fontFamily. Specifies the font for the graphic elements.
• height. Specifies the height of the chart in relative CSS units like em or ex.
• igsUrl. This property can be used to specify the Web address (URL) of the server on which the
Internet Graphics Service should run. This allows you to overwrite the global URL for Web Dynpro
System Configuration in the default properties.
• transparentColor. Specifies the color to be used as transparent color. You can specify the colors in
RGB, HSB, or X11 - for example, rgb(255,0,0), or slateblue.
• width. Specifies the width of the chart in relative CSS units like em, ex, or percentage.

© 2008 SAP AG 37
UI Element Guide
Events
• onAction (String id)
This event is triggered when the user selects a certain area of the business graphic. The parameter is
the id of the selected UI element.
Category
The Category describes the categories of a graphical representation. Categories of a chart are a discrete
value range or an unsorted set of objects - such as January, February, March, and so on - that do not have a
distance term and therefore have no relation to each other. In a vertical bar chart, the categories are
displayed next to each other in columns with the categories on the x-axis and the values on the y-axis. This
enables the user to compare individual categories – for example, the sales figures for each month of one
year.
The following chart shows a business graphic of the vertical bar chart type with six categories and three data
series. The six categories are displayed on the horizontal x-axis. The three data series are displayed as
vertical columns for each category.
Unlike the simple category-based charts such as vertical bar charts, the more complex scatter charts and
portfolio charts do not contain categories.
Property Descriptions
• description. Specifies the texts of the categories. You can statically specify this property value at
design time or bind it to a context attribute so that the value is provided automatically by the context at
runtime.
• eventid. Enables you to define an ID that can determine from which object the event has been
triggered.
• tooltip. Describes a note for the UI element that is displayed when the user places the cursor on the
UI element.
Events
• onAction
This event is triggered when the user selects a category area in the generated graphic.
Series
The Series object is used to specify a more complex data series. You can use this object for displaying data
series if you do not want to display a category-based chart or if the number of data series is not definite at
design time.
A data series represented by the Series object can contain exactly one Point object.

© 2008 SAP AG 38
UI Element Guide
Properties
• customizingID. An ID is assigned to this property, and the ID stores information about the
representation of the data series under the Customizing XML file of the BusinessGraphics UI element.
• dataBeginIndex. This property can be used to display a selection of node elements of the bound
context node. The dataLength property is used to define the number of node elements to be
selected.
• eventId. Enables you to define an ID that can determine from which object the event has been
triggered.
• pointSource. This property is used to specify the data source. You can use it to specify the path to
the context node that provides the data for this object.
• dataLength. You can use this property to specify the number of node elements if you have specified
a selection using the dataBeginIndex property.
• label. This property is used to specify an optional text to be displayed for a point in a business
graphic.
• leadSelectionCustomizingID. This property can be used to select an alternative Customizing. The
data series must be selected.
• showSelectedOnly. A Boolean value that describes the selection of a data series. If the value is set
to true, only the selected data series are displayed.
• tooltip. Describes a note that is displayed when the user places the cursor on the area of the data
series.
Point
The Point object defines the structure of the points of a more complex data series. The data binding and the
sub object structure of a Point object indicates the number of values and their value types of a data point in a
data series. A data series represented by the Series object can contain exactly one Point object. A Point
object can be filled with one or more value objects, either a NumericValue or a TimeValue.
• customizingID. Describes how the chart is displayed on the screen. An ID is assigned to this
property, and the ID stores information about the representation of the data series under the
Customizing XML file of the BusinessGraphics UI element.
triggered.
• valueSource. This property is used to specify the data source. You can use it to specify the path to
the context node that provides the data for this object.
graphic.
series.
Error! Bookmark not defined.SimpleSeries

The SimpleSeries object is used to specify a simple data series. This object should be used when:
...
• The number of data series is already determined and known at design time
• The chart is category-based and each point has only one y value

© 2008 SAP AG 39
UI Element Guide
• customizingID. An ID is assigned to this property, and the ID stores information about the
representation of the data series under the Customizing XML file of the BusinessGraphics UI element.
triggered.
graphic.
series.
• value. This property specifies the path to the context attribute that provides the data for this object.
NumericValue
The NumericValue class is available for using numeric values of the data type double. This class can be
used for specifying the value of a point - for example, the x value for scatter charts or the y value for
category-based business graphics.
• type. This property specifies the value type. The type property can be filled with the following values
and is represented by the enumeration type WDValueTypeEnumeration.
Enumeration Value Short Description
chart
Describes the value for a small chart within a chart in a portfolio chart
(see graphic below).
size Describes the size of a point in a portfolio chart.
trendX Describes the y component in the trend arrow of a portfolio chart.
trendY Describes the y component in the trend arrow of a portfolio chart.
x Describes the x value in a business graphic – for example, in a scatter
chart.
y Describes the y value in a business graphic – for example, in a
category-based chart.
• value. This property specifies the numeric value of a point. It must be bound to a context attribute
within a context structure that provides the data for the values at runtime. The initial value of this
property is 0.0.
Example
Portfolio chart for the representation of the chart value of the enumeration type WDValueTypeEnumeration:

© 2008 SAP AG 40
UI Element Guide
TimeValue
The TimeValue class is available for the use of time values of the data type long.
Properties
• value. This property specifies a time value for a point in a chart. It must be bound to a context attribute
within a context structure that provides the data for the values at runtime. . The time values must have
the format YYYYMMDD, where Y is the year, M is the month, D is the day – for example, 20040205. In
addition, you can use a semicolon as a separator to specify hours, minutes, seconds, and milliseconds.
The following formats are valid:
{ YYYYMMDD
{ YYYYMMDD;HHMMSS
{ YYYYMMDD;HHMMSSZZZ (H=hours, M=minutes, S=seconds, Z=milliseconds).
In general, this format refers to all graphics with time lines, such as TimeScale graphic.
Button - ButtonRow
The UI element Button simulates the pushbutton on the screen. The user can execute statements and
actions by clicking the pushbutton. The UI element ButtonRow can be used to arrange buttons in a row.
You can accurately arrange multiple buttons using ButtonRow. Buttons and ToggleButtons can be inserted.
The ButtonRow itself does not contain any additional properties, but has the relevant methods for creating
and maintaining the inserted buttons. IWDButton inherits from IWDAbstractButton, which is the abstract
base class of pushbuttons. It inherits the ability to display an icon from the base class
IWDAbstractCaption and adds the ability to display a text on the pushbutton and trigger an action.

© 2008 SAP AG 41
UI Element Guide
Properties
• activateAccessKey. Indicates whether the access key for this Button is activated.
• design. Describes the style of the Button UI element - for example, the button size or the highlighting
of the button label. The design property can be filled with the following values and is represented by
the enumeration type WDButtonDesign.
Values Visual Display Short Description

emphasized Displays the UI element with highlighted left edge.
Next Displays the button with a triangle pointing to the right.

previous Displays the button with a triangle pointing to the left.
standard Displays the UI element with default background and text
color.
• explanation. specifies the explanation text. explanation is maintained by the documentation
developer in the Web Dynpro Authoring environment.
• hotkey. specifies the key combination that triggers the onAction event. The value is defined as
enumeration type WDHotKey.
• imageAlt. This property is deprecated. Use tooltip instead.
• imageFirst. Defines the position of the icon in relation to the corresponding text. If the value of this
property is true, the icon is displayed to the left of the text.
• imageSource. defines the path to the image source.
• size. This property is deprecated and can no longer be used.
• text. Describes the label text of the Button UI element.
• textDirection. Specifies the text direction and allows you to read the texts of subordinated UI
elements in languages which require a specific text direction. The textDirection property can be
filled with the following values and is represented by the enumeration type WDTextDirection.
inherit
ltr
The text runs from left to right.
rtl
The text runs from right to left
• width. Determines the width of the Button UI element that you can specify in CSS sizes, such as em,
ex, pixels or percentage values.
Event
• onAction
This event is triggered when the user clicks the button.
ButtonChoice
A ButtonChoice is a button that offers to choose among several options via a small triangle symbol, as is
illustrated in the following figure.
If the user clicks on the triangle symbol, a menu opens from which an action can be selected. When the user
has selected an action, this action is set to the button and can then be executed by the user. The
repeatSelectedAction property makes it possible that the last selected action remains on the button after
execution of an action:

© 2008 SAP AG 42
UI Element Guide
Properties
• imageSource. Specifies the Web address (URL) of the symbol to be displayed.
• repeatSelectedAction. Determines that the last selected action remains assigned to the button as
long as there is no other one selected.
• selectedActionItem. Determines the selected action element.
• text. Determines the labeling of the ButtonChoice.
Calendar
A Calendar can be implemented using the following UI elements:
• A view that determines whether a year, a single week or a single day is displayed:
{ CalendarYearView displays an entire year or several months, depending on the number of
months defined in the property visibleMonths.
{ CalendarMonthView displays a single month.
{ CalendarWeekView displays a single week, either five or seven days, depending on the value
specified in the property weekType.
{ CalendarDayView displays a single day.
{ HierarchicalCalendarMonthView is a special view to display a month, which allows you to
display different calendars in a hierarchical structure, e. g. a team calendar.
Using CalendarWeekView or CalendarDayView you can display a timescale, CalendarYearView
displays entire days.
• CalendarEntry for calendar entries. Using CalendarYearView only full day entries are displayed,
CalendarWeekView and CalendarDayView display all entries.
• Day Patterns: you can define patterns for single days using the DayPattern and for recurring days, e.
g. for every Monday using the RecurrenceDayPattern.
WorkingTime. You can insert a WorkingTime UI element into a day pattern to define the start and the
duration of the working time of the correspondent day or days.
• You can assign a CalendarPaginator, which is placed in a ToolBar, to allow the user to browse the
correspondent time units.
• You can assign a Legend UI Element to explain the used colors.
Structure
The figure below shows a typical structure of a calendar view:
A calendar view, in this case a CalendarMonthView, including an CalendarEntry and a DayPattern. The
DayPattern contains a WorkingTime.
CalendarYearView
The CalendarYearView displays by default a time period of one year (12 months), broken down into days.
The months are displayed on the vertical axis, while the days are displayed on the horizontal axis. You can
specify the number of months you want to display.

© 2008 SAP AG 43
UI Element Guide
Properties
• firstVisibleDate. Specifies the first visible day in the calendar. firstVisibleDate is of type CctDate.
• legendId. Specifies the ID of the assigned legend.
• showWorkingTime. Determines whether the calendar should display differences between working
times.
• scrollable. Defines whether the Calendar can be scrolled.
• timeZone. Determines the time zone in which entries are displayed. If no time zone is specified, the
calendar uses the system time zone.
• visibleMonths. Specifies the number of months displayed.
Events
• onDaySelect (CctDate day). The event is triggered when the user clicks in an empty area of a day.
Parameter is the day selected. This event should be used to create a new entry.
• onEntrySelect. This event is triggered when the user clicks on an entry.
• onMoreSelect (CctDate day). The event is triggered when the user clicks on the more icons.
Parameter is the selected day. This event should be used to navigate to a detail view
(CalendarDayView) of the day.
CalendarMonthView
CalendarMonthView displays a single month structured by weeks.

© 2008 SAP AG 44
UI Element Guide
Properties
• firstDayOfWeek. Determines the first day of the week, Sunday for example. The default setting auto
calculates the first day of week according to the local settings.
• firstVisibleDate. Specifies which date is displayed as the first date.
times and free times.
• timeZone. Determines the time zone which all entries are displayed. If no time zone is given, the
Events
• onDaySelect (CctDate day). The event is triggered when the user clicks an empty area of a day.
The parameter is the corresponding day. Should be used to create a new entry.
• onMoreSelect(CctDate day). This event is triggered when the user clicks on an entry.
HierarchicalCalendarMonthView
HierarchicalCalendarMonthView is designed to display a team calendar. As illustrated in the screenshot
below, the first column is designed as a tree.

© 2008 SAP AG 45
UI Element Guide
Properties
• dataSource. Specifies the path to the context node that represents the vertical axis of the
HierarchicalCalendarMonthView. Each node element represents a row in the hierarchical calendar.
• expandable. Determines whether the current node can be expanded.
• expanded. Determines whether the current node is expanded.
• ignoreAction. Specifies whether the node should be displayed as link. If you set ignoreAction to
true, the user cannot open the node.
• isLeaf. Determines whether the current row is a leaf or a node.
• scrollable. Specifies whether the HierarchicalCalendarMonthView is displayed with a scroll bar. If this
property is set to false and additional space is needed to display the entire contents, either a
surrounding scroll container is enabled or the screen is enlarged.
• showWorkingTime. Determines whether the calendar displays differences between working times
and free times.
• text. Determines the text displayed for nodes or leaves in the hierarchical calendar.
Events
• onAction. This event is triggered if the user clicks a node.
• onDaySelect (CctDate day). A click in an empty area of a day fires the event with the day as
parameter. Should used to create a new entry.
• onEntrySelect. This event is triggered if the user clicks an entry.
• onMoreSelect (CctDate day). A click on the more icons fires this event, with the day as parameter.
Should navigate to a detail view of the selected day (CalendarDayView).
• onToggle. This event is triggered when the user clicks the toggle button in the header column.

© 2008 SAP AG 46
UI Element Guide
Data Binding
To display the tree structure in the first column of the HierarchicalCalendarMonthView, you have to provide a
context structure where the context node contains either another node, if you want to display a two level
hierarchy, or a recursive node, if you want to display a hierarchy with more than two levels.
CalendarWeekView
The CalendarWeekView displays a time period of 1 week (5 or 7 days) with at least 8 hours per day and the
option of displaying days broken down to quarters of hours.
The hours are displayed on the vertical axis, while the days are displayed on the horizontal axis. An
additional row displays full day entries without a time.
Properties
• contentHeight. Specifies the height of the content part of the CalendarWeekView. You can specify
the height in CSS units, like em, ex or pixels.
• firstDayOfWeek. Determines the first day of the week, for example Sunday. The default setting auto
calculates the first day of week the according to the local settings.
• firstVisibleTime. Specifies which time is displayed as the first time
• scrollable. Defines whether the CalendarWeekView can be scrolled. Turning off the Scrolling the
calendar control might push the surrounding container control.
time and free time.
• timescale. Specifies the time segments to be displayed timescale can take the following values and
is represented by the enumeration type WDTimeScale:
{ halfHour. Each time slot represents a period of 30 minutes.
{ hour. Each time slot represents a period of one hour.
{ quarterHour. Each time slot represents a period of 15 minutes.
{ twoHours. Each time slot represents a period of two hours.

© 2008 SAP AG 47
UI Element Guide
• weekType. Determines whether a working week or a entire week is displayed. weekType can take
the following values and is represented by the enumeration type WDWeekDays:
{ fiveDayWeek
{ sevenDayWeek
Events
• onAllDaySelect (CctDate day). The event is triggered when the user clicks in a free area in the row
that displays the all day events. The parameter is the corresponding day. This event should be used to
create a new full day entry.
• onDaySelect (CctDate day). The event is triggered when the user clicks in an empty area of a day.
The parameter is the corresponding day. This event should be used to create a new entry.
• onEntrySelect. This event is triggered when the user clicks on an entry.
• onTimeSelect (CctDateTime time). This event is triggered when the user clicks in a free time area.
Parameter is the corresponding time. This event should be used to create a new entry.
CalendarDayView
CalendarDayView displays a time period of one day (minimum 8 hours, maximum 24 hours) with a minimum
resolution of a quarter of an hour. The hours should be displayed on the vertical axis, while a day is
displayed on the horizontal axis. An additional row shows full day entries.
Properties
• contentHeight. Specifies the height of the content part of the CalendarWeekView. You can specify
the height in CSS units like em, ex or pixels.
• firstVisibleTime. Specifies which time is displayed as the first time
• scrollable. Specifies whether the CalendarDayView is displayed with a scroll bar. If this property is set
to false and additional space is needed to display the entire contents, either a surrounding scroll
container is enabled or the screen is enlarged.
times and free times.
• timescale. Specifies the time segments to be displayed. timescale can take the following values,
and is represented by the enumeration type WDTimeScale:
{ halfHour. Each time slot represents a 30 minutes duration.

© 2008 SAP AG 48
UI Element Guide
{ hour. Each time slot represents a duration of an hour.

{ quarterHour. Each time slot represents a 15 minutes duration.
{ twoHours. Each time slot represents a duration of two hours.
Events
• onAllDaySelect (CctDate day). A click in a free area in the 'AllDay' row fires this event with the
parameter day. This should be used to create a new full day entry.
• onDaySelect (CctDate day). A click in an empty area of a day fires the event with the day as
parameter. This should be used to create a new entry.
• onEntrySelect. A click on an entry fires this event.
• onTimeSelect (CctDateTime time). A click in the free time area fires this event with the parameter
time. This should be used to create a new entry.
CalendarEntry
Different entries are displayed, depending on the chosen view type.
YearView:
• The YearView displays only entries that are either full day entries (fullDay=true) or have a
different start and end date (such as start: 01.01.2006 10.00 – end: 04.01.2006 11:00). It will not
display entries that have the same start and end date.
• Only one entry will be displayed with a bar. No parallel entries are displayed. A more icon is rendered
in a day if there are parallel entries.
• The entry bar displays the subject and additionalText and a default color that can be overwritten
by a semantics colour. The tool tip contains the subject, additionalText and general information
about the entry, like start time, end time and so on. The recurring icon is also rendered at the end of
the bar.
WeekView and DayView:
These views have two areas – the full day area and the time area. The full day area displays all entries
with the parameter fullDay=true. All others entries are displayed in the time area. Entries with
different start and end dates are also displayed in the time area.
Up to three parallel full day entries are displayed without shrinking the bar size. Five entries are displayed
but not more.
Subject and additionalText are displayed, if there is enough space. The tool tip contains subject,
additionalText and general information about the entry, like start time, end time and so on.
Displays all available state information
Properties
• additionalText. Determines additional information, like location, attendees and so on. Should not be
used for the body of a CalendarEntry.
• dataSource. Determines the data source of the CalendarEntry. You can use it to specify the path to
the context node providing the data.
• end. Determines the end time of the CalendarEntry and is of type CctDateTime.
• fullDay. Determines whether the entry is a full-time entry and has no start and end time.
• recurring. Determines whether the entry is recurring. The recurring icon is rendered in the entry.
• semantics. Specifies the color of the CalendarEntry. The semantics property is represented by
enumeration type WDTableCellDesign.
• start. Determines the start time of the CalendarEntry and is of type CctDateTime.

© 2008 SAP AG 49
UI Element Guide
• striped. Determines whether the CalendarEntry is displayed dashed, for example to visualize
tentative entries.
• subject. Determines the subject of the CalendarEntry.
CalendarPaginator
CalendarPaginator is a UI element that you can insert in a ToolBar. It allows the user to browse the calendar.
The CalendarPaginator provides the browse buttons, texts and tool tips. Browsing must be implemented by
the application developer.
Depending on the type of calendar displayed, the buttons should be used to navigate with the following
methods:
• CalendarYearView
{ Left and right arrow: navigate to previous/next month
{ Double left and double right arrow: navigate to previous/next year
• CalendarMonthView and HierarchicalCalendarMonthView
Left and right arrow: navigate to previous/next week
Double left and double right arrow: navigate to previous/next month
CalendarWeekView
Left and right arrow: tool tip and functionality is: go to previous week / go to next week
CalendarDayView:
Left / right arrow: tool tip and functionality is: go to previous day / go to next day
Properties
• collapsible. Specifies whether the CalendarPaginator can be collapsed.
• connectedCalendarId. Specifies the ID of the Calendar that the CalendarPaginator belongs to.
Events
• onNext (boolean page). The event is triggered when the user clicks on a next arrow. The parameter
page determines whether the double arrow was clicked
• onPrevious (boolean page). The event is triggered when the user clicks on a previous arrow. The
parameter page determines whether the double arrow was clicked.
Day Patterns
You can use day patterns to define the following non-entry related information for each day:
• Public holiday and the public holiday text
• Different working times
WD offers two aggregations to define a day patterns. RecurrenceDayPattern defines a pattern for a day of
the week, such as Saturday. All Saturdays in the calendar then have the same pattern. With the aggregation
DayPattern it is possible to redefine each day individually. The DayPattern therefore has a dataSource that
is bound against a context node containing all necessary information. The following patterns are displayed in
the different views:
YearView
The holidayText is included in the tool tip of the day. Free days (without a defined working time) and working
days (with a defined working time) are visualized.
WeekView and DayView:

Holidays are rendered as full day events.

© 2008 SAP AG 50
UI Element Guide
Working times are displayed, depending on the setting for property showWorkingTime.
DayPattern
You can use the day patterns to define the following information for each day:
• Public holiday and the public holiday text
• Different working times
With DayPattern, you can define each day individually. The DayPattern therefore has a dataSource that is
bound to a context node, where all necessary information can be provided.
If no day pattern is available for a day, it is rendered as a free day (the default):
Properties
• dataSource. Determines the data source of the DayPattern. You can use it to specify the path to the
context node providing the data.
• date, Specifies the date.
• holiday. Determines whether the day is a day off.
• holidayName. Determines the holiday’s name. The holidayName is included in the tool tip of the
related day.
WeekDayPattern
You can use WeekDayPattern to define a pattern for a day of the week, such as Saturday. Each Saturday in
the calendar will then have the same pattern. It can be used to define a consistent display for a day of the
week.
Properties
• dataSource. Determines the data source of the WeekDayPattern. You can use this to specify the
path to the context node providing the data.
• day. Specifies the day as WDDayOfWeek.
• endDate. Determines the end date by this WeekDayPattern is valid. If no end date is specified the
WeekDayPattern is always valid.
• startDate. Determines the start date from this WeekDayPattern. If no start date is specified the
WeekDayPattern is always valid.
WorkingTime
You can insert a WorkingTime into a DayPattern or a RecurringDayPattern in order to distinguish between
free and working time. If working time in your company ends at 13.00 on Fridays, you can assign a
RecurringDayPattern to your calendar and insert a WorkingTime. You specify the WorkingTime to start at
8.00 a.m. with a duration 5 hours.
Properties
• duration. Determines the duration of the working time and is defined as CctDuration in hours.
• start. Determines the start of the working time and is defined as CctTime.

© 2008 SAP AG 51
UI Element Guide
Caption
The Caption class, which implements the IWDCaption interface, is a concrete subclass of the
IWDAbstractCaption class. The UI element can be used by several UI elements – such as Group, Tab,
Table, TableColumn, and Tray – to provide a header or an icon for them.
Properties
• ImageAlt. This property is deprecated. Use tooltip instead.
• ImageFirst. Defines the position of the icon in relation to the corresponding text. If the value of this
• ImageSource. defines the path to the image source.
• IsDragHandle. Determines if this caption can be used as a drag handle for runtime authoring. The
innermost surrounding layout cell that is enabled to act as a drag source can then be grabbed by this
handle.
• ReadOnly. Specifies whether or not the user can check the checkbox.
• State. Describes the error status of the UI element. The data type of this property corresponds to the
enumeration type WDState. You can use the following values in the application:
normal Describes the default state of the UI element.

required Specifies whether the entered value is required.
• Text. Specifies the text.
• TextDirection. Specifies the text direction and allows you to use subordinated UI elements for texts in
languages which require a specific text direction. The textDirection property can be filled with the
following values and is represented by the enumeration type WDTextDirection.
inherit The text direction is inherited from the parent element. Therefore, the
CheckBox
The checkbox enables the user to select a Boolean value (true/false). The UI element consists of a graphic
with text. The checkmark in the box indicates that the option is selected and the value is set to true. The
Web Dynpro class Checkbox which implements the IWDCheckBox interface is the base class of
checkboxes.

© 2008 SAP AG 52
UI Element Guide
Properties
• ActivateAccessKey. Indicates whether access key for this control is activated.
• Checked. Specifies whether or not a checkbox is selected. The Boolean value true indicates that the
option is selected. A checkmark appears in the graphic that is displayed on the screen.
Short Description Visual Display
The checkbox UI element that is displayed with the value true.
The checkbox UI element that is displayed with the value false.
• Explanation. specifies the explanation text. explanation is maintained by the documentation

• ReadOnly. Specifies whether or not the user can check the checkbox.
• State. Describes the error status of the UI element. The data type of this property corresponds to the

• text. Specifies the text that is associated with the checkbox graphic and displayed to the right of the
box.
• textDirection. Specifies the text direction and allows you to use a checkBox for texts in languages
which require a specific text direction. The textDirection property can take the following values
and is represented by the enumeration type WDTextDirection.
inherit
Events
• onToggle (boolean checked). The onToggle event is triggered when the user clicks the CheckBox.
The parameter is the new status.
CheckBoxGroup
The checkbox group enables the user to select one element from a set of options checking it. The
CheckBoxGroup UI element lists the checkboxes as a table. As opposed to the RadioButtonGroup, you can
check multiple fields.

© 2008 SAP AG 53
UI Element Guide
Properties
• colCount. Specifies the number of columns in which the CheckBox elements are grouped.
• readOnly. Specifies whether or not the user can check the checkbox in the checkbox group.
• state. Describes the status of the UI element. The data type of this property corresponds to the
Describes the default state of the UI element.
normal
required The required state is displayed by an asterisk.
• textDirection. Specifies the text direction and allows you to use a checkbox group for texts in
inherit
• texts. Specifies the path of the context attribute within a context node whose node elements provide
the texts of the individual checkboxes at runtime.
• width. Specifies the minimum width of the CheckBoxGroup UI element. You can specify the width in
CSS units like em, ex, pixel, or percentage.
Events
• onToggle (boolean checked, int index). This event is triggered when the user checks a checkbox in
the CheckBoxGroup.
Event parameters Type Description
checked boolean The new value of the checkbox.

index int Index (0..n) of the selected
checkbox.
Data Binding
A checkbox group is a multiple selection displayed as a group of checkboxes on the screen.
The view context must provide the node X that can contain 0 to n values (X.cardinality = 0..n). The context
node must contain an attribute y that provides the texts for the checkbox fields. The data type of the context
attribute y can be any simple data type – for example, String, int, and so on. The number of checkboxes
equals the number of node elements. The selection of the checkboxes is determined by the multiple
selection of the node. The texts property of the CheckBoxGroup UI element is bound to the attribute y by
assigning the context path of the context y to the texts property.

© 2008 SAP AG 54
UI Element Guide
DateNavigator
The DateNavigator UI element enables users to display and enter dates. Its features include the ability to
navigate in a calendar and choose a day, month, year, or range of dates. Primarily, this element should be
used to help users to input dates in an appropriate format.
You can insert a DateNavigatorMarking element in the DateNavigator. In combination with an assigned
legend, you can use this element to highlight a text in color and add a corresponding description in the
legend. For example, events in the calendar can be highlighted in a different color and each event can be
described with agenda, time, and location.
Values of the properties: monthPerColumn = 1, monthsPerRow = 4
Properties
• accessibilityDescription. When accessibility is activated, the assigned text is added to the quick
info. This description provides semantic details of the UI element and is only read by the screen
reader if the user focuses the complete Ul element.
• firstDayOfWeek. The firstDayOfWeek property can take the following values and is represented
by enumeration type WDDayOfWeek.
auto Specifies the first day of the week automatically - for example, according
to the country-specific beginning of the week.
Friday with the ordinal number defined in java.util.Calendar.
friday
monday Monday with the ordinal number defined in java.util.Calendar.
saturday Saturday with the ordinal number defined in java.util.Calendar.
sunday Sunday with the ordinal number defined in java.util.Calendar.
thursday Thursday with the ordinal number defined in java.util.Calendar.
tuesday Tuesday with the ordinal number defined in java.util.Calendar.
wednesday Wednesday with the ordinal number defined in java.util.Calendar.
• firstSelectedDate. Specifies the first date in the selected date range.
• lastSelectedDate. Specifies the last date in the selected date range.. legendId. Specifies the ID of
the assigned legend.
• monthsPerColumn. You use this property to specify the number of months in a column.
• monthsPerRow. You use this property to specify the number of months in a row.
• selectionMode. Specifies whether the user can choose a single date or a range of dates. The
selectionMode property can be filled with the following values and is represented by the
enumeration type WDTableSelectionMode.
none A date or date range cannot be selected.
range The user can choose a contiguous block of dates.

© 2008 SAP AG 55
UI Element Guide
single The user can choose only one date.
• startsWith. Defines the start of the displayed date range.
Events
• onDaySelect (java.sql.Date day). Specifies the action executed when the user selects a day. The
event parameter is the chosen day. The parameter day is of the type java.sql.Date and is the
selected day.
• onMonthSelect (int month, int year). Specifies the action executed when the user selects a month.
Event parameters are the chosen months (in the range of 1 to 12) and the chosen year is of the type
integer.
• onStartDateChanged (java.sql.Date startDate). Specifies the action that is carried out when the user
changes the startsWith property. The event parameter startDate of the type java.sql.Date is
the new start date.
• onWeekSelect (java.sql.Date firstDay, int week, int year). The event is triggered when the user
selects a week. The event parameter firstDay replaces the deprecated parameter week, because
the number of the week depends on the user’s locale settings. year is the selected year and is of type
integer.
DateNavigatorMarking
This view element allows you to highlight entries of a specific category within the DateNavigator. You can
also define a tooltip for the highlighted entry. You should only use DateNavigatorMarking in combination with
a legend element, with which you can also explain each highlighting to the user.
• category. This property is deprecated, use daySemantics instead.
• dataSource. Specifies the path to the context node which stores the date, category, and tooltip of the
highlighting.
• date. Specifies the path to the context attribute that stores the date of the highlighting.
• daySemantics. Specifies the background color of the cell. The cellDesign property is represented
by enumeration type WDTableCellDesign.
• tooltip. Specifies the path to the context attribute which stores the tooltip of the highlighting. You
should bind the property to a context attribute of the multiple context node, because otherwise each
highlighting has the same tooltip.
DateNavigatorLegend
The DateNavigatorLegend is deprecated. Instead, insert a Legend element and use the
legendId property of the DateNavigator element to assign it.
DropDownByIndex
The Web Dynpro class DropDownByIndex , which implements the IWDDropDownByIndex interface, is
the base class of the dropdown list boxes for which index binding is used.
A DropDownByIndex UI element provides the user with a dropdown list box. You cannot select more than
one entry from the selection list. The UI element consists of a text field, a button, and a selection list. Any list
entry already selected is displayed in the text field. When selecting the button, a list with all possible values is
displayed.
Visual Display:

© 2008 SAP AG 56
UI Element Guide
Properties
• displayAsText. Specifies, whether the InputField looks like a text if it has not the focus.
• labelFor. The DropDownByIndex element can also be used as a label for other UI elements. You can
use the labelFor property to reference to a UI element.
• readOnly. specifies whether the user can select an element.
• selectionChangeBehaviour. The change of the lead selection can cause a data loss – for example, if
the changed or new data was not written to the context due to syntax errors. You can avoid the data
loss using the selectionChangeBehaviour property before changing the lead selection:
auto If the data was written to the context, the value auto specifies that the
DropDownByIndex automatically changes the lead selection of its data source
directly after an interaction by the user before the corresponding event is
triggered.
manual Specifies that the DropDownByIndex does not change the lead selection of its
data source after an interaction by the user but triggers the corresponding event.
In this case, the event handler must change the lead selection to enable the
DropDownByIndex to display the data in a main detail view, for example. This
setting allows you to check the change of the lead selection.
• state. displays the status of the DropDownByIndex. The state property can take the following values
and is represented by enumeration type WDState.
{ normal
{ required. The required state will be displayed by an asterisk.
• textDirection. Specifies the text direction. This enables the labels for the DropDownByIndex to be
read in other languages that require a specific text direction. The textDirection property can take
the following values and is represented by enumeration type WDTextDirection.
inherit
The text direction is inherited from the parent element. The text
direction is thus identical to that of the parent element.

• texts. Specifies the path to the context attribute that provides the texts for the DropDownByIndex. The
context attribute must be an attribute of a multiple context node which stores the data.

© 2008 SAP AG 57
UI Element Guide
• width. Determines the width of the DropDownByIndex. You can specify this in CSS sizes, such as em,
Events
• onSelect (int index). This event is triggered when the user selects a different list entry from the
dropdown box. The newly selected index (starting from zero) is passed as an event parameter.
Event Parameter Type Description
index int Index of the newly selected

context element
Error! Bookmark not defined.DropDownByKey
A DropDownByKey UI element provides the user with a selection list from

which he or she can select no more than one entry. The UI element consists
of a text field, a button, and a selection list. Any list entry already selected is
displayed in the text field. When you select the pushbutton, a list with all
possible values is displayed
Properties
• explanation. determines the explanation text. explanation is maintained by the documentation
• labelFor. The DropDownByKey element can also be used as a label for other UI elements. You can
use the labelFor property to reference to a UI element.
• readOnly. specifies whether the user can select an element.
• selectedKey. determines the value from a value set. The value is selected from the DropDownByKey
list.
• state. Describes whether an icon that indicates a required state is displayed. state can take the
following values and is represented by enumeration type WDState:
{ normal
{ required. The required state will be displayed by an asterisk.
• textDirection. Specifies the text direction. This enables the labels for the DropDownByKey to be read
in other languages that require a specific text direction. The textDirection property can take the
following values and is represented by enumeration type WDTextDirection.
inherit

© 2008 SAP AG 58
UI Element Guide
• width. Determines the width of the DropDownByKey. You can specify this in CSS sizes, such as em,
Events
• onSelect. This event is triggered when the user selects a list entry from the dropdown list box.
Event Parameter Type Description
key String Key of the selected entry.
Explanation
The Explanation UI element displays a multi-line help text for the entire screen or a defined area of the
screen. You can place the Explanation UI element in the same way as all other UI Elements. The
explanation texts will be maintained by documentation developers in the Web Dynpro Authoring
Environment.
To display the help texts, the application must be started, using parameter sap-explanation=x. SAP
NetWeaver Portal offers a configuration to switch the help mode on for a Web Dynpro application.
You can also define explanation as a property of the following UI elements:
• Button
• FileUpload
• TableColumn, TableColumnGroup
• RadioButton
• InputField
• DropDownByKey
• DropDownByIndex
• TextEdit
• CheckBox
• TriStateCheckBox
• ItemListBox
Properties
• text. Determines the explanation text. The text should be maintained by documentation developers in
the Web Dynpro Authoring environment.

© 2008 SAP AG 59
UI Element Guide
FileUpload
With FileUpload the user can use a Browse… button to select a file on the hard disk, which will be loaded into
the context during the next round trip, that is, for example, if the user clicks another button. Any further
administration and storage of the file on the server is controlled internally by the Web Dynpro Framework.
You can activate a virus scanner for the FileUpload element. SAP provides the virus scan profile
webdynpro_FileUpload. Refer to Delivered Virus Scan Profiles [Extern]
You can use the FileUpload UI element to upload files from the client to the server. The UI element appears
with an input field, in which the directory path and the file name appear, and a button for searching for the
file.
Properties
• data. This property is deprecated, use resource instead.
• fileName. This property is deprecated, the file name is determined by the resource property.
• resource. Specifies the data source and contains the data, the file name, and the MIME type.
• state. displays the status of the FileUpload. The state property can take the following values and is
represented by enumeration type WDState.
{ normal
{ required. The required state is displayed by an asterisk.
• textDirection. Specifies the text direction and allows you to use FileUpload UI elements for texts in
languages which require a specific text direction. The textDirection property can take the
inherit

• width. Determines the width of the FileUpload UI element that you can specify in CSS sizes, such as
em, ex, pixels or percentage values.
FileDownload
With the FileDownload element, the user can download a file. Depending on the selected
setting of the behaviour property, the user can open the file or store it on the local hard
disk.
The data source, that is the file to be downloaded is determined by the resource
property. To be able to load a file into the context with the FileDownload element, you need the
WDResourceFactory. Insert the following code into the wdDoInit method:
IWDResource resource = WDResourceFactory.createResource(new
byte[<number of bytes>], "<name of the file>",
WDWebResourceType.<type of the file>);
wdContext.currentUiResourceElement().setResource(resource);

© 2008 SAP AG 60
UI Element Guide
currentUiResourceElement depicts the context node under which you have created the value attribute
resource of type Resource.
Using the FileDownload element, the user can load a file from the server to the client to store it there or to
open it in the appropriate program. The look of the FileDownload elements resembles a link, because the
representation is determined by the type property, which provides the option of indicating whether the user
has clicked the element before.
The data source, that is the file to be downloaded is determined by the resource property. The target
property determines the ID of the target window in the browser.
Properties
• activateAccessKey. Indicates whether access key for the FileDownload is activated. More
information: Enabling Access Keys [Extern]
• behaviour. determines the behavior after the user has clicked the FileDownload element.
{ behaviour is of enumeration type WDFileDownloadBehaviour and can take the following
values:
{ allowSave
An Open/Save dialog box appears. The user can directly save the file locally or open it with the
appropriate program.
{ auto
The behavior is predefined and depends on the MIME type of the file to be downloaded. The list
below describes the behavior for the individual file types; false means that the attachment is
opened in the same window, whereas for true a new window is opened.
Constant File MIME Type acc. W3C Attachment
Extension
APPLET "jar" "application/x-java" true
CSS "css" "text/css" false
DOC "doc" "application/vnd.ms-word" false
"application/x-msword"
FLASH "swf" "application/x-shockwave- false
flash"
GIF_IMAGE "gif" "image/gif" false
HTML "html" "text/html" false
JAVA "java" "application/x-java" false
JAVA_SCRIPT "js" "text/js" false
JPG_IMAGE "jpg" "image/jpeg" false
PDF "pdf" "application/pdf" false
PNG "png" "image/x-png" false
PPT "ppt" "application/vnd.ms- false
powerpoint" "application/x-
mspowerpoint"
PS "ps" "application/postscript" false
RTF "rtf" "application/rtf" false
SVG "svg" "image/svg+xml" false

TXT "txt" "text/plain" false
UNKNOWN true
"" ""
VML "vml" "text/vml" false
WD_APPLICATION false
"" ""
XLS "xls" "application/vnd.ms-excel" false
"application/x-msexcel"

© 2008 SAP AG 61
UI Element Guide
XML "xml" "text/xml" false

XML_CONFIGURATION "xml" "text/xml" true
{ openInplace
The file is opened in the appropriate application program within the current window. Which
program is opened, depends on the MIME type of the file.
• data. This property is deprecated, use resource instead.
• design. specifies the design of the FileDownload. The design property can be take the following
values and is represented by enumeration type WDLinkDesign.
{ emphasized. Highlights the text.
{ standard. Displays the text using the standard font size.
• imageHeight. Determines the height of the graphic next to the FileDownload link. You can specify the
height in CSS units like em, ex, pixels, or percentage.
• imageWidth. Determines the width of the graphic next to the FileDownload link. You can specify the
width in CSS units like em, ex, pixel, or percentage.
• resource. Specifies the data source and contains the data, the file name, and the MIME type. The
resource property must be bound to a context attribute of the type IWDResource.
• size. The property size is deprecated and can no longer be used.
• target. Specifies the browser window in which the page is to be opened. You can manually specify the
name of the target window or use the following values:
{ ""
The page is opened in a new window without a name. For every file download a new window
will be opened
{ _self is no longer supported. Use exit plugs instead and specify the URL there.
{ “<window name>”. You can specify a window name as string. For every file download the
same window will be opened.
• text. Describes a label text.
• textDirection. Specifies the text direction and allows you to read the texts of subordinated UI
elements in languages which require a specific text direction. The textDirection property can be
take the following values and is represented by enumeration type WDTextDirection.
inherit

• type. Describes the graphical representation of the FileDownload element. The type property can be
filled with the following values and is represented by the enumeration type WDLinkType.
function The UI element appears in the standard design

and underlined.
navigation The UI element appears underlined and in the
color used for links that the user has already
visited.
reporting The UI element appears in the standard design
and not underlined.
result The UI element appears not underlined.

© 2008 SAP AG 62
UI Element Guide
• wrapping. Indicates whether or not the text of the FileDownload element is wrapped. If the initial value
is false, the text is not wrapped.
Binding resource Property

The resource property of the UI elements FileUpload and FileDownload determines the data of the file to
be transferred. The resource property is of the predefined Dictionary Simple Type Resource from the
package com.sap.ide.webdynpro.uielementdefinitions.
Below you will find a description of how to bound the resource property to the context.
Prerequisites
• You have already created a Web Dynpro DC with a view.
• You have inserted a FileDownload or a FileUpload element into the view.
Procedure
...
1. Create a value attribute called resource in the context of the view.

2. In the Properties window, select the type property and . The Type Selection wizard is started.
3. Select the Simple Type, navigate to Dictionaries → Local Dictionary →
com.sap.ide.webdynpro.uielementdefinitions and select Resource. Confirm with Okay.

© 2008 SAP AG 63
UI Element Guide
4. In the View Designer, switch to the Layout tab, select the desired FileDownload or FileUpload
element and select the resource property in the Properties window.
5. Select the button to the right, select the resource value attribute in the context viewer and
confirm with Okay.
6. Save your metadata.
Result
You have created a context attribute of the Dictionary Simple Type Resource and have bound the
resource property of the FileDownload or FileUpload element to this attribute. The data source is now
bound to the data source of the file to be transferred and can be used.
Loading the InputStream at FileDownload on Demand

With the FileDownload element, the content of the file is loaded into the context when the page is built, which
happens in the wdDoInit method. If the FileDownload element is used, for example, in a table, this can lead
to performance problems.
For this reason, it is possible to delay loading the file content into the context until the download is triggered,
that is, when the user actually clicks the FileDownload element. The example below describes the procedure
you can use to load data into the context only in the moment you really need it.
Prerequisites
• You have created a Web Dynpro DC with component and view and you have included a FileDownload
element into the view.
• In the context of the view, you have created a value node named resourceNode.
• In this value node, you have created a value attribute of type
com.sap.ide.webdynpro.uielementdefinitions.Resource,
Procedure
...
1. In the context of your view, under the value node resourceNode, create a value attribute, name it
onDemandStream and confirm with Finish.
2. Switch to the Property window, and for the type property click …. The Type Selection wizard is started.
3. Select Java Simple Type, click Browse… and in the next window in the field Choose a Type enter
com.sap.tc.webdynpro.progmodel.api.IWDInputStream. Confirm twice with
Okay.
4. Set the readonly property to true.
5. Set the calculated property to true. A calculatedAttributeGetter method with the name
getOnDemandStream is created.
6. To generate the InputStream, include this method into the following code:
IWDInputStream stream = null;
try {
String path = WDURLGenerator.getResourcePath(
wdComponentAPI.getDeployableObjectPart().getWebModule(),"<name
of download file>");
stream = WDResourceFactory.createInputStream(new
FileInputStream(path));
} catch (Exception ioExp) {
}
return stream;
7. The two attributes resource and onDemandStream must be linked.

© 2008 SAP AG 64
UI Element Guide
Switch to method wdDoInit and enter the following code:

IPrivateLoadOnDemandView.IResourceNodeElement elem =
wdContext.currentResourceNodeElement();
//getting the attributepointer of the calculated
attribute
IWDAttributePointer attributePointer =
elem.getAttributePointer("onDemandStream");
IWDResource resource =
WDResourceFactory.createResource(
attributePointer,
"<name of the file>",
WDWebResourceType.<type of the file>);
// setting value to the bound attribute
elem.setResource(resource);
8. Save your data.
Adobe Flash Islands for Web Dynpro Java

To integrate flash files into your Web Dynpro application, the Adobe Flash Island UI element can be used.
Flash Island is based on Adobe Flex (http://www.adobe.com/flex). Flex provides a general development
environment that can be used to create Rich Internet Applications (RIA).
In Web Dynpro a FlashIsland is set as RootElement and spans an entire view.
To specify the flash component’s data source, properties and events and to bind them to the relevant Web
Dynpro objects, you can insert one or more of the following View elements into the FlashIsland:
• DataSource (GACDataSource)
{ Property (GACProperty) into the DataSource.
• Event (GACEvent).
EventParameter (GACEventParameter) into the Event.
It’s also possible to insert a Property directly into the FlashIsland, if you want to bind to a context attribute
directly under the ContextRoot. You can also refer to hierarchical data structures by inserting DataSources
into a DataSource.
Notes
• Accessibility. Note that accessibility is not ensured when using a FlashIsland. An alternative
rendering to the FlashIsland should be made available for accessibility purposes
• Translation. Texts in the FlashIsland can only be translated if they are passed from the Web Dynpro
context.
• Style sheets cannot be adapted.
• Personalization. The personalization of FlashIsland UI elements is not supported.
Prerequisites
To implement Flash Island applications for Web Dynpro Java, you require the following:
• Adobe Flex Builder 2 or 3
• Adobe Flash Player 9 Update 3
• Flash Island Flex library
• A Web Dynpro component with a FlashIsland UI element
To enable the use of a Flash/Flexcomponent in Web Dynpro, the component must exist in the form of a
FlashIsland. This wrapping enables the communication between the Flash/Flex component and the Web
Dynpro Framework. The Flash Island itself is an SWF file.

© 2008 SAP AG 65
UI Element Guide
Procedure
...
1. To specify the screen area, where the FlashIsland is to be displayed, insert a ViewContainerUIElement
into a view.
2. Insert a view, e.g. called FlashView into this ViewContainerUIElement.
3. Open the FlashView, select the RootElement in the Outline view and choose FlashIsland from the
context menu entry Replace With.
4. Select the RootElement and enter the name of your component to the property swfFile, for
example: myFlash.swf. This file has to be stored in the mime repository. The relevant path is: <Web
Dynpro DC name> → Resources → src → mimes → Components → component name>.
5. To insert the needed additional elements to the RootElement, select it, open the context menu and
choose DataSource.
6. To insert a Property, select the DataSource and choose Insert Property from the context menu. Your
Outline view could look similar to the screenshot below:
7. Select the DataSource in the Outline view and set the properties:
name: Specify the name of the flash component’s data source.
dataSource: Bind the dataSource to the context node providing the data.
For example:
The property’s name of the flash component is dsProperty1,
the DataSource is bound to a node called tab1
and the relevant context attribute is called amount.
In this case the properties view of your Property UI Element would look like this:
8. Select the RootElement and choose Insert Event from the context menu. Specify the name according
to the Flash/Flex component’s event name. Specify an action for the onAction event as described in
Creating Actions [Extern]

© 2008 SAP AG 66
UI Element Guide
FlashIsland
Properties
• enabled. Determines whether the UI element is enabled. An enabled UI element can respond to user
input and generate events.
• height. Determines the height of the FlashIsland, which you can specify in relative CSS units like em
or ex.
• swfFile. Determines a server local path to the SWF file that contains the FlashIsland. If you store the
respective file in the mime repository, you can specify the file name directly without specifying a path.
The SWF file of a FlashIsland cannot be changed while it is visible. For debugging the debugging
version of the FlashIsland with the extension -debug.swf instead of .swf should be placed in the
same directory.
• tooltip. The text that is displayed when the mouse cursor is moved onto the UI element.
• visible. Determines whether the UI element is visible. width. Specifies the width of the FlashIsland in
relative CSS units like em, ex, or percentage.
GACDataSource
This is a source of multiple data instances that can be exposed to an active component. The dataSource
property defines the context node whose elements will be provided to the active component. The attributes of
this context node or sub nodes have to be made available as properties by the GACProperty aggregation.
Properties
• dataSource. You use this property to specify the data source. To do this, you need to specify the path
to the context node that provides the data.
• name. Specifies the data source name of the flash component.
GACProperty
GACProperty is used to specify the name and the value of a flash component’s property.
GACEvent
GACEvent is used to specify the name of a flash component’s event.
Event
• onAction (IWDGACEventParameterCollection parameters)
GACEventParameter
• name. Specifies the name of the Flash component’s event parameter
• type. Specifies the type of the Flash component’s event parameter. Type is of type WDGACDataType
{ binary, boolean, date, double, float, int, string, time or undefined
Displaying and Editing Formatted Text

FormattedText is defined as a subset of XHTML that is enhanced with SAP specific tags.
There are two UI elements that you can use to display and/or edit formatted text:
• FormattedTextView
• FormattedTextEdit
With FormattedTextEdit, you can use the same formatting options as for FormattedTextView, but the user
only can use a subset of it.

© 2008 SAP AG 67
UI Element Guide
The following UML class diagram illustrates the relationships between the classes with regard to
FormattedText.
Supported XHTML Tags for FormattedText

You can use the following XHTML modules (Namespace http://www.w3.org/1999/xhtml): The XHTML tags
will have the default namespace, meaning that they do not need to be prefixed.
Text Module
Element Minimal Content Model Description
abbr (PCDATA | Inline)* Abbreviation
acronym (PCDATA | Inline)* Acronym
address (PCDATA | Inline)* Address
(PCDATA | Heading | Block |
blockquote Quotation block
List)*
br EMPTY Line break
cite (PCDATA | Inline)* Citation
code (PCDATA | Inline)* Inline Code
dfn (PCDATA | Inline)* Definition
div (PCDATA | Flow)* Div
em (PCDATA | Inline)* Emphasized
h1 (PCDATA | Inline)* Header 1
kbd (PCDATA | Inline)* Keyboard shortcut
p (PCDATA | Inline)* Paragraph
pre (PCDATA | Inline)* Preformatted content
q (PCDATA | Inline)* Quotation
samp (PCDATA | Inline)* Sample
span (PCDATA | Inline)* Span
strong (PCDATA | Inline)* Strong
var (PCDATA | Inline)* Variable
List Module
Elements Minimal Content Model Description
dl (dt | dd)+ Definition list
dt (PCDATA | Inline)* Definition topic
dd (PCDATA | Flow)* Definition item
ol li+ Ordered (numbered) list
ul li+ Unordered (bullet) list

© 2008 SAP AG 68
UI Element Guide
li (PCDATA | Flow)* List item
Hypertext Module
a (PCDATA | Inline - a)* Hypertext link
Supported attributes for a href and title

The href will not be directly rendered into the resulting HTML output. Instead, it will trigger the action on the
FormattedTextView, with the content of the href as a parameter. This allows the application to decide
whether it really wants to navigate to another page and (thus exiting the application) or to react differently, as
specified in the action handler.
Image Module
Elements Minimal Content Model Description
img EMPTY Image
Supported attributes for img: src and title
SAP tags
These tags (namespace “sap”) are added by SAP:
(PCDATA | Heading | Block |
formattedText Root element
List | Inline)*
field EMPTY Field reference
Supported attributes for the name field

The field tag, for example, would look like this: <field name="field name"/>
FormattedTextEdit
A FormattedTextEdit UI Element represents an edit box for formatted text. User input is automatically
transformed into the corresponding tags. The user has the following subset of formatting options:
icon display equivalent in XHTML description
<strong> bold
<em> Italic
<h1> header 1
<h2> header 2
<h3> header 3
<blockquote> increase indent
</blockquote> decrease indent
<ol> numbered list

© 2008 SAP AG 69
UI Element Guide
<ul> bulleted list
Properties
• height. Determines the height of the FormattedTextEdit, that you can specify in relative CSS units like
em or ex.
• imeMode. An Input Method Editor (IME) allows users to enter and edit Chinese, Japanese, and
Korean characters. The IME is an essential component for writing Chinese, Japanese, and Korean
texts. These writing systems have more characters than can be encoded for a regular keyboard. The
IMEs for these languages use sequences of base characters that describe an individual character or
group of characters to enter a larger set of characters. Base characters can be component letters from
Hangul syllables, phonetic components for Japanese Kanji characters, or various combinations for
Chinese characters.
To compose text with an IME, the user generally uses dictionary lookup and contextual analysis,
especially in languages where homonyms are frequent, like Japanese. A user typically starts by
entering a few component characters, optionally selecting from various choices, and a confirmation
command.
Property imeMode can take the following values and is represented by enumeration type
WDIMEMode:
{ auto (default)
{ active
{ inactive
{ disabled
• readOnly. Specifies whether the FormattedTextEdit can be edited or read only. If the value is true,
the displayed text can be read but is write-protected.
• textDirection. Specifies the text direction and allows you to use input fields for texts in languages that
require a specific text direction. The textDirection property can take the following values and is
represented by enumeration type WDTextDirection.
inherit
direction is therefore identical to that of the parent element.
The default is inherit.

• value. Specifies the formatted text displayed in the FormattedTextEdit. This property must be bound to
a context attribute of type FormattedText.
• width. Determines the width of the FormattedTextEdit and can be specified in CSS sizes, such as em,
Events
• onChange. This event is triggered when the FormattedTextEdit loses focus and the value has been
changed.
FormattedTextView
FormattedTextView displays text that can contain formatting commands that are defined in XML syntax.
To define the content of the FormattedTextView, select the text property of your FormattedTextView
element and:
• choose or
• bind the text property to the context by choosing .

© 2008 SAP AG 70
UI Element Guide
Properties
• hAlign. Specifies the horizontal alignment of the content within the FormattedTextView element. The
value native for the layout property is ignored. Property hAlign can take the following values and is
represented by the list type WDInputFieldAlignment:
auto Automatic alignment of the text content. The alignment is specified by the
usage of the UI element - for example, by the data type of the value to be
represented.
beginOfLine The text content is always displayed at the beginning of the line. The text
content for value ltr of property textDirection is therefore left-justified.
The text content for value rtl is right-justified.
endOfLine The text content is always displayed at the end of the line. The text content for
value ltr of property textDirection is therefore right-justified. The text
content for value rtl is left-justified.
forcedLeft The text content is always left-justified, regardless of whether the value is ltr
The default value for this property is auto.
• text. Determines the text displayed.
• textDirection. Specifies the text direction and allows you to use dropdown list boxes for texts in
languages that require a specific text direction. The textDirection property can take the following
values and is represented by enumeration type WDTextDirection.
inherit
direction is therefore identical that of the parent element.
The default value is inherit.
Events
• onAction(String href). Event onAction is triggered when the user clicks on a link (<a> tag) inside
the FormattedTextView. The parameter contains the href attribute of the triggered link.
SimpleFormattedTextField
A SimpleFormattedTextField can be inserted in a FormattedTextView. With this View Element you can bind
parts of the content of a FormattedTextView to a context attribute of type String.
Properties
• name. specifies the name of the SimpleFormattedTextField.
• text. specifies the text of the SimpleFormattedTextField.

© 2008 SAP AG 71
UI Element Guide
Implementing a SimpleFormattedTextField
SimpleFormattedTextFields can be inserted into a FormattedTextView in order to be able to bind parts of the
text of a FormattedTextView to a context attribute.
Procedure
...
1. To insert a SimpleFormattedTextField into the FormattedTextView, select the FormattedTextView in

the Outline, click the secondary mouse button and choose Insert Field.
The following screenshot illustrates the Outline, containing a FormattedTextView with two
SimpleFormattedTextFields inserted:
2. Switch to the Properties view, select the name property of the SimpleFormattedTextField and enter
Field. Confirm with ENTER.
3. To specify the position where the Field should be displayed in your FormattedTextView, insert the
following tag: <field name="Field"/>.
{ If you have bound the FormattedTextView to the context, you have to create a string containing
this tag and create a FormattedText for it. The string could look something like this:
String value = "<p><h1>this is a header in format h1</h1></p>" +
"<p><field name=\"Field\"/></p>" +
"<h2>Just another header in format
h2</h2>";
{ Otherwise, select the text property of the FormattedTextView and choose . An editor
opens. Here, you can insert this tag at the position where you want it to be displayed. In this
example, it could look something like this:

© 2008 SAP AG 72
UI Element Guide
Result
The screenshot below shows how this FormattedTextView appears at runtime.
Creating Formatted Text

To display text in a FormattedTextView or a FormattedTextEdit, you have to provide the content that you
want to display as type FormattedText. For the FormattedTextView, you can set the content to be displayed
by choosing . For a string to be converted into FormattedText, it must contain a well-formed and valid
XML document.
To create this type, use the WDFormattedTextFactory.
The WDFormattedTextFactory provides two methods to create a FormattedText from a string:
• IWDFormattedText valueOf(String text)
Use this method to create FormattedText from a markup language-formatted string.
• IWDFormattedText fromPlainText(String text)
Use this method to create FormattedText from plain text. The following escape sequences will be
ignored.
\b backspace
\n newline
\f formfeed
\r carriage return
\t horizontal tabulator
Procedure
...
1. In your Web Dynpro DC, navigate to the corresponding view and insert a FormattedTextView or a
FormattedTextEdit.
2. Select the Context tab and create an attribute called text of type FormattedText.
3. Bind the relevant property to this context attribute:
{ For FormattedTextView, bind property text
{ For FormattedTextEdit, bind property value
4. Insert the following source code into the wdDoInit method of your view controller:
wdDoInit()
String htmlText = "<strong>hello I'm bold!</strong>";
IWDFormattedText formattedText = WDFormattedTextFactory.valueOf(htmlText);
wdContext.currentContextElement().setText(formattedText);
Result
The following screenshot illustrates the result:

© 2008 SAP AG 73
UI Element Guide
Gantt
A Gantt diagram or bar chart graphically represents a chronological sequence of activities in the form of bars
on a time axis. The individual activities are represented in rows using horizontal bars. The Gantt element
allows you to use a JGantt applet. The Gantt data and display are defined by an xml file that needs to be
provided in the context and then bound to the context using data binding in the dataSource property.
Properties
• dataSource. Determines the data source of the Gantt. You can use it to specify the path to the context
node providing the data.
• height. Determines the height of the Gantt element, which you can specify in relative CSS units like
em or ex.
• width. Determines the width of the Gantt element, which you can specify in relative CSS units like em,
ex, or percentages.
Events
• onCellEdited (String chart, String component, String graph, String parameters). The user has clicked
a cell. The table cell must be defined as a hyperlink.
• onCellsSelected (String chart, String component, String graph, String parameters)
• onColumnAdded (String chart, String component, String graph, String parameters)
• onColumnMoved (String chart, String component, String graph, String parameters)
Triggered after the user has moved or resized a column.
• onColumnRemoved (String chart, String component, String graph, String parameters)
• onCustomCommand (String chart, String component, String graph, String parameters)
Application-specific command called either by the user or by an external controller.
• onEdgeAdded(String chart, String component, String graph, String parameters)
Link added to a node, though not connected to another node.
• onEdgePropsChanged(String chart, String edge, String graph, String parameters)
• onEdgeRemoved(String chart, String component, String graph, String parameters)
• onEdgeSelected(String chart, String edge, String graph, String parameters)
• onFrameSwitched(String chart, String component, String graph, String parameters)
The frame has changed:
• onGeneric(String chart, String component, String graph, String name, String parameters)
Allows the inclusion of user-defined events.
• onGraphAdded(String chart, String graph, String parameters, String subGraph)
• onGraphRemoved(String chart, String graph, String parameters, String subGraph)
• onInitialized(String chart, String graph, String parameters)
• onLayoutChanged(String chart, String graph, String node, String parameters)
• onLinkAdded(String chart, String graph, String link, String parameters)
• onLinkChanged(String chart, String component, String graph, String parameters)
• onLinkRemoved(String chart, String graph, String link, String parameters)
• onModelAdded(String chart, String graph, String parameters)
• onModelDirty(String chart, String graph, String parameters)
• onModelExtracted(String chart, String graph, String newGraph, String parameters)
• onModelSaved(String chart, String graph, String parameters, String reply)
• onNodeAdded(String chart, String graph, String node, String parameters)
• onNodeDoubleClicked(String chart, String graph, String node, String parameters, String
subComponents)

© 2008 SAP AG 74
UI Element Guide
• onNodePropsChanged(String chart, String graph, String node, String parameters)

A node property has changed. This does not apply for the node position. If the node position is
changed, event onLayoutChanged is triggered.
• onNodeRemoved(String chart, String graph, String node, String parameters)
• onNodeSelected(String chart, String graph, String node, String parameters, String subComponents)
• onRectangleSelected(String chart, String component, String graph, String parameters)
• onRowAdded(String chart, String component, String graph, String parameters)
• onRowCollapsed(String chart, String component, String graph, String parameters)
• onRowExpanded(String chart, String component, String graph, String parameters)
• onRowMoved(String chart, String component, String graph, String parameters)
• onRowRemoved(String chart, String component, String graph, String parameters)
• onRowSelected(String chart, String component, String graph, String parameters)
• onSelectionChanged(String chart, String component, String graph, String parameters)
• onTraceLevelChanged(String chart, String graph, String level, String parameters)
HorizontalGutter
The Web Dynpro class HorizontalGutter implements the IWDHorizontalGutter interface.
Definition
The HorizontalGutter UI element helps you structure the layout and the text parts of Web Dynpro screen,
similar to the HTML tag <hr>. You use it to insert additional, vertical spaces between UI elements and to
group together elements and texts that belong together.
You can display the HorizontalGutter UI element either with or without a visible line.
Properties
• imageAlt. This property is deprecated and can no longer be used.
• hasRule. This property is deprecated. Use ruleType instead.
• height. Specifies the height of the HorizontalGutter UI element.
The height property can take the following values and is represented by enumeration type
WDHorizontalDividerRuleHeight.
medium 17 pixels high

large 31 pixels high
small 7 pixels high
ruleHeight The height of HorizontalGutter
corresponds to the height of the
separator
• ruleType. The ruleType property is represented by enumeration type
WDHorizontalGutterRuleType and can take the following values:
areaRule Separator is displayed

none No separator is displayed
pageRule Is used to separate window areas
• width. Specifies the width which can be specified in CSS units like em, ex, pixels, or percentage.

© 2008 SAP AG 75
UI Element Guide
Image
The UI element Image enables you to integrate graphics into the Web application in a format that is
processed by the Web Server – for example, GIF, JPG, and PNG format. To specify the data source, use the
source property. You can assign a popup menu to the image which is visible as a little triangle at the bottom
right-hand edge when the user places the cursor on the image. When using an Image UI element, you
should always add a label to ensure accessibility.
• adjustImageSize. Specifies whether the size of the image is adjusted proportionally. If this property is
set to false, the image will be displayed according to the specified height and width, without keeping
the proportions.
• alt. This property is deprecated. Use tooltip instead.
• border. Specifies whether the graphic is displayed with a border.
• height. Specifies the height of the graphic. You can specify the height in CSS units like em, ex or
pixels.
• isDecorative. Specifies whether an image serves for decorative purposes only. If it does not provide
the user with any kind of information, set this property to true. When accessibility mode is active, this
image will be ignored and removed from the tab sequence.
• isDragHandle. Determines if this image can be used as a drag handle for runtime authoring. The
handle. source. defines the path to the image source.
• width. Specifies the width of the graphic. You can specify the width in CSS units like em, ex, pixel, or
percentage.
InputField
The InputField UI element allows the user to edit or display a single-line text. You cannot only edit the value
of the type String but also the value of any simple data type using an input field. The conversion of the string
representation into the data type – known as parsing – and the conversion of the data type into the string
presentation – known as formatting – are automatically executed.
When using an InputField, you must always add a label to ensure accessibility.
Properties
• activateAccessKey. Indicates whether access key for this control should be activated.
• alignment. Specifies the horizontal alignment of the UI element in the grid. The default value of this
property is auto. The alignment property can take the following values and is represented by the
enumeration type WDInputFieldAlignment:
auto The alignment is specified by the usage of the UI element - for example, by the displayed
data type.
beginOfLine The text content is always displayed at the beginning of line. Therefore, the text content for
the value ltr of the textDirection property is left-justified. The text content for the
value rtl is right-justified.
endOfLine The text content is always displayed at the end of the line. Therefore, the text content for the
value ltr of the textDirection property is right-justified. The text content for the value
rtl is left-justified.
forcedLeft The text content is always left-justified, regardless of whether the value is ltr or rtl for the
textDirection property.
forcedRight The text content is always right-justified, regardless of whether the value is ltr or rtl for

© 2008 SAP AG 76
UI Element Guide
the textDirection property.

• defaultDateRefId. You can use this property to refer to another date field for example in start/end date
scenario. The date of the referred date field is used to initialize the date picker if the date field has no
own value.
• displayAsText. Specifies, whether the InputField looks like a text if it has not the focus.
• displayLabelAsDefault. This property is deprecated, use inputPrompt instead.
• imeMode. An Input Method Editor (IME) allows users to enter and edit Chinese, Japanese, and
Korean characters. The IME is an essential component for writing Chinese, Japanese, and Korean
scripts. These writing systems have more characters than can be encoded for a regular keyboard. The
IMEs for these languages use sequences of base characters that describe an individual character or
group of characters to enter a larger set of characters. Base characters can be component letters from
Hangul syllables, phonetic components for Japanese Kanji characters, or various combinations for
Chinese characters.
To compose text with an IME, the user generally uses dictionary lookup and contextual analysis,
especially in languages where homonyms are frequent, as in Japanese. A user typically starts by
entering a few component characters, optionally selecting from various choices, and a confirmation
command.
The imeMode property can be filled with the following values and is represented by the enumeration
type WDIMEMode:
{ auto (default)
{ active
{ inactive
{ disabled
• inputPrompt. Specifies the text that is displayed if the InputField has no initial value. The following
screenshot shows an example:

• length. Specifies the maximum number of characters to be displayed in the input field.
• passwordField. Boolean value that controls the display of entered characters on the screen. If the
value is true, the entered characters on screen are echoed with an asterisk (*). This attribute is
usually used for password input fields.
• readOnly. Specifies whether the input field can be edited or read only. If the value is true, the
displayed text can only be read.
• state. Describes the state of the UI element. The data type of this property corresponds to the
normal
Describes the default state of the UI element.
required
Specifies whether the entered value is required, Ui
element is displayed with an asterisk.
• suggestValues. Specifies whether suggest values are displayed while the user enters data.
Prerequisite is that the InputField is bound to a data type for which value help is provided.
• textDirection. Specifies the text direction and allows you to use input fields for texts in languages
which require a specific text direction. The textDirection property can be filled with the following
values and is represented by the enumeration type WDTextDirection.
inherit

© 2008 SAP AG 77
UI Element Guide


• value. Specifies the character string displayed in the input field area. This property must be bound to a
context attribute.
• width. Specifies the width of the input field that you can specify in CSS sizes, such as em, ex, pixels
or percentage values.
Events
• onEnter. This event is triggered when the user chooses ENTER.
• onChange. This event is triggered when the InputField loses focus and the value has been changed.
Implementing a Combo Box

An InputField UI element is displayed as a combo box if the relevant context attribute has a
proposal list. A combo box is a combination of a drop down list and an input field. This allows
users to type a value directly into the control and to pick from a list of existing options.
In Web Dynpro, you get a combo box by assigning a proposal list (interface
com.sap.typeservices.IProposalList) to the context attribute that the value
property of an InputField is bound to.
Procedure
...
1. In the context for your view MyView, create a node called MyNode.
2. Set the following properties for MyNode:
{ Selection Cardinality to 1..1
3. Select MyNode and create an attribute city.
4. Insert an InputField and bind the value property of the InputField to context attribute city.
5. Add the following code to method wdDoInit():
IProposalList proposalsCity =
wdContext.nodeMyNode().getNodeInfo().getAttribute(IPrivateMyView.IMyNodeElement.CITY).
proposalsCity.add("New York");
proposalsCity.add("Rio");
proposalsCity.add("Paris");
proposalsCity.add("Bangalore");
proposalsCity.add("Palo Alto");
You can easily reset the proposal list using this code:
proposalsCity.reset();
More Information
JavaDocs on: ISimpleValueServices

© 2008 SAP AG 78
UI Element Guide
Enabling AutoComplete for InputFields

The AutoComplete function allows the user to see proposals during input of data into an input field. The
proposals result from the history of the data the user has inserted.
The user will get the same proposals for each InputField that is bound to a context attribute with the same
Semantic ID. The Semantic ID is built up of a namespace and an ID The two parts are separated by a colon.
Its optional to enter a namespace, but to clearly define a proposal list for an attribute you should do so.
Structure of a Semantic ID
Namespace A to Z
a to z
digits from 0 to 9
hyphen -
ID A to Z
a to z
digits from 0 to 9
hyphen -
period .
Examples for a Semantic ID

• CRM:Customername
• Name-Space42:com.asap3.first-name
Prerequisites
The AutoComplete function of the browser the WD application runs in, has to be enabled.
• Microsoft Internet Explorer: Tools -> Internet Options -> Content -> check Forms
• Mozilla Firefox: Tools –> Options ->Privacy -> check Remember what I enter in forms and the search
bar.
Procedure
...
1. Set the history property of the relevant InputField to true.
If you don’t see this property, you have to select Show Advanced Properties in the upper
right corner of the Properties window.
2. Bind the value property of the InputField to a context attribute.
3. Enter the ID for this context attribute to the Semantic ID property.
ItemListBox
An ItemListbox provides different values for selection, similar to the DropDownBox. You
can vary the number of displayed values and, in contrast to a DropDownBox, multiple
selection is possible.

© 2008 SAP AG 79
UI Element Guide
Properties
• dataSource. This property is used to specify the data source. You can use it to specify the path to the
• descriptiveText. This property defines a descriptive text that is displayed within the ItemListBox
beside the text.
• iconSource. defines the path to the image source.
• More Information: Specifying the Image Source [Seite 9]
• textDirection. This property specifies the text direction and allows you to use dropdown list boxes for
texts in languages that require a specific text direction. The textDirection property can be filled
with the following values and is represented by the listing type WDTextDirection.
inherit

• multipleSelection. This property enables the selection of several elements.
• readOnly. This property controls whether the user can choose an element from the ItemListBox UI
element.
• selectionChangeBehaviour. The change of the lead selection can cause a data loss – for example, if
the changed or new data was not written to the context due to syntax errors. You can avoid the data
loss using the selectionChangeBehaviour property before changing the lead selection:
auto If the data was written to the context, the value auto specifies that the
ItemListBox automatically changes the lead selection of its data source directly
after an interaction by the user before the corresponding event is triggered.
manual Specifies that the ItemListBox does not change the lead selection of its data
source after an interaction by the user but triggers the corresponding event. In
this case, the event handler must change the lead selection to enable the
ItemListBox to display the data in a main detail view, for example. This setting
allows you to check the change of the lead selection.
• text. This property specifies the text to be assigned to the ItemListBox .
• textDirection. You can use this property to define the text direction. It thus enables the labels for all
item list boxes to be read in other languages that require a specific text direction. The
WDTextDirection.
inherit

• visibleItems. This property defines the size of the item list box on the basis of the number of visible
elements.
• width. This property specifies the width of the item list box and can be specified in CSS units like em,
ex, pixels, or percentage.

© 2008 SAP AG 80
UI Element Guide
Events
• onLeadSelect (int index). This event is triggered when the user selects an element of the
ItemListBox.
• onDrop (String data, int index, String mimeType, int offset, String tags)
This event is triggered when the user drops an object onto this ItemListBox. The parameters are:
o data: The data specified for the drag source.
o index: The index of the element the user has dropped the object onto.
o mimeType: the mime type specified for the drag source.
o offset: the position relative to the index, the user has dropped the object onto.
-1: just above the item specified by the index
0: right onto the item specified by the index
+1: just below the item specified by the index.
o tags: the tags defined for the drag source
Label
The Label UI element is used for labeling other UI elements. Therefore, it is always associated with another
UI elements. This UI element ensures accessibility of the Web Dynpro application. The appearance is
defined by the design property.
You can also define other UI elements as label. These include the following UI elements:
• DropDownByIndex
• DropDownByKey
• ToolBarDropDownByIndex
• ToolBarDropDownByKey
Properties
• design. Specifies the design of the UI element. The design property can be filled with the following
values and is represented by the enumeration type WDLabelDesign.
emphasized The UI element is highlighted.

light The UI element is displayed without the left
design bar.
standard A default design of the UI element.
• labelFor. Specifies the ID of the UI element to be labeled.

• text. Label text.
• textDirection. Specifies the text direction and allows you to use Label UI elements for texts in
inherit

• width. Specifies the width of the Label UI element and can be specified in CSS units like em, ex,
pixels, or percentage.
• wrapping. Indicates whether or not the text is wrapped. If the value is false, the text is not wrapped.

© 2008 SAP AG 81
UI Element Guide
Legend
The Legend UI element allows you to display a descriptive text for different colors used in an assigned UI
element. The Legend element can be positioned anywhere in the view and be assigned to a table or a
DateNavigator.
The screen shot below shows a DateNavigator element with assigned legend.
Assigning the Legend element

• to the DateNavigator element:
In the view, after the DateNavigator element insert a Legend element and assign it to the
DateNavigator element by setting the ID of the Legend element as the legendID property of the
DateNavigator element.
• to the table:
You can insert a Legend element after the table and use the legendId property to assign it to the
table. To position the Legend element at the bottom of the table, you can use the LegendPopin. Insert
a LegendPopin into the table and a content into the LegendPopin. Then insert a Legend element into
the content.
The color assignment of the LegendItem is carried out using the enumeration type WDTableCellDesign. The
following properties are of this type:
• For the LegendItem, the property semantics
• For the DateNavigatorMarking, the property daySemantics
• For the table, the property cellDesign of the TableColumn.
Properties
• colCount. Determines the number of columns in which LegendItems are displayed.
• width. Determines the width of the Legend, which you can specify in relative CSS units like em, ex, or
percentage.
LegendItem
A LegendItem is an element of a Legend and consists of a color field and a text.
• semantics. Specifies the color of the LegendItem. The semantics property is represented by
• striped. Specifies whether the icon will be rendered striped. A specified value of imageSource
property will be ignored.
• text. Determines the text of the LegendItem.
• textDirection. Specifies the text direction and allows you to use a LegendItem for texts in languages

© 2008 SAP AG 82
UI Element Guide
• tooltip. This property describes a note for the LegendItem that is displayed when the user places the
cursor on the LegendItem.
• visible. Determines whether the LegendItem is visible.
MultipleLegendItem
A MultipleLegendItem offers the option of providing several LegendItems by binding them to a context node.
• dataSource. Determines the context node that stores the MultipleLegendItem.
• semantics. Specifies the color of the MultipleLegendItem. The cellDesign property is represented
by enumeration type WDTableCellDesign.
• striped. Specifies whether the icon will be rendered striped. A specified value of imageSource
property will be ignored.
• text. Determines the text of the MultipleLegendItem.
• textDirection. Specifies the text direction and allows you to use a MultipleLegendItem for texts in
• tooltip. Specifies the note for the UI element that is displayed when the user places the cursor on the
UI element.
• visible. Determines whether the MultipleLegendItem is visible.
FrameworkLegendItem
A FrameworkLegendItem is an element of a Legend and consists of a color field and a text. A
FrameworkLegendItem references semantics that are provided from the Web Dynpro Framework, for
example the semantics of the current day in a calendar.
• frameworkSemantics. This property can take the following values and is represented by enumeration
type WDLegendItemSemantics.
{ subtotal
{ today
{ total
• text. Determines the text of the FrameworkLegendItem.
• textDirection. Specifies the text direction and allows you to use a FrameworkLegendItem for texts in

© 2008 SAP AG 83
UI Element Guide
inherit The text direction is inherited from the parent element. The text
direction is therefore identical to the one of the parent element.
• tooltip. This property describes a note for the FrameworkLegendItem that is displayed when the user
places the cursor on the FrameworkLegendItem.
• visible. Determines whether the FrameworkLegendItem is visible.
LinkToAction
The LinkToAction UI element is a hypertext link. The navigation to this link triggers a Web Dynpro action.
You can assign a popup menu to LinkToAction which the user can recognize by this symbol: .
Properties
• design specifies the design of the LinkToAction. The design property can take the following values
and is represented by enumeration type WDLinkDesign.
1. emphasized. Highlights the text.
2. standard. Displays the text using the standard font size.
• hotkey. specifies the key combination that triggers the onAction event.
• imageHeight. Specifies the height of the graphic next to the link. You can specify the height in CSS
units like em, ex, pixels, or percentage.
• imageSource. defines the path to the icon source of the graphic to be displayed for a leave.
• imageWidth. Specifies the width of the graphic next to the link. You can specify the width in CSS units
like em, ex, pixel, or percentage.
• size. This property is deprecated.
• text. Determines the text
• textDirection. Specifies the text direction and allows you to use a LinkToAction element for texts in
inherit The text direction is inherited from the parent element. Therefore, the text direction is
identical to the one of the parent element.
• type. Specifies the graphical design of the UI element. The type property can take the following
values and is represented by enumeration type WDLinkType.
function Link is displayed underlined in the standard design.
navigation Link is displayed underlined and with a font color that is used
for links already visited.

© 2008 SAP AG 84
UI Element Guide
reporting Link is displayed not underlined in the standard design.
result Link is displayed not underlined.
• wrapping. Indicates whether or not the link text is wrapped. If the initial value is false, the link text is
not wrapped.
Events
• onAction. This event is triggered when the user navigates to the link.
LinkToURL
The LinkToURL UI element is a kind of hypertext link. Navigating to this link leads to a user-defined Web
resource (URL).
You can assign a popup menu to LinkToURL which the user can recognize by this symbol: .
Properties
• design. specifies the design of the LinkToAction. The design property can take the following values
and is represented by enumeration type WDLinkDesign.
o emphasized. Highlights the text.
o standard. Displays the text using the standard font size.
• hotkey. Specifies the key combination that triggers the onAction event.
• imageWidth. Specifies the width of the graphic next to the LinkToURL. You can specify the width in
CSS units like em, ex, pixel, or percentage.
• reference. Describes the address of the Web page to be opened.
• target. Specifies the browser window in which the page is to be opened. You can manually specify
the name of the target window or use the following values:
{ "" The page is opened in a new window without a name. This is the default value.
• text. Describes the label text.
• textDirection. Specifies the text direction and allows you to use a LinkToURL element for texts in
languages that require a specific text direction. The textDirection property can be filled with the
• inherit • The text direction is inherited from the parent element. Therefore,
the text direction is identical to the one of the parent element.
• ltr • The text runs from left to right.
• rtl • The text runs from right to left.

• type. Specifies the graphical design of the UI element. The type property can be filled with the
following values and is represented by the enumeration type WDLinkType.

© 2008 SAP AG 85
UI Element Guide
• function • Link is displayed underlined in the

• standard design.
• navigation • Link is displayed underlined and with a
•
font color that is used for links already
visited.
• reporting • • Link is displayed not underlined in the
standard design.
• result • Link is displayed not underlined.
•
not wrapped.
LinkChoice
The LinkChoice UI element is a link together with a menu of actions. Clicking on the link displays a pop-up
menu containing the list of actions. To define an action, insert a Choice into the LinkChoice, which is of type
MenuActionItem.
Properties
• text. Specifies the text.
MeltingGroup
MeltingGroup acts like a container and layout at the same time. It can only contain certain items (mainly
single-line UI elements like input fields) and arranges them horizontally, without wrapping. The (relative or
absolute) width of the individual items, as well as their separation, can be adjusted by means of melting
group data.
MeltingGroup allows you to put several elements (MeltingGroupItem) into one cell of the ColumnLayout or
into one table cell. Typically, they can be used to place a combination of input field and text view into a single
cell.
MeltingGroups are created to combine elements with a height of one line only (InputFields, TextViews,
CheckBoxes etc.). If other elements are used in a MeltingGroup, they will push the height of the line. This
may produce undesired results. The MeltingGroup itself uses 100% of the available space of its parent
container
If several Melting Groups are used within a form, their content is not aligned with the content of the other
Melting Groups by default.

© 2008 SAP AG 86
UI Element Guide
Spacing
The distance between the individual elements is defined using an “Item Separation” attribute. The default
value for this attribute is 3 pixels. In order to allow different spacing, each item in the Melting Group can
define a different separation using the following values: default, small, medium, large, small with line,
medium with line, large with line (see graphic below).
Melting Groups in a table need a special Item Separation, because input fields in tables do not have borders.
The value for this will be “Table Separation” (7 pixels with separator). (See graphic below)
Sizing of the elements of a Melting Group

As shown in the graphic below, the individual Melting Group Items can be sized relative in percent or in
characters and pixels.

© 2008 SAP AG 87
UI Element Guide
Properties
Implementing Menus: ContextMenu, MenuBar and PopupMenu

A menu is a structured list of items, consisting of different types of items such as MenuActionItem of
MenuCheckBox.
You can use menus in a MenuBar, you can assign them to different UI elements as PopupMenus and you
can implement them as ContextMenus.
ContextMenu
You can insert a ContextMenu into a view and assign it to the UI element to which it shall belong. Each UI
element has the properties contextMenuId to specify the context menu assigned to it and a
contextMenuBehaviour property to specify the behavior of the ContextMenu accordingly to this UI
element.
MenuBar
The following screenshot illustrates the design of a MenuBar.
PopupMenu
The PopupMenu is used to group actions in a space-saving way. After a user action, the menu is opened
according to the UI element to which it is assigned. The following graphic shows the structure of a
PopupMenu with the various elements:

© 2008 SAP AG 88
UI Element Guide
The PopupMenu is displayed according to the UI element to which it is assigned.
UI element Icon for the display of the Description

PopupMenu
LinkToURL For interactive elements, a
LinkToAction static icon indicates the
existence of a PopupMenu
Image An orange triangle appears
ProgressIndicator for the PopupMenu when the
user places the cursor on the
TextView
image.
Header of TableRowGrouping
Tray For the Tray, the icon for the
PopupMenu is located in the
title bar.
TreeNode For a TreeNode, the

PopupMenu is opened using
the right mouse button
Table In a table, PopupMenus can
be implemented if you take as
cell editor a UI element that
can assign a PopupMenu.
Structure
A menu consists of the following elements:
• Submenus for hierarchical menu structures, defined as a menu
• Different menu items which can be defined as the following elements:
{ MenuActionItem
{ MenuRadioButton
{ MenuCheckBox
{ MenuSeparator

© 2008 SAP AG 89
UI Element Guide
The MenuSeparator element adds a separator between two menu items and thus provides a
structure to the menu items. Like all MenuItems, the MenuSeparator can be set to invisible.
The getMenu method can be used to determine the corresponding menu for all menu items and submenus.
Utilizing ContextMenus
A ContextMenu opens when the user clicks the secondary mouse button.
The term “context menu” denotes the fact that the menu content depends on the context in which is it
opened. This context is composed of
• The location / view element where the menu was requested (e.g. click position)
• The application state at the time the menu is opened (e.g. the state of a business object)
Procedure
Creating a ContextMenu
...
1. In the Outline window of your View Designer, select Context Menus, click the secondary mouse button
and choose Create Context Menu
2. Insert the desired MenuItems into your ContextMenu and specify the relevant properties and actions.
The Outline will look similar to the screenshot below:
3. Select the UI Element to which you want to assign the ContextMenu, select the contextMenuId
property and click . A drop down list opens where you can select the relevant ContextMenu.
If you don’t see the properties contextMenuBehaviour and contextMenuId, enable the
advanced properties by clicking the Show Advanced Properties icon as illustrated in the figure
below:

© 2008 SAP AG 90
UI Element Guide
4. Set the contextMenuBehaviour property to provide.
Result
If the user clicks the secondary mouse button, the ContextMenu will open according to the UI element where
the mouse cursor is placed.
MenuBar
A MenuBar is used to present actions in a structure. The MenuBar is a toolbar that can be organized in
different blocks, the menus. Under each block, you can organize individual menu items or other menus.
Properties
design. Specifies the appearance of the MenuBar. design is of enumeration type
WDMenuBarDesign and can take the following values:
standard Standard display

transparent The MenuBar is transparent and does not have a frame
width. Determines the width of the MenuBar, which you can specify in relative CSS units like em, ex,
or percentage.
Menu
You can structure a MenuBar , a ContextMenu or a PopupMenu using Menus.
The figure below illustrates a PopupMenu with two Menus.

© 2008 SAP AG 91
UI Element Guide
Menu
Properties
enabled. Specifies whether a user can trigger an event.
textDirection. Specifies the text direction and allows you to use subordinated UI elements for texts in
inherit

title. Describes the menu title.
visible. Specifies whether the Menu is visible.
MenuActionItem
The MenuActionItem element is a subelement of the MenuItem element. You can use this subelement to
define an action for a menu item (or MenuItem object). You can link this view element to a graphic using the
imageSource property.
• disabledImageSource. defines the path to the icon source that is to be displayed if the enabled
property is set to false.
• enabled. Indicates whether or not the menu item can be selected.
• imageSource. defines the path to the icon source.

© 2008 SAP AG 92
UI Element Guide
• needsMoreInfo. Adds … to the text of the menu item to indicate to the user that additional user input
is required after selecting this menu item.
• text. Describes the text to be displayed.

• textDirection. Specifies the text direction and allows you to use a MenuActionItem element for texts in
inherit

• visible. Specifies whether the MenuActionItem is visible.
Events
• onAction. This event is triggered when the user selects a MenuActionItem element.
MenuCheckBox
Properties
• checked. This property specifies whether or not the MenuCheckBox is selected. The Boolean value
true indicates that the option is selected. A checkmark appears in the graphic that is displayed on the
screen.
• needsMoreInfo. This property adds … to the text of the menu item to indicate to the user that
additional user input is required after selecting this menu item.
• text. This property specifies the text that is associated with the MenuCheckBox graphic and displayed
to the right of the box.
• textDirection. With this property you can specify the text direction. It thus enables the labels for the
MenuCheckBox to be read in other languages that require a specific text direction. The
WDTextDirection.
inherit

• visible. specifies whether the MenuCheckBox is visible.
Events
The event is triggered when the checkbox is switched. The parameter is the new status.
onToggle MenuCheckBox (boolean checked)
MenuRadioButton
The Web Dynpro class MenuRadioButton, which implements the IWDMenuItem interface, is the abstract
base class of radio buttons within a menu.

© 2008 SAP AG 93
UI Element Guide
Properties
• keyToSelect. This property specifies the value of the key used for the selection of this radio button.
• needsMoreInfo. This property adds … to the text of the menu item to indicate to the user that
additional user input is required after selecting this menu item.
• selectedKey. This property specifies the path of the context attribute that stores the currently selected
key.
• text. This property describes the text next to the radio button.
• textDirection. With this property you can specify the text direction. This enables texts for a
MenuRadioButton to be read in other languages that require a particular text direction. The
WDTextDirection.
inherit

• visible. Specifies whether the MenuRadioButton is visible.
Events
The event onSelect is triggered, if the user selects the MenuRadioButton.
onSelect IWDMenuRadioButton (String key)
MessageBasedTrigger
The MessageBasedTrigger is an invisible UI element that listens to RTMF events.
Properties
• messageName. Specifies the name of the message.
Events
• onAction (String parameterMap). The action to be triggered when the specified delay has passed.
The parameter is defined as a string representation of a map of message parameters.
Network
A network is the graphical or tabular representation of flows and their dependencies.
The network UI element allows you to include a JNet applet that offers the user a large number of interactive
options.
The network data and display are defined by an xml file that needs to be provided in the context and then
bound to the context using data binding in the dataSource property.
For more information about the structure of the XML, see:
JNet – Introduction for Developers [Extern]

© 2008 SAP AG 94
UI Element Guide
Properties
• dataSource. Determines the data source of the network. This allows you to specify the path to the
context attribute that provides the data.
• height. Determines the height of the Network element, which you can specify in relative CSS units like
em or ex.
• layout. Specifies the appearance of the network. layout is of the enumeration type
WDNetworkLayout and can take the following values:
{ standard
{ yworks determines a special display using a wrapper of yFiles.
• width. Determines the width of the Network element, which you can specify in relative CSS units like
em, ex, or percentage.
Events
• onCustomCommand (String chart, String component, String graph, String parameters)
Triggered if an application-specific command is called either by the user or by an external controller.
• onEdgeAdded(String chart, String component, String graph, String parameters)
Triggered if an edge is added to a node but does not link to another node.
• onEdgeRemoved(String chart, String component, String graph, String parameters)
Triggered if an edge is removed from a node.
• onEdgePropsChanged(String chart, String edge, String graph, String parameters)
Executed if the edge properties are changed. This applies only for those properties that affect the
appearance of the edges; changes to the source or target of a link trigger the events onLinkAdded
and onLinkRemoved.
• onEdgeSelected(String chart, String edge, String graph, String parameters)
Triggered if an edge is clicked.
• onFrameSwitched(String chart, String component, String graph, String parameters)
• onGeneric(String chart, String component, String graph, String name, String parameters)
Allows the inclusion of user-defined events.
• onGraphAdded(String chart, String graph, String parameters, String subGraph)
Triggered if a sub-graph is added to the network.
• onGraphRemoved(String chart, String graph, String parameters, String subGraph)
Triggered if a sub-graph is removed.
• onInitialized(String chart, String graph, String parameters)
Triggered if the JNet - the init method of the applet – is triggered.
• onLayoutChanged(String chart, String graph, String node, String parameters)
Triggered if the position of a node changes.
• onLinkAdded(String chart, String graph, String link, String parameters)
Triggered if a link is added to the network, that is, an edge is connected to a node.
• onLinkChanged(String chart, String component, String graph, String parameters)
Triggered if the target node of a link has changed.
• onLinkRemoved (String chart, String graph, String link, String parameters)
Triggered if a link is removed from the network, that is, the connection is split without removing the
edge.
• onModelAdded(String chart, String graph, String parameters)
Triggered if the entire model is replaced.
• onModelDirty(String chart, String graph, String parameters)

© 2008 SAP AG 95
UI Element Guide
Triggered if the current model is changed, and the status is set to dirty. dirty means that an
event is triggered after which the network no longer corresponds to the specification of the server
application.
• onModelExtracted(String chart, String graph, String newGraph, String parameters)
Triggered if a new model is extracted from the current model. This can happen if the user performs a
graph analysis in order to filter a particular subset of the model. The new model is displayed in a new
frame whose ID can be used as the target ID for commands to the new graph.
• onModelSaved(String chart, String graph, String parameters, String reply)
Triggered if the current model is saved.
• onNodeAdded(String chart, String graph, String node, String parameters)
Triggered if a node is added to the Network.
• onNodeDoubleClicked(String chart, String graph, String node, String parameters, String
subComponents)
Triggered if a node is double-clicked.
• onNodePropsChanged (String chart, String graph, String node, String parameters)
Triggered if the properties of a node are changed. This does not apply to the node position. If the node
position is changed, event onLayoutChanged is triggered.
• onNodeRemoved(String chart, String graph, String node, String parameters)
Triggered if a node is removed.
• onNodeSelected(String chart, String graph, String node, String parameters, String subComponents)
Triggered if a node is selected.
• onRectangleSelected(String chart, String component, String graph, String parameters)
Triggered if the user creates a rectangle in the background of the character area.
• onSelectionChanged(String chart, String component, String graph, String parameters)
Triggered if an exception is changed, that is, if one is selected, or a selection is removed.
• onTraceLevelChanged(String chart, String graph, String level, String parameters)
Triggered if the trace level of JNet has been changed.
OfficeControl
You can use OfficeControl to add an Office document to a view. OfficeControl is provided as an ActiveX
control, so that it can be displayed in browsers that support ActiveX controls.
For browsers that do not support ActiveX controls, the following runtime exception is raised: Office
Integration through Applet is not supported.
The ActiveX control element enables the following documents to be displayed:
{ Microsoft Word documents with the file extension doc
If on client side Office 2007 is installed, the extensions docx and docm are also supported.
{ Microsoft Excel documents with the file extension xls
If on client side Office 2007 is installed, the extensions xlsx and xlsm are also supported.
Make sure that all clients have an installation of Office 2007, before you use the extensions docx, docm,
xlsx and xlsm.
Prerequisites
You can only use the OfficeControl UI element if one of the following software programs is installed:
• Microsoft Office XP, Office 2003, Office 2007
If you have Microsoft Internet Explorer installed, check your Internet Options to see whether the ActiveX
control elements for executing and initializing are enabled. To do this, choose Internet Options → Security →

© 2008 SAP AG 96
UI Element Guide
Custom level → ActiveX controls and plug-ins → Enable. Otherwise, the Office document cannot be
displayed.
Properties
• activateInPlace. Controls whether the document appears in the browser window, or the system opens
the Office application linked to the document type in a separate window. If you have assigned the
value false to the activateInPlace property and the value ms_word to the documentType
property, Microsoft Word opens and displays the content in the Microsoft Word user interface.
If you have assigned the value false to this property, you should then make sure that you
assign small values to the height and width properties, because these values are not
ignored and act as placeholders in the view of the Web Dynpro application. In the view, the UI
element takes up as much empty space as you have specified for the height and width
properties. You should therefore overwrite the default value of 300 with a smaller one, such as
5.
If you have assigned the value true to this property, you should use suitable values for
displaying the document. This will ensure that the document is readable and that the user does
not have to scroll too often, as it is not possible to increase the size of the document in the
browser window at runtime.
• controlId. At present, this property does not affect the appearance of the document.
• dataSource. You use this property to specify the data source. You can use it to specify the path to the
context attribute that provides the data. The context attribute must be of Resource type.
• documentName. You can use this property to describe the name of the document.
• documentType. You can use this property to describe the document type that you want to display.
Property documentType can take the following values and is represented by enumeration type
WDOfficeDocumentType:
ms_word Microsoft Word document with the file extension doc.

ms_excel Microsoft Excel document with the file extension xls.
• enableReadWrite. At present, this property does not affect the appearance of the document.
• expertMode. Specifies how access to the document is handled. false specifies that opening and
closing is triggered by property visible. true specifies that access to the document can be triggered
using various methods that you can access using IWDIOSFactory.
• height. Specifies the height of the UI element that you can specify in CSS sizes, such as em, ex or
pixels.
• width. Specifies the width of the UI element that you can specify in CSS sizes, such as em, ex, pixels
• showDecoration. At present, this property does not affect the appearance of the document.
Events
• onClose. This event is triggered if the document is closed. This is the case if the document is
displayed in a separate window, and the user closes the document using either Alt + F4 or the
Close icon on the Office application toolbar. The onClose event is also triggered if the Web Dynpro
application calls the close method of the IWDIOSDocument that you can call using IWDIOSFactory.
• onSave. This event is triggered if the document is saved. This is the case if the user chooses either
Ctrl + S or the Save icon on the Office Application toolbar. The onSave event is also triggered if the
Web Dynpro application calls the save method of the IWDIOSDocument that you can call using
IWDIOSFactory.

© 2008 SAP AG 97
UI Element Guide
More information
IWDOfficeControl
Using OfficeControl
This example shows how you can use OfficeControl to integrate an Office document in a Web Dynpro
application. OfficeControl is used in a Web Dynpro application that is used for a defined group of users, as
the relevant Office program needs to be installed on the client. If you have problems displaying OfficeControl,
it might help to check whether ActiveX Control Framework (ACF) has been correctly installed. For details,
see SAP Note 846952.
Prerequisites
You have created a Web Dynpro project including component, window and view. In this example, a file called
word.doc is read. The file is stored in Mime Repository in directory <project
name>/src/mimes/Components/<component name>. If you do so, you can refer to this file without
specifying a directory.
Procedure
Creating the context

...
1. Create a Node called Src and an attribute called dataSrc. This context attribute is used to store the
file content.
,
2. Set the property Type of the dataSrc attribute to Resource as shown in the screenshot below.
More information: Binding resource Property [Seite 63]

3. Create a context attribute called visible of type Visibility.
4. To store the relevant file in the context, insert the following code into the wdDoInit method:
wdDoInit()
IPrivateMyView.ISrcElement element =
wdContext.nodeSrc().createAndAddSrcElement();
String filename = "";
try
{
filename = WDURLGenerator.getResourcePath(
wdComponentAPI.getDeployableObjectPart().getWebModule(), "word.doc");
element.setDataSrc(WDResourceFactory.createMassDataResource(new
FileInputStream(filename),WDWebResourceType.DOC));
}
catch (FileNotFoundException e)
{

© 2008 SAP AG 98
UI Element Guide
throw new WDRuntimeException("No datasource available");}
Creating an OfficeControl in the view

...
1. Insert an OfficeControl into the view.

2. Bind the dataSource property of the OfficeControl to the context attribute dataSrc.
3. Bind the visible property of the OfficeControl to the context attribute visible.
Result
if you set the Visibility to VISIBLE, the Microsoft word document will be displayed. If you set the visibility to
NONE, the word document will be closed and the event onClose will be triggered.
IWDIOSFactory
If you have set the property expertMode in OfficeControl to true, you can use the IWDIOSFactory. to
handle the office integration.
Document handling with IWDIOSDocument

Using the method getDocumentProxy you can retrieve an instance of IWDIOSDocument. You need this
proxy to:
• create a new document: createDocument(IWDAttributePointer errorpointer)
• open an existing document: openDocument(IWDAttributePointer errorpointer).
• close an open document: closeDocument(IWDAttributePointer errorpointer).
• save an open document: saveDocument(IWDAttributePointer errorpointer).
The parameter of type IWDAttributePointer allows you to receive error messages and to store them in a
context attribute of type String.
IWDIOSEnvironment
Using the method getEnvironment you can retrieve an instance of IWDIOSEnvironment to call methods
to:
handle options for tracing, auto saving and protection.
get information about the office applications and versions installed on the client.
The method getSupportedApplications(IWDAttributepointer suppapptable,
IWDAttributePointer errorpointer)fills the context attribute, to which the first parameter
points to, with a list of office applications available on the client.
IWDIOSWordProcessing
Using the method getWordProcessing you can retrieve an instance of IWDIOSWordProcessing to
implement mail merge function.
More information:
http://sdn.sap.com/irj/sdn/javadocs

© 2008 SAP AG 99
UI Element Guide
Implementing IWDIOSFactory
The IWDIOSFactory allows you to handle documents in expertMode.
Prerequisites
You have implemented a OfficeControl as described in: Using OfficeControl [Seite 98]
Procedure
4. Set the expertMode property of the OfficeControl to true.
5. Create an attribute called errors of type String. If an error occurs, for example while opening the
document, this context attribute will take the error message.
6. The following variables need to be declared (in others):
public IWDIOSFactory factoryInstance;
public IWDIOSDocument documentInstance;
7. To get an instance of the IWDIOSFactory you have to retrieve the IWDAttributeInfo of the context
attribute dataSrc:
IWDAttributeInfo info =
wdContext.nodeSrc().getNodeInfo().getAttribute("dataSrc");
factoryInstance =
WDOfficeControlMethods.getMethodHandlerInstance(info);
8. To open an existing file, enter the following code into the relevant method:
IWDMessageManager mmger = wdComponentAPI.getMessageManager();
IWDNodeElement element = wdContext.currentSrcElement();
try{
if (factoryInstance == null){
IWDAttributeInfo info =
wdContext.nodeSrc().getNodeInfo().getAttribute("dataSrc");
factoryInstance =
WDOfficeControlMethods.getMethodHandlerInstance(info);
}
IWDAttributePointer errorpointer =
element.getAttributePointer("errors");
documentInstance = factoryInstance.getDocumentProxy();
documentInstance.openDocument(errorpointer);
}
catch (WDIOSDocumentException documentException){
mmger.reportException("could not create file: " +
documentException.getMessage(), false);
}
catch (WDIOSEnvironmentException envException){
envException.getMessage(), false);
}
catch (WDIOSFactoryException facException){
facException.getMessage(), false);
}
You can use this source text in the same way for other methods of the IWDIOSDocument, but need to
take account of the differences in the exceptions.

© 2008 SAP AG 100
UI Element Guide
Pattern UI Elements
To be used by the Portal Platform group only. Use by other applications and customers WILL
NOT BE SUPPORTED!
PageLayout
PageLayout is used to layout areas of a page. The PageLayout should be used for the RootElement of the
topmost view in the view hierarchy of the application. Don't use a second PageLayout in views which are
nested into the topmost view.
You can insert up to nine PagePanels into the PageLayout These view elements are used as a panel of a
page layout. Each panel can have a background color and different borders. The different panels are defined
as follows:
• Begin
• Bottom
• Center
• End
• InnerBegin
• InnerBottom
• InnerEnd
• InnerTop
• Top
The following graphic illustrates the arrangement of these panels on the view:
top
Inner top
Inner Inner
begin center end
begin end
Inner bottom
bottom
To enable the user to use hot keys, you can set the property handleHotkeys to true.
Procedure
To def...
1. To define a PageLayout, select the RootElement in the Outline view of the ViewDesigner, open the
context menu and choose Replace With → Page Layout.

© 2008 SAP AG 101
UI Element Guide
2. To insert the different panels, select the RootElement again, open the context menu and choose the
desired panel, e. g. Begin.
More Information
IWDPageLayout
PageHeader
A PageHeader is an area on top of a view where a title and additional PageHeaderAreas can be inserted.
The PageHeader can have a TitleContent inserted into it, which is aligned to the end of the line.
The following graphic illustrates the design of a PageHeader with assigned TitleContent and three
PageHeaderAreas:
A PageHeaderArea should not contain interactive UI elements.
Properties
textDirection. Specifies the text direction. This enables the labels for the PageHeader to be read in
other languages that require a specific text direction. The textDirection property can take the
title. Specifies the title.
PageHeaderArea
A PageHeaderArea should not contain interactive UI elements.
Properties
• beginPadding. specifies whether there is a padding at the begin of the PageHeaderArea.
• bottomPadding. specifies whether there is a padding at the bottom of the PageHeaderArea
• design. Describes the appearance of the PageHeaderArea. The design property can take the
following values and is represented by enumeration type WDPageHeaderAreaDesign:
{ emphasized
{ standard
{ transparent
• endPadding. specifies whether there is a padding at the end of the PageHeaderArea.
• topPadding. specifies whether there is a padding at the top of the PageHeaderArea

© 2008 SAP AG 102
UI Element Guide
HorizontalContextualPanel
HorizontalContextualPanel (HCNP) is a bar of two rows. The first row is built of larger sized tabs. The second
row can contain menu items.
Unlike a TabStrip UI element, the LeadSelection will not be changed automatically if the user selects a tab.
You can set the LeadSelection for the context node which you have bound the itemSource property to by
using method <node name>.setLeadSelection().
Properties
• activateAccessKey. Indicates whether access key for this control is activated. design. specifies the
design of the HorizontalContextualPanel. The design property can take the following values and is
represented by enumeration type WDHorizontalContextualPanelDesign:
{ standard
{ emphasized
• itemEnabled. Specifies whether the item is enabled.
• itemSource. Specifies the path to the context node. Must be bound to the context node from which
the HorizontalContextualPanel gets its data. Two levels are rendered. The first level forms the tabs
and the second level forms the menu items.
• itemText. Specifies the item text.
• itemTextDirection. You use this property to specify the text direction. This enables the labels for the
tabs to be read in other languages that require a specific text direction. The textDirection property
can take the following values and is represented by enumeration type WDTextDirection.
inherit

• itemVisible. specifies whether the item is visible.
Data Binding
To display the items individually with the corresponding text, text
direction and state, you need to bind all properties to the context. For
the second level that displays the MenuItems, you can use a
recursive context node. Bear in mind that only two levels are
supported.
ContextualPanel
A ContextuaPanel is an area on the left side of the view. It can
consist of the following UI elements:
• ViewSwitch
• FreeContextualArea
• NavigationList.
The screenshot below illustrates the design of a ContextualPanel:

© 2008 SAP AG 103
UI Element Guide
Properties
• width. Specifies the width of the ContextualPanel and is of type int. It is a defined width without
scrolling. If any texts are too long for the defined width, the text will be cut off. The only indication you
see is an ellipsis that shows that there is more text. If the user places the cursor on the text, the tool tip
will show the entire text.
Events
• onPersonalize. Event onPersonalize is triggered if the user clicks the personalize button.
ViewSwitch
The ViewSwitch UI element is part of the ContextualPanel and should be used to navigate between views.
Properties
• itemEnabled
Specifies whether the item is enabled or disabled, that is, whether the user can trigger an action by
clicking the item in question.
• itemIcon. The itemIcon property can take the following values and is represented by enumeration
type WDViewSwitchIcon.
value description
blank Invisible placeholder icon to get the right indent if only some view switch
items have an icon.
news Icon for news.
none No icon is displayed at the view switch item.
overview Icon for overviews.
report Icon for reports.
selfService Icon for self services.
work Icon for work related views.
• itemSource. Specifies the item source of the ViewSwitch. You can use this to specify the path to the
context node, where you can define the items.
• itemText. Specifies the text for the item.
• itemVisible. Specifies whether the item is visible.
Events
• onSelect (int index). The onSelect event is triggered if the user selects a ViewSwitch item. The
event parameter is the zero-based index of the selected item.

© 2008 SAP AG 104
UI Element Guide
Data Binding
...
1. To bind the data of the ViewSwitch, create a context node and the following attributes:
2. Bind the property itemSource to the context node and bind the properties itemEnabled, itemText
and itemVisible to the corresponding context attributes.
3. To create and add itemSource elements, add the following source code to the wdDoInit method:
wdDoInit()
1 for(int i =0; i<3; i++)
{
IPrivatePatternUIElementsView.IItemSourceElement ivse =
2
wdContext.createItemSourceElement();
wdContext.nodeItemSource().addElement(ivse);
ivse.setItemEnabled(true);
ivse.setItemText("text no. "+i);
ivse.setItemVisible(true);
}
In this example, the ViewSwitch would look like the screenshot below:
FreeContextualArea
FreeContextualArea is part of a ContextualPanel. A FreeContextualArea consists of a header and a content
area. The header is defined as ExpandableTitle, and the content area can be built of any UI element.
Normally, you use a container UI element which you can insert other UI elements into.
Properties
• contentHeight. Specifies the height of the content area and is of type int. It is a defined height
without vertical scrolling.
• design. The design property can take the following values and is represented by enumeration type
WDFreeContextualAreaDesign.
fill The content area has a background color.
plain The content area has no background color.
NavigationList

© 2008 SAP AG 105
UI Element Guide
Properties
• contentHeight. Specifies the height of the content area of the NavigationList and is of type int. This
is a defined height without horizontal scrolling.
• itemSelectable. Specifies whether the user can select an item.
• itemSource. Determines the item source of the NavigationList. You can use this to specify the path to
the context node providing the data. As with a Tree, you can use recursive context nodes to implement
a hierarchical list of items.
• itemText. Specifies the text of the item.
Events
The event onSelect is triggered if the user selects a NavigationList item.
ExpandableTitle
The ExpandableTitle element can be used in FreeContextualArea and in NavigationList. This element
defines an area, where a title is displayed. If the value of the expandable property is set to true, a small icon
is displayed too, which allows the user to expand and collapse the content area of the UI element to which
the ExpandableTitle is assigned.
The following screenshot illustrates the ExpandableTitle. expandable is set to true, and both values of
expanded are shown.
Properties
• expandable. Specifies whether the related UI element can be expanded and the corresponding icon is
displayed.
• expanded. Specifies whether the assigned area is collapsed or expanded.
• title. Specifies the text.
Events
• onToggle(boolean expanded). Event onToggle is triggered if the tray is toggled (collapsed or
expanded). Event parameter is the new expansion state.
PatternTabStrip
A PatternTabStrip consists of one or more PatternTabs into which you can insert one or more
PatternContentAreas. This allows you to define various paddings within one PatternTab. You can assign a
PatternExpandFunction to implement the option of minimizing and closing the PatternTabStrip. You can also
assign a menu.
The following UML class graphic illustrates the relationships between the base classes in connection with
PatternTabStrip.
Properties
WDPatternContainerDesign.

© 2008 SAP AG 106
UI Element Guide
Fill Filled background color

Plain Light background color (default)
transparent No background color
• handleHotkeys. Specifies whether this PatternTabStrip acts as a separate container for hotkeys. If
this property is set to true then all hot keys defined by UI elements within this PatternTabStrip will be
handled by this PatternTabStrip. This defines a new scope for hot keys.
• hasContentConnector. Determines whether the PatternTabStrip has a content connector. This is a
visualization between two PatternContainers to show that their content is connected.
• maxVisibleTabs. Specifies the maximum number of Tabs that can be displayed.
• selectedTab. Contains the ID of the currently selected PatternTab.
Events
The event onSelect is triggered if the user selects a PatternTab
Name Interface Parameter
onSelect PatternTabStrip (String tab)
PatternTab
Properties
• enabled. Specifies whether the PatternTab is enabled.
• textDirection. With this property, you can specify the text direction. This enables the labels for the
PatternTab to be read in other languages that require a specific text direction. The textDirection
property can take the following values and is represented by enumeration type WDTextDirection.
inherit
direction is therefore the same as in the parent element.

• title. Specifies the text for the PatternTab.
• tooltip. This property describes a note for the UI element that is displayed if the user places the cursor
on the UI element.
• visible. Specifies whether the Tab is displayed on the screen.
blank The UI element is not visible on the screen. This value has the same
visibility effect for the UI element on the screen as the value none.
none The UI element is not visible on the screen.
visible The UI element is visible on the screen.

© 2008 SAP AG 107
UI Element Guide
PatternTray
A PatternTray is a tray that you can insert one or more PatternContentAreas into. Unlike the Tray UI
element, you can have different padding for each PatternContentArea within a PatternTray. With
PatternTray, you can define your own expand/collapse function by inserting one or more
PatternExpandFunctions.
Properties
fill Filled background color

plain Light background color (default)
transparent No background color
• handleHotkeys. Specifies whether this PatternTray acts as a separate container for hotkeys. If this
property is set to true then all hot keys defined by UI elements within this PatternTray will be handled
by this PatternTray.
• hasContentConnector. Determines whether the PatternTray has a content connector. This is a
visualization between two PatternContainers to show that their content is connected.
• title. Defines the text of the PatternTray.
PatternContentArea
A PatternContentArea consists of either a ToolBar or a UI element, such as a Container. If you insert a
ToolBar and another UI element, the ToolBar will be ignored.
Properties
• border. Specifies whether the PatternContentArea is displayed with a border.
fill filled background color
plain light background color
transparent no background color
The default value is plain.
• hasContentPadding. Defines whether there is content padding.
• horizontalScrollingMode. The horizontalScrollingMode property can take the following values
and is represented by enumeration type WDUnidirectionalScrollingMode:
auto automatic scrolling.

none no scrolling.
show horizontal and vertical scrolling.
• visible. This property specifies the visibility of the UI element. The default value for this property is
visible.
blank The UI element is not visible on the screen but takes up space.
none The UI element is not visible on the screen and takes up no space.

© 2008 SAP AG 108
UI Element Guide
visible The UI element is displayed on the screen.
PatternExpandFunction
You can insert a PatternExpandFunction into a PatternTabStrip or a PatternTray. With
PatternExpandFunction, you can implement the option of expanding and collapsing a PatternTabStrip or a
PatternTray. The difference between this and the expand function you have when you use a Tray is that the
PatternExpandFunction allows three states: Large, medium and small. Different icons are displayed,
depending on the value of the expandState property. Another difference to the Tray element is that you
need to define the expand function. You can therefore set the exact height of the relevant PatternTray or
PatternTabStrip.
The following screenshot illustrates a PatternTray with the relevant icons for each expandState, large,
medium and small (from left to right).
Properties
• enabled. Defines whether the PatternExpandFunction is enabled.
• expandState. Defines the icon that is displayed for the PatternExpandFunction. expandState can
take the following values and is represented by enumeration type WDIconButtonFunctionStatus:
value design description
large should be used to expand the Container to maximum size
medium should be used to shrink the Container to a medium size
small should be used to collapse the Container to minimum size
The default value is large.

• tooltip. This property describes a note for the UI element that is displayed when the user places the
cursor on the UI element.
Events
The event onAction is triggered if the user clicks the expand button. The parameter is the new state.
Name Interface Parameter
onAction PatternExpandFunction (WDIconButtonFunctionStatus expandState)
Example
The following example explains how you can implement a PatternTray with three PatternExpandFunctions
that represent the three possible states of the expandState property.
...
1. Insert a PatternTray into your view

2. Insert the following UI elements into the PatternTray:
{ A PatternContentArea – then insert a Container element into this.
{ Three PatternExpandFunctions for the three expand states:
The graphic below illustrates these UI elements as they are displayed in the outline:

© 2008 SAP AG 109
UI Element Guide
3. Set the expandState property of the PatternExpandFunction elements to the different values large,
medium and small.
4. Create a context attribute called containerHeight of type string.
5. Bind the height property of the ScrollContainer that represents the content area of the PatternTray to
the context attribute containerHeight.
6. Create an action for every PatternExpandFunction and add the following code to the action:
wdContext.currentContextElement().setContainerHeight("<wished height>");
Shuttle
A Shuttle is a special UI element used in the Browse and Collect Pattern. It is used to move entries from one
table to another table to select the entries.
Properties
• availableListId. Determines the Id of the list that contains the available keys.
• enableAddButtons. Determines whether the add buttons are enabled.
• enableRemoveButtons. Determines whether the remove buttons are enabled.
• selectedListId. Determines the ID of the list that contains the selected keys.
• showAllButtons. Determines whether the all buttons (both remove all button and add all
button) are visible.
• vertical. Determines whether the Shuttle is arranged vertically or horizontally.
Events
• onAdd (boolean all). This event is triggered if the user presses an add button. The parameter
determines whether the add all button has been pressed.
• onRemove (boolean all). This event is triggered if the user presses a remove button. The parameter
indicates whether the remove all button has been pressed.
MessageArea
The MessageArea UI element is a placeholder that specifies where messages, such as error messages or
warnings, should appear in the view.
If there is a suitable MessageArea instance, all messages appear in it. Otherwise, the messages appear in a
separate window that is similar to a status bar and appears at the bottom of the screen. You can use a
MessageArea instance if it belongs to the layout of the associated view.
You cannot set the enabled property to false and can only bind this property to a read-only context
attribute of type boolean with the value true.
You cannot set the visible property to none or blank and can only bind this property to a read-only
context attribute of type com.sap.ide.webdynpro.uielementdefinitions.Visibility with the
value “VISIBLE“.
If there is more than one suitable IWDMessageArea instance, the first instance created is used

© 2008 SAP AG 110
UI Element Guide
Under certain circumstances, the Web Dynpro Framework changes the position specification of the
MessageArea UI elements, if other targets have priority, for example, portal mechanisms for displaying error
messages.
If you want the MessageArea UI element to be visible, make sure that the view that contains the UI element
is also visible, that is, that the visibility of the view and the UI element match.
The tooltip property does not affect the appearance of the UI element.
Properties
• maxVisibleMessage
Describes the maximum number of messages that appear without a scrollbar. A negative or zero value
means “unlimited”, and all messages appear without a scrollbar.
PhaseIndicator
Similar to the RoadMap UI element, the PhaseIndicator UI element displays the steps in a wizard. Each step
is represented by a separate phase object. As opposed to using the RoadMap UI element, the application
development can display larger steps using the PhaseIndicator UI element which may require more time by
the user.
Example
The following figure shows the visual representation of a PhaseIndicator in several statuses:
The symbols show the following values for the PhaseStatus:

• Phase 1: completed
• Phase 2: warning
• Phase 3: unavailable.
PhaseIndicator
Properties
• backgroundDesign. Specifies the background color. The backgroundDesign property can be filled
with the following values and is represented by the enumeration type
WDPhaseIndicatorBackgroundDesign.
emphasized The background is colored.

transparent The background is transparent.
• firstVisiblePhase. Contains the ID of the first visible phase.
• selectedPhase. Contains the ID of the selected phase.
Events
• onSelect (String phase). this event is triggered when the phase is selected. The event parameter is
the ID of the selected phase.

© 2008 SAP AG 111
UI Element Guide
Phase
The phase element is a step in a PhaseIndicator UI element.
Properties
• description. Allows you to display a text on a phase.
• enabled. Specifies whether the phase is activated.
• status. Describes the status of the phase. Property status can take the following values and is
represented by enumeration type WDPhaseStatus.
normal Describes the normal state of the phase.

completed Indicates that the phase is complete.
warning Describes a warning state of the phase.
unavailable Indicates that the phase is not available.
• textDirection. Specifies the text direction and allows you to use a Phase element for texts in
languages which require a specific text direction. Property textDirection can take the following
inherit

phase.
• visible. Specifies whether the Phase is visible.
MultiPhase
The MultiplePhase represents several phases within a PhaseIndicator element.
Properties
• dataSource. You use this property to specify the data source. To do this, you need to specify the path
to the context node that provides the data.
• description. Allows you to display a text on a phase.
• enabled. Specifies whether the phase is activated.
• status. Describes the status of the phase. status can take the following values and is represented by
enumeration type WDPhaseStatus.
normal Describes the normal state of the phase.

completed Indicates that the phase is complete.
warning Describes a warning state of the phase.
unavailable Indicates that the phase is not available.
• textDirection. Specifies the text direction and allows you to use a Phase element for texts in
languages that require a specific text direction. Property textDirection can take the following
inherit

© 2008 SAP AG 112
UI Element Guide

phase.
• visible. Specifies whether the MultiplePhase is visible.
ProgressIndicator
The ProgressIndicator UI element shows how much progress an activity has made in the form of a horizontal
bar, along with the value that you have assigned to the percentValue property. You can use the
displayValue property to display a text in the progress bar on the left side of the UI element. This makes it
possible to provide descriptions with specific percentage values. You can hide the DisplayValue value
using the showValue property. You can display the ProgessIndicator UI element in different colors using the
barColor property. You can assign a popup menu to a ProgressIndicator.
The ProgressIndicator can, for example, be used to display the completion status of a project as a
percentage.
Properties
• barColor. Specifies the logical color of the UI element. The default value of this property is neutral.
The barColor property can be filled with the following values and is represented by the enumeration
type WDProgressIndicatorBarColor.
Value
critical
negative
neutral
positive
• displayValue. Used to display a text in the progress bar. You can set a value in the application to
display a text such as “done” or “critical” for a specified percentage value. If you do not assign a value
to this property, it takes by default the value you have assigned to percentValue, displayed as a text
with a percentage sign – for example, 42%.
• percentValue. Specifies the progress made as a percentage.
• showValue. Specifies whether the value of the property displayValue – a text on the progress bar
– is displayed or hidden.
• width. Specifies the width of the ProgressIndicator. You can specify the width in CSS units like em, ex,
pixel, or percentage.

© 2008 SAP AG 113
UI Element Guide
RadioButton
The RadioButton UI element is a button with two states (on/off) that enables users to select options. The
RadioButton allows you to spread the displayed radio buttons individually on the screen instead of grouping
them in a table. You can toggle the radio button when you bind the UI elements to the same context attribute.
The radio button is selected if the context attribute to which the selectedKey property is bound contains
the value of the key that belongs to this radio button. The key is specified by property keyToSelect.
Properties
• keyToSelect. This property specifies the value of the key used to select this radio button.
• selectedKey. Specifies the path of the context attribute that stores the selected key.
• readOnly. Specifies whether or not the user can make selections in the checkbox.
• state. Describes the error status of the UI element. The data type of this property corresponds to

required Specifies whether the entered value is required, the UI element is
displayed with an asterisk.
• text. This property describes the text next to the radio button.
• textDirection. Specifies the text direction and allows you to use a radio button for texts in languages
which require a specific text direction. Property textDirection can take the following values and is
inherit
Events
• onSelect (String key). This event is triggered if the user selects the RadioButton .
RadioButtonGroupByKey
The RadioButtonGroupByKey UI element groups multiple radio buttons in a table. Unlike UI element
CheckBoxGroup, this UI element allows the selection of one element only.
Properties
• accessiblityDescription. When accessibility is activated, the assigned text is added to the quick info.
• colCount. Specifies the number of columns in which the radio button UI elements are displayed.
• selectedKey. Specifies the path to the context attribute that stores the currently selected key.
• readOnly. Specifies whether or not the user can select a radio button within the radio button group.
• state. Describes the error status of the UI element.
Property state can take the following values and is represented by enumeration type WDState.

© 2008 SAP AG 114
UI Element Guide

required Specifies whether the entered value is required. The
RadioButtonGroupByKey is displayed with an asterisk.
• textDirection. Specifies the text direction and allows you to use a check box for texts in languages
inherit

Events
onSelect. This event is triggered when the RadioButtonGroupByKey is selected.
Event Parameter Type
key String
Data Binding
The context node must contain a context attribute y. The attribute is assigned to a data type that can contain
a value set (key value pair). The selected keys of the RadioButtonGroupByKey are the values of this value
set. The texts to be displayed are the corresponding descriptions. The currently selected key is identical to
the current value of the attribute y. Property selectedKey is bound to context attribute y.
RadioButtonGroupByIndex
UI element RadioButtonGroupByIndex groups a number of radio buttons in a single table. Unlike UI element
CheckBoxGroup, this UI element allows user to select one element only.
Properties
• accessiblityDescription. When accessibility is activated, the assigned text is added to the quick info.
• colCount. Specifies the number of columns in which the radio button UI elements are displayed.
• readOnly. Specifies whether or not the user can select a radio button within the radio button group.
• selectionChangeBehaviour. Property selectionChangeBehaviour can take the following values
and is represented by t enumeration type TextDirection.
auto Specifies that the UI element automatically changes the lead selection
after an interaction by the user before the corresponding event is
triggered.
manual Specifies that the UI element does not change the lead selection after an
interaction by the user but triggers the corresponding event. In this case,
the event handler must change the lead selection to enable the UI
element to display the data. This setting allows you to check changes
made to the lead selection.
• state. Describes the state of the UI element.
Property state can take the following values and is represented by enumeration type WDState.

© 2008 SAP AG 115
UI Element Guide

required
Specifies whether the entered value is required.
• textDirection. Specifies the text direction and allows you to use a check box for texts in languages
inherit

• texts. Specifies the path to the context attribute that provides the texts of the radio buttons. The
context attribute must be an attribute of a multiple context node which stores the data of the radio
buttons. Each node element represents a radio button.
Events
• onSelect. This event is triggered if the user selects a radio button of this RadioButtonGroupByIndex.
The parameter index contains the index of the selected radio button.
Event Parameter Type
index int
RoadMap
The RoadMap UI element displays the steps in a wizard. You can insert single RoadMapSteps or
MultipleRoadMapSteps that are bound to a data source. You can tag the starting point and endpoint of this
UI element using different symbols, which are defined by enumeration type WDRoadMapEdgeDesign.
Assigning the value more to the property startPointDesign or endPointDesign indicates to the user
that there are other steps before the first visible step, or after the last visible step.
The RoadMap UI element is used to display step by step workflows. This enables the application
development to display small steps of a clearly defined work process.
Properties
• endPointDesign. Specifies the design of the last step of the RoadMap element. The
endPointDesign property can take the following values and is represented by the enumeration type
WDRoadMapEdgeDesign.
disabled No event can be triggered with this value when
selecting the end point. Therefore, the end point is
displayed as not activated.
more Indicates that there are more steps still to come in

the process.

© 2008 SAP AG 116
UI Element Guide
moreDisabled No event can be triggered with this value when

selecting the end point. Therefore, the end point is
displayed as not activated However, this value
indicates that there are more preceding steps.
selected You can highlight the end point in a different color
(that is, as if it were selected) – for example, to
show that there is an informative text attached to it.
standard The default display for the end point of a RoadMap

UI element.
• selectedStep. Specifies the ID of the selected step. The application developer has to set the value of
this property.
• startPointDesign. Specifies the design of the first step of the RoadMap UI element. The
startPointDesign property can take the following values and is represented by enumeration type
WDRoadMapEdgeDesign.
disabled No event can be triggered with this value when
selecting the starting point. Therefore, the starting
point is displayed as not activated.
more Indicates that more steps preceded this step.
moreDisabled No event can be triggered with this value when

selecting the starting point. Therefore, the starting
point is displayed as not activated However, this
value indicates that there are more preceding
steps.
selected You can highlight the end point in a different color
– that is as if it were selected), to show that there
is an informative text attached to it.
standard The default display for the starting point of a

RoadMap UI element.
Events
• onLoadSteps (boolean atEnd). Describes the action that is executed when the RoadMap contains
more steps than are displayed and the user selects the icon for more steps. The parameter atEnd
specifies whether the RoadMap contains more steps at the end or at the beginning.
• onSelect (String step). This event is triggered if the user selects a RoadMapStep. The event
parameter of type String corresponds to the ID of the selected step. If you use
MultipleRoadMapStep, you can retrieve the ID of a single step using the common event parameter
nodeElement. If you have a RoadMap containing RoadMapSteps and MultipleRoadMapSteps, you
can set the selectedStep using this code:
if (nodeElement!=null)
wdContext.nodeMultipleStep().setLeadSelection(nodeElement.index());
wdContext.currentContextElement().setStepSelected(selectedStep);

© 2008 SAP AG 117
UI Element Guide
RoadMapStep
The RoadMapStep element represents a step in a RoadMap. The following graphic shows how the UI
element is displayed:
Properties
• description. Allows you to display a text underneath the individual RoadMapSteps.
• design. The property design is deprecated.
You can visualize the appropriate design by using the following properties:
RoadMap: selected
RoadMapStep: enabled
RoadMapStep: type
• enabled. Specifies whether or not the RoadMapStep is activated. Only an activated RoadMapStep
can trigger events.
• name. Allows you to specify a label for the RoadMapStep, which is displayed in the RoadMapStep
itself.
• textDirection. Specifies the text direction and allows you to use a RoadMapStep for texts in
Inherit

• tooltip. Describes a note for the RoadMapStep. The note is displayed when the user places the cursor
on the UI element.
• type. Specifies the type of the RoadMapStep.
The type property can take the following values and is represented by enumeration type
WDRoadMapStepType.
roundtripClosed Specifies a step in the RoadMap UI element

which contains substeps. These substeps are not
displayed on the user interface.
roundtripEnd Specifies the end point of a round trip.

roundtripStart Specifies the starting point of a round trip.
standard Specifies the standard step of a RoadMap UI
element.
substep Specifies the substep used for round trips.
• visible. Specifies whether or not the RoadMapStep is displayed. This property enables you to easily
hide a RoadMapStep.

© 2008 SAP AG 118
UI Element Guide
MultipleRoadMapStep
A MultipleRoadMapStep is bound to a context node and enables the application developer to dynamically
adapt the RoadMap. Depending on how many elements are assigned to the context node, the number of
displayed RoadMapSteps can vary.
Properties
• description. Allows you to display a text underneath the individual RoadMapSteps.
• design. The property design is deprecated.
You can visualize the appropriate design by using the following properties:
RoadMap: selected
RoadMapStep: enabled
RoadMapStep: type
• enabled. Specifies whether or not the RoadMapStep is activated. Only an activated

MultipleRoadMapStep can trigger events.
• name. Allows you to specify a label for the MultipleRoadMapStep, which is displayed in the
MultipleRoadMapStep itself.
• textDirection. Specifies the text direction and allows you to use a MultipleRoadMapStep for texts in
Inherit

• tooltip. Describes a note for the MultipleRoadMapStep. The note is displayed when the user places
the cursor on the UI element.
• type. Specifies the type of the MultipleRoadMapStep.
The type property can take the following values and is represented by enumeration type
WDRoadMapStepType.
roundtripClosed Specifies a step in the RoadMap UI element

which contains substeps. These substeps are not
displayed on the user interface.
roundtripEnd Specifies the end point of a round trip.

roundtripStart Specifies the starting point of a round trip.
standard Specifies the standard step of a RoadMap UI
element.
substep Specifies the substep used for round trips.
• visible. Specifies whether or not the MultipleRoadMapStep is displayed. This property enables you to
easily hide a MultipleRoadMapStep.

© 2008 SAP AG 119
UI Element Guide
RowRepeater
The RowRepeater is a UI element that creates a list of rows with the same layout.
The figure below illustrates a RowRepeater element.
RowRepeater Element Transparent Container

LinkToAction TextView Image
Image
Image TextView
LinkToURL TextView FileDownload

Image
Image TextView

Image
Image TextView

Image
Image TextView
S
upported RowElements are TransparentContainer, TextView, Image and various links: LinkToAction,
FileDownload, LinkToUrl.
Each UIElement in the RowElement is laid out in one column.
If the RowElement is a TransparentContainer, with Layout MatrixLayout and scrollingMode=none, it will
be treated differently: The MatrixLayout will be "disintegrated". Its children will be treated as cells of the
RowElement's MatrixLayout. The maximum number of MatrixLayout rows (of all RowElements which are a
TransparentContainer with Layout MatrixLayout) defines the number of rows in one RowRepeater row. All
other cells get a rowSpan, so that they fit again to the maximum number of MatrixLayout rows.
Properties
• dataSource. Determines the data source of the RowRepeater. You can use it to specify the path to
the context node providing the data.
• design. design can take the following values and is represented by enumeration type
WDRowRepeaterDesign:
o alternating
o transparent

© 2008 SAP AG 120
UI Element Guide
• firstVisibleRow. Specifies which row is displayed as the first row.

• rowDescription. This property provides the accessibility text for the individual rows of a
RowRepeater. It should be bound to the dataSource of the RowRepeater.
• visibleRowCount. Specifies the number of rows that can be displayed without the user needing to
scroll. The value -1 displays all rows without the need to scroll.
• width. Determines the width of the RowRepeater that you can specify in CSS sizes, such as em, ex,
pixels or percentage values
SectionHeader
A SectionHeader is used to display a section header in a form, that is placed inside a
TransparentContainer. SectionHeader allows you to standardize the headers and the header levels of all
sections of the user interface.
Properties
• isDragHandle. Determines if this caption can be used as a drag handle for runtime authoring. The
handle. More information: Implementing Drag and Drop [Seite 21]
• level. Describes the level of the SectionHeader. The SectionHeader is designed for headings on a
detailed level of a screen. The higher levels (header 1 to 3) are therefore reserved for things like
page headers or tab headers. level is represented by enumeration type WDSectionHeaderLevel
header4 Used normally for a first main group in the application. A form with a
section header with level 4 should contain other section headers with
level 5 and 6 or other grouping containers, like tray.
header5 Used normally for a second main group in the application. A form with a
section header with level 5 should contain other section headers with
level 6 or other grouping containers, like tray.
header6 Used normally for lowest header level in forms. A form with a section
header with level 6 should not contain other section headers or other
grouping containers, like tray.
• text. Determines the labeling of the SectionHeader.
• textDirection. textDirection enables the labels for the SectionHeader to be read in other
languages that require a specific text direction. textDirection can take the following values
and is represented by the enumeration type WDTextDirection.
inherit
direction is therefore identical to the text direction for the parent
element.
Implementing Tables
The Table UI element allows the two-dimensional display of data in cells arranged into rows and columns.
The UI element consists of a header area and context text area. The lead selection of a row is highlighted in
color when displayed on the screen. The Table UI element can contain any number of GroupedTableColumn
elements.

© 2008 SAP AG 121
UI Element Guide
selection button scroll bar
Selection Button
As illustrated in the graphic above the table has a selection button. The selection button enables the user to
• select all rows
• deselect all rows
• copy the current selection. The user can paste a copied selection e. g. to Microsoft Excel.
These functions are provided by the Web Dynpro Framework.
Scroll bar
If the user scrolls, a tool tip will be shown as illustrated in the screenshot below.
You can define texts for this scroll tip using the TableScrollTipProvider. If new
data has to be loaded, the roundtrip to the server is triggered when the user
releases the mouse button.
Table Structure
Columns
A table – which is an element of the IWDTable – consists of grouped table
columns which can be of the type IWDTableColumn or IWDTableColumnGroup.
Each group can contain additional groups and columns. You can use the
TableColumnGroup to group columns under a common header. You can use the
fixedPosition property to fix a column at the left or right side and thereby
take out the column of the scroll area.
Rows
With TableRowGrouping you can group rows and display them under a header
row.

© 2008 SAP AG 122
UI Element Guide
Cell Editors
A table column contains a header and a TableCellEditor which specifies the UI element in which the cells of
this column are displayed.
Cell editors are, for example, Button, Caption, CheckBox, DropDownByKey, DropDownByIndex,
FileDownload, FileUpload, Image, Inputfield, LinkToAction, LinkToURL, ProgressIndicator, RadioButton,
TextView, and ValueComparison. The ValueComparison element is used to display various numerical values
line by line.
Cell Variants
You can insert various cell variants in a column. The TableStandardCell enables you to highlight single cells
in color or to select a different cell editor. The TableSingleMarkableCell can be used to mark and execute
actions at cell level. For the TableSingleMarkableCell, the following cell editors can be used: Image,
Inputfield, TextView, DropDownByIndex, DropDownByKey.
Specific cells can be taken out of the scroll area of the table and be fixed at the top or bottom edge. To do
this, you can use the interfaces IWDFixedBottomCell and IWDFixedTopCell.
Enhancements
The following enhancements of a table are possible:
• TablePopin. A TablePopin can be assigned to the table or a single column. When the user clicks the
TablePopinToggleCell, the TablePopin opens as an enhancement below the corresponding row. You
can arrange additional UI elements in a TablePopin - for example, for the display of detail information
of a data record.
• Legend. A legend enables you to add descriptions for single cells highlighted in color. You can use
the semantics property of a LegendItem and the cellDesign property of the table column or cell
variant to assign the high lightings to each other.
• Toolbar
• Popup menu. For the integration of popup menus, you can use UI elements as cell editors. They can
be assigned a popup menu - for example, Image or TextView.
Data binding
The data of a table is bound at two locations:
• The dataSource property of the table must be bound to a context node.
• A TableCellEditor is assigned to each column. The text property or value property of the
TableCellEditor is bound to a context attribute.
At runtime, the number of rows is determined by the number of node elements.
Selection of Rows and Cells

The selection of single or multipe rows or of single cells is possible.
You can use the selectionMode property to specify whether a selection of rows is possibe and whether
one or multiple rows can be selected. However, only one row can have the LeadSelection. Alternatively, you
can use cell variants of the type TableSingleMarkableCell to select single cells.
Table
A Table represents a two-dimensional data set arranged in rows and columns. A Table UI element is built of
TableColumns. You define the content of a Table with the dataSource property, the TableColumns have
TableCellEditors you have to bind to the attributes of the context node dataSource is bound to.

© 2008 SAP AG 123
UI Element Guide
Properties
• accessibilityDescription. When accessibility is activated, the assigned text is added to the
tooltip. This description provides semantic details of the UI element and is only read by the
screen reader if the user focuses the complete Ul element.
• compatibilityMode. This property allows application developers to adapt applications to changed
behavior in a new Release. compatibilityMode is represented by enumeration type
WDTableCompatibilityMode and can take the following values:
auto Specifies the behavior of the table according to the Release in which the
application was created.
nw04Plus The behavior of the table is the standard behavior for Releases after NW04.
• dataSource. You use this property to specify the data source. To do this, you need to specify the
path to the context node that provides the data.
• design. Determines the appearance of the table. The property design can take the following values
and is represented by enumeration type WDTableDesign.
alternating The table rows are displayed alternately in a different color.
standard The table background has one color. The individual table rows are
displayed with grid net lines.
transparent Transparent cell background The value of gridMode will

be ignored
transparentWithGrid Transparent cell background for table. The value of
gridMode will be considered.
• displayEmptyRows. specifies whether empty rows are displayed depending on the value specified
for visibleRowCount.
The screenshot below illustrates the behavior of displayEmptyRows
Number of elements = 3 Number of elements = 3
visibleRowCount = 5 visibleRowCount = 5
displayEmptyRows = true displayEmptyRows = false
(default)
• emptyTableText. Specifies the text to be displayed if the rows in the table are empty. If you do not
enter a text here, a standard text will be displayed if property visibleRowCount is -1.
• firstVisibleRow. Specifies which row of the table is displayed as the first row.
• firstVisibleScrollableCol. Specifies the ID of the first horizontally scrollable column after all fixed
columns.
• fixedTableLayout. Specifies whether the table obeys the layout restrictions. If this is set to true,
the content of the row will be cut off if it is longer than the allowed width.
• footerVisible. Specifies whether footer is displayed.
• gridMode. Specifies if and how a border is displayed. gridMode is of enumeration type
WDTableGridMode and can take the following values:

© 2008 SAP AG 124
UI Element Guide
both Horizontal and vertical borders are displayed
none No borders are displayed

vertical Only vertical borders are displayed
horizontal Only horizontal borders are displayed
The default setting is both.
• handleHotkeys. Specifies whether this Table acts as a separate container for hotkeys. If this
property is set to true then all hot keys defined by UI elements within this table will be handled by
this table. It defines a new scope for hot keys. By default property is set to false that means hot
keys will be propagated to parent container. More information: Implementing Hot Keys [Extern]
• multiColSorting. specifies whether the option to define more than one table column as sort criteria
is enabled.
• readOnly. Specifies whether or not the table can be edited. If this is set to true, the data in the
table cannot be edited.
• rowSelectable. Specifies whether or not a row can be selected.
• scrollableColCount. Specifies the number of visible scrollable columns. If this is set to -1, all
columns will be displayed.
• selectedPopin. Specifies the selected TablePopin.
• selectionChangeBehaviour. Changes to the lead selection can cause data loss – for example, if
the changed or new data was not written to the context due to syntax errors. You can avoid this
using the selectionChangeBehaviour property before lead selection is changed: This property
is represented by enumeration type WDTableSelectionChangeBehaviour and can take the following
values:
auto Specifies that the UI element automatically changes the lead selection after an
interaction by the user before the corresponding event is triggered.
manual Specifies that the UI element does not change the lead selection after an interaction by
the user but triggers the corresponding event. In this case, the event handler must
change the lead selection to enable the UI element to display the data. This setting
allows you to check changes made to the lead selection.
ifNoLoss Specifies that the lead selection only changes if all user entries are written to the
context. The lead selection is then changed automatically, and the corresponding event
is triggered. Otherwise, the event is triggered, but the lead selection is not changed.
• selectionMode. Specifies how the table rows can be selected.
Normally, the way table rows are selected Is specified by the definition of the context node. However,
you can change the selection using the selectionMode property. The selectionMode property is
represented by the enumeration type WDTableSelectionMode and can take the following values:
auto The selection mode is determined automatically by data binding.

multi Multiple table rows can be selected if the context node allows multiple selection.
none No selection possible
single Only one row can be selected at a time.
multiNoLead Multiple rows can be selected, a lead selection is not displayed.

© 2008 SAP AG 125
UI Element Guide
If you assign the single value to the selectionMode property, you can only select one row
at a time, even if multiple is defined for the context node.
• visibleRowCount. Specifies the number of table rows that can be displayed without the user
needing to scroll.
The value -1 is deprecated. Use displayEmptyRows = false and specify a maximum value
of visible rows in visibleRowCount.
• width. Specifies the width of the table and can be specified in relative CSS units like em, ex, or
percentage.
Events
• onColSelect (String col). This event is triggered if the user clicks a table column header. The
parameter is the selected column.
• onFilter. Event on Filter is triggered if filter symbol is selected in the first table column.
• onLeadSelect (String col, String newRowElement, String oldRowElement, int row). Event
onLeadSelect is triggered if lead selection for the table changes. The parameters are are:
o col: The ID of the selected column.newRowElement: The path to the node element
representing the selected row (i.e. the one the user has just chosen). Note that, depending
on the table's selection change behavior, this might not yet be the element at the data
source's current lead selection. This parameter replaces the index based "row" parameter for
hierarchical tables where a row cannot be adequately represented by an index, but only by
its associated node element. Nevertheless it can--and should--be used for "flat" tables, too.
o oldRowElement: The path to the node element representing the selected row (i.e. the one
that was selected before the user's interaction). Note that, depending on the table's selection
change behavior, this might still be the element at the data source's current lead selection.
o row. The zero based index of the selected row (i.e. the one the user has just chosen). Note
that, depending on the table's selection change behavior, this might not yet be the data
source's current lead selection.
This parameter is replaced by the String based "newRowElement" parameter for
hierarchical tables where a row cannot be adequately represented by an index, but only by
its associated node element. In general, it is deprecated and should be avoided in future
development.
• onSort (String col, WDTableColumnSortDirection direction, boolean multiple)
Event onSort is triggered if the user clicks the sort icon in a column header.
Parameters are:
{ col: The ID of the column to be sorted.
{ direction: The direction in which the sorting has been requested.
{ multiple: Indicates whether the supplied column should be sorted additional to the
previously existing sorting.
The sort status of a column is automatically displayed in the column in question:
Unsorted
Ascending
Descending
• onDrop(String data, String mimeType, int offset, String rowElement, String tags)
This event is triggered when the user drops an object onto this Table. The parameters are:
{ data: The data specified for the drag source.

© 2008 SAP AG 126
UI Element Guide
{ mimeType: the mime type specified for the drag source.

{ offset: the position relative to the rowElement, the user has dropped the object onto.
-1: just above the item specified by rowElement
0: right onto the item specified by rowElement
+1: just below the item specified by rowElement.
{ rowElement: That row is described by a path to the node element representing it. Declare an
action and event handler parameter of type IWDNodeElement (or one of your own node
element classes) along with a suitable parameter mapping; then the path will be automatically
transformed into a node element instance.
Note: when the table is empty at the time of the drop, the offset will be 0 and the
rowElement will be NULL
{ tags: the tags defined for the drag source
Filtering and Sorting in a Table
Filtering
The display of rows in a table can be restricted using the onFilter event. This can improve the overview of
the information contained in a table. The Table UI element provides the application developer with an
interface to display a filter row. The filter row is displayed right below the column header area and does not
change position when the user browses.
The filtering of table entries requires:
• The option to specify a criterion for each table column to restrict the result list
• The option to start the filter process
Restricting the size of the result list

Each table column enables you to bind its filterValue property to a context attribute that defines the
value to be filtered. Due to the binding of this property to a context attribute, an input element, which can be
used to enter the value to be filtered, is displayed in the column below the column header area. At runtime,
the filter input of the user is located in the context attribute to which the property is bound.
Starting the filter process

The Table UI element provides the onFilter event, which can be associated with an action. Due to the
association with an action, the filter row is displayed in the table. The filter row contains the button as
the first element on the left side. When the user chooses this button, the associated action is executed. You
can add a proposal list to an attribute, then in the filter field of the respective column a combo box is
displayed, where the user can select or enter values. The logic of the filter process is not implemented in
Web Dynpro. The application developer must implement the action to be executed.
Sorting
You can trigger a sorting process using the onSort event. This process can be used to sort in ascending or
descending order after a selected table column.
When you assigned a method to the onSort event, the user can click the header of a column at runtime to
display the corresponding icons.
unsorted
ascending
descending
The logic of the sorting process is not implemented in Web Dynpro. The application developer must
implement the action to be executed.

© 2008 SAP AG 127
UI Element Guide
Adding New Rows

The Table UI element provides an interface to create additional rows. After having inserted a RowCreator
element into a Table, an additional row is displayed as last row. Every time the user clicks into this row or
tabs into it, the RowCreator’s event onCreate is triggered. Inside an action that has to be bound to this
event, the application developer may create the respective table node element, and may additionally take
care of scroll position, leadSelection and focus.
Procedure
1. Ensure that the Table’s readOnly property is set to false.
2. Select the relevant Table in the Outline, open the context menu and choose: Insert RowCreator.
3. Switch to the Properties view and ensure that enabled is set to true.
4. Define an action that has to be executed if the onCreate event is triggered. The parameter col is of
type String and specifies the column id of the column where the event is triggered from.
TableColumnGroup
The TableColumnGroup allows you to combine several columns and give them one common heading. Into a
TableColumnGroup, you can insert TableColumns or other TableColumnGroups.
Properties
• fixedPosition. Determines whether the TableColumnGroup is fixed at the left or right margin.
left Column is fixed at the left margin.

notFixed Column is not fixed and can be scrolled.
right Column is fixed at the right margin.
• headerTextWrapping. Specifies whether the header text wraps.
• visible. Specifies the visibility of the UI element. The default value of this property is set to visible.
Events
The event onAction is deprecated.

© 2008 SAP AG 128
UI Element Guide
TableColumn
A Table is built of TableColumns. You have to insert a TableCellEditor into each TableColumn.
As of NetWeaver 7.0 (2004s), the association role of TableColumns has changed from
Columns to GroupedColumns. You can migrate tables to the new association role using the
Migrate Columns function in the context menu of the Table UI element.
• cellDesign. Specifies the color of the TableColumn. The cellDesign property is represented by
• colSelectionState. Specifies the selection state of the column. This property can be set by the
application developer e.g. when the user triggers the onAction event. colSelectionState can take
the following values and is represented by enumeration type WDTableColumnSelectionState.
{ notSelectable
{ notSelected
{ selected
• design. This property is deprecated. Use cellDesign instead.
• filterValue. You can use this property to define the value to be filtered and to bind it to a
corresponding context attribute.
• fixedPosition. Specifies whether a table column is fixed on the left or right. fixedPosition is
represented by enumeration type TableColumnFixedPosition and can take the following values:
left The column is fixed on the left.

notFixed The column is not fixed and can be scrolled.
right The column is fixed on the right.
• groupingValue. Specifies the table column which is used to group the values. The user can identify
the grouping by the fact that the same values of a column is only displayed in the column in which it is
listed for the first time and that there is no separator between the cells of the grouped values.
In the following graphic, the table is grouped by the column Article.
• hAlign. Describes the horizontal alignment of the table column. The hAlign property is represented
by the enumeration type WDTableColumnHAlign and can take the following values:
represented.
beginOfLine The text content is always displayed at the beginning of line. Therefore, the text

© 2008 SAP AG 129
UI Element Guide
content for the value ltr of the textDirection property is left-justified. The
text content for the value rtl is right-justified.
endOfLine The text content is always displayed at the end of the line. Therefore, the text
content for the value ltr of the textDirection property is right-justified. The
text content for the value rtl is left-justified.
forcedLRight The text content is always right-justified, regardless of whether the value is ltr
• headerTextWrapping. Specifies whether the header text wraps.
• isFiltered. Specifies whether the values of the column are filtered.
• resizable. Specifies whether the width of the table column can be modified by the user.
• selectedCellVariant. Specifies the selected cell variant.
• sortState. Specifies the sort status of the table column. sortState is represented by enumeration
type TableColumnSortDirection and can take the following values:
down The table column is sorted in descending order.

none The table column is not sorted, but can be sorted.
notSortable The table column cannot be sorted.
up The table column is sorted in ascending order.
• visible. This property specifies the visibility of the UI element. The default value of this property is set
to visible.
• width. Determines the width of the table column, which you can specify in relative CSS units like em,
ex, or percentage.
Events
• onAction (String col). This event is deprecated, use onColSelect or onSort of Table instead

© 2008 SAP AG 130
UI Element Guide
TableScrollTipProvider
As long as the table visualizes a scrollbar, the application

developer can apply ScrollTips. These help the user to navigate
in the table while scrolling. This feature makes it possible to apply
information text for a specific range in the scrollbar. If the user
scrolls, the information text is displayed next to the scrollbar
handle while scrolling in the specified range.
Properties
• dataSource. Determines the data source of the TableScrollTipProvider. You can use this to specify
the path to the context node providing the data.
• startRow. Specifies the starting point of the range. The end of the range is specified by the next
ScrollTip or by the end of the whole collection.
• text. The underlying information text for the specified range
Data Binding
As illustrated in the screenshot below, the context for the TableScrollTipProvider should look like this:
Bind the properties to the context:

dataSource to the node (in this example called ScrollTips)
startRow to an attribute inside this node, of type integer and
text to an attribute of type string.

© 2008 SAP AG 131
UI Element Guide
TableRowGrouping
The TableRowGrouping is a two-level hierarchy. It can display groups and one level of group data.
Properties
• expanded. Specifies whether the group elements is displayed expanded or collapsed.
• groupData. Determines the data source of the TableRowGrouping. You can use this to specify the
path to the context node providing the data.
Implementing TableRowGrouping
With TableRowGrouping, you can group the data in your table using header rows.
Procedure
Inserting the UI elements

...
1. Create a Table element.

2. Select the Table, open the context menu and select Insert RowArrangement. The New UI Element
wizard appears.
3. Select TableRowGrouping and confirm with Ok.
4. Insert a Header into the TableRowGrouping element.
5. Insert the desired number of TableColumns into the Table element.
6. Insert a Header and a TableCellEditor into each TableColumn.
Your table structure in the Outline should look similar to the graphic below:

© 2008 SAP AG 132
UI Element Guide
Create Context Structure

...
1. Switch to the Context tab, select the Context root node, open the context menu and select New →
Node. The Context Node Wizard appears.
2. Select Manually, enter a name for the Node, such as TableGroup and confirm with Finish.
3. Select the TableGroup node, open the context menu and select New → Node. The Context Node
Wizard appears.
4. Select Manually, enter a name for the Node, such as TableGroupData and confirm with Finish.
5. Switch to the Properties tab, select the singleton property and set the value to false.
6. Switch to the Context tab, select the TableGroupData node and create the attributes you need for the
TableColumns.
7. Select the TableGroup node, open the context menu and select New → Attribute. Select Manually,
enter a name for the attribute, such as GroupHeaderText and confirm with Finish.
8. Repeat the last step and create an attribute called expanded of type Boolean.
Bind UI Element properties to the context

...
1. Bind the following UI element properties to the following context nodes/attributes:

{ Table.dataSource to node TableGroup
{ TableRowGrouping.groupData to node TableGroupData
{ TableRowGrouping.expanded to the expanded attribute

© 2008 SAP AG 133
UI Element Guide
{ Header.text of TableRowGrouping to attribute GroupHeaderText

{ The text properties of the respective TableCellEditors of the TableColumns to the attributes
under node TableGroupData.
The graphic below illustrates the data binding in this case:
UI Elements in the Outline Context Structure
Result
You have created a table including a TableRowGrouping element. You have also created an appropriate
context structure and bound all relevant properties to this context.
After filling the context with data, you will have a result at runtime similar to this:
TreeByNestingTableColumn
The TreeByNestingTableColumn element allows the integration of a tree structure in a table column.

© 2008 SAP AG 134
UI Element Guide
To insert a TreeByNestingTableColumn into a Table, select it in the Outline view of the Web Dynpro
perspective, open the context menu and choose Insert → RowArrangement. Now you can select the
TreeByNestingTableColumn.
Properties
• cellDesign. Specifies the background color of the cell. The cellDesign property can take the
following values and is represented by the enumeration type WDTableCellDesign.
badvalue_dark Dark background color that indicates a negative value.

badvalue_light Light background color that indicates a negative value.
badvalue_medium Medium background color that indicates a negative value.
criticalvalue_dark Dark background color that indicates a critical value.
criticalvalue_light Light background color that indicates a critical value.
criticalvalue_medium Medium background color that indicates a critical value.
goodvalue_dark Dark background color that indicates a good value.
goodvalue_light Light background color that indicates a good value.
goodvalue_medium Medium background color that indicates a good value.
group_level1 Background color for cells of group level 1
key_medium Medium background color for cells of key column
negative Background color that indicates a negative value.
positive Background color that indicates a positive value.
standard Standard background color, the same for the entire row
The default value for this property is standard.

© 2008 SAP AG 135
UI Element Guide
• childrenLoaded. Specifies whether the lower-level nodes are loaded.

• design. Specifies the design of the cell background. The default value of this property is transparent.
You can use the background colors fill1, fill2, and fill3 as separators between the individual
semantically different cell contents. The cellBackgroundDesign property can be filled with the
following values and is represented by the enumeration type WDCellBackgroundDesign.
Value Short Description

fill1 The color corresponds to the value primarycolor of the design
property of the Group UI element.
fill2 The color corresponds to the value secondarycolor of the
design property of the Group UI element.
fill3 This color corresponds to the color value of the third level of a Tree
UI element.
element or a table.
• expanded. Specifies whether a tree node is expanded.
• headerTextWrapping. Determines whether the header text is wrapped.
• isLeaf. Identifies a node element as an end node. The value true indicates that no other
subelements exist.
• resizable. Specifies whether the width of the table column can be modified by the user.
• symbolDesign. Defines which kind of design is chosen to visualize the icons for nodes and leaves in
the hierarchy. The symbolDesign property can take the following values and is represented by
enumeration type WDTableHierarchySymbolDesign
{ simple. Only nodes will be visualized by leading icons
{ standard. Nodes and leaves will be visualized by leading icons
• visible. Specifies whether or not the column is displayed.
The visible property can take the following values and is represented by data type WDVisibility.
blank The table column is not visible on the screen. This value has the same
visibility effect for the table column on the screen as the value none.
none The table column is not visible on the screen.
visible The table column is displayed on the screen.
• width. Specifies the width of the table column and can be specified in relative CSS units like em, ex,
or percentage.
Events
• onLoadChildren (String path) This event is triggered when a tree node is expanded for the first time.

© 2008 SAP AG 136
UI Element Guide
Cell Variants
As cell variants, the interfaces IWDTableSingleMarkableCell, IWDTableStandardCell, and
IWDTablePopinToggleCell derived from IWDAbstractTableCellVariant are available. To
TableSingleMarkableCell and TableStandardCell, a cell editor must be assigned, which is used to bind the
data to the context attribute. TablePopinToggleCell does not require a cell editor. For the
TableSingleMarkableCell, as cell editors (IWDTableMarkableCellEditor) the following editors are available:
DropDownByIndex, DropDownByKey, Image, InputField and TextView.
TableStandardCell is mainly used to define cells that are meant to have an
individual design, such as being highlighted by color.
TableSingleMarkableCell
allows you to select an individual cell to, for
example, perform actions on it. The x and y coordinates
of the cell can be determined using the markedData
property. They allow you to uniquely identify a cell.
TablePopinToggleCell is a cell variant which is only

used to open and close a TablePopin. It is inserted in the first column of a table.
TableStandardCell
A TableStandardCell mainly serves the purpose of adapting the design for individual cells and also allows
you to select a cell editor different from the one defined for the TableColumn.

© 2008 SAP AG 137
UI Element Guide
• cellDesign. Specifies the color of the table cell. The cellDesign property is represented by
• hAlign. Specifies the horizontal alignment of the UI element in the grid layout cell. The default value of
this property is beginOfLine. The hAlign property is represented by enumeration type
WDCellHAlign and can take the following values:
char Specifies the alignment using a specific character. The assignment of the char
value allows you to align the cell contents to a single character.
right Right-justified alignment. This value is deprecated. Use forcedRight
instead.
variantKey. Determines the key to be used to identify the TableStandardCell.
TableSingleMarkableCell
TableSingleMarkableCell allows you to identify a single cell.
This cell type can only be used if the property selectionMode of the table is set to none.
Supported cell editors are TextView and the different Link types.
• attributeToMark. Is bound to the context attribute of the TableColumn in which this
TableSingleMarkableCell element resides.
• cellDesign. Specifies the color of the LegendItem. The cellDesign property is represented by
• hAlign. Specifies the horizontal alignment of the UI element in the cell. The default value of this
property is beginOfLine. The hAlign property is represented by the enumeration type
WDCellHAlign and can be filled with the following values:
is right-justified.

© 2008 SAP AG 138
UI Element Guide
justified.
forcedRight The text is always right-justified, regardless of whether the value is ltr or
rtl for property textDirection.
• markedData. The x and y coordinates of the cell can be determined using the markedData property.
They allow you to uniquely identify a cell.
The binding of the property markedData must be identical for all TableSingleMarkableCells of
a table, independent of the column in which they occur.
• variantKey. Determines the key to be used to identify the TableSingleMarkableCell.
Defining Cell Variants

The TableSingleMarkableCell allows you to group cell variants in any way as you like and to make a single
cell selectable in this group. The following example shows how to proceed if you want to implement a
selection of a single cell from an entire table.
Prerequisites
You have created an applicaton with a component and view in your Web Dynpro project.
Procedure
Creating the Context

...
1. Create a value node TableNode for the data of the table and insert three value attributes of the type
String for the table columns.
2. Create a value attribute selectedCellVariant of the type String in the TableNode.
3. Create a value attribute attributePointer, switch to the Properties, click … for the property type,
and select the Dictionary Simple Type. Enter
com.sap.ide.webdynpro.uielementdefinitions.AttributePointer and confirm with Ok.
Creating the View

...
1. Open the context menu in the Outline, select Apply Template and then Table. In the subsequent
dialog box from the context, select three attributes for the columns (col1, col2, col3). Confirm by
choosing Finish

© 2008 SAP AG 139
UI Element Guide
2. Set the property selectionMode of the table to none.

Repeat the steps for each column.
3. Highlight the column and open the context menu. Select Insert Cell Variant,
TableSingleMarkableCell and confirm with Finish.
4. Enter the same value for each TableSingleMarkableCell for the property variantKey - for example,
variant1
5. Insert a cell editor of the type TextView in each TableSingleMarkableCell.
Binding the UI Elements

...
1. Bind the text property of each TextView to the column in which the property is contained.
2. Bind the attributeToMark property of the corresponding TableSingleMarkableCell to the column in
which the element is contained.
3. Bind the selectedCellVariant property of each TableColumn to the context attribute
selectedCellVariant.
4. Add the following source code to the wdDoInit method.
wdDoInit()
1 IPrivateUseSingleMarkableCellsView.ItableNodeElement elem;
int count = 10;
// Fill dummy data
2 for(int i=0; i<count; i++) {
elem =
wdContext.nodeTableNode().createTableNodeElement();
wdContext.nodeTableNode().addElement(elem);
elem.setCol1(“1.” + i);
// set TableSingleMarkableCell as a variant for the table
3 elem.setSelectedCellVariant(“variant1”);

© 2008 SAP AG 140
UI Element Guide
For each element that is created in the for loop and is then added, the TableSingle
MarkableCell is set as a cell variant in row 3.
Result
Each single cell can be selected separately. You can define an action and in its method, you can determine
the coordinates of the currently selected cell using the following code:
IWDAttributePointer attPointer =
wdContext.currentContextElement().getAttributePointer();
TablePopin
A TablePopin enables you to enhance a table row. The TablePopin is displayed below a row. If you assign
the TablePopin to a table column, it is displayed below the row, and the row in question is highlighted.
By inserting cell variant TablePopinToggleCell into the first column of the table, you can implement opening
and closing of a TablePopin. When the user clicks the TablePopinToggleButton, the TablePopin opens
below the row; when the user clicks again, it closes.
You can also display a TablePopin by setting it in the table’s selectedPopin property. You also need to
define an attribute selectedPopin of type String, under the node that hold the table data. If you set an
empty string as value, no TablePopin will be displayed. To display a TablePopin, set the ID of the desired
TablePopin.
Structure
A TablePopin consists of two areas: a TextBar and a content area. You can add the following UI elements to
the content area: Button, Caption, CheckBox, DropDownByKey, DropDownByIndex, FileDownload,
FileUpload, Group, Image, HorizontalGutter, InputField, Label, LinkToAction, LinkToURL, ProgressIndicator,
RadioButton, TextView and ValueComparison.
The properties of UI elements that can be changed by the user must be bound in a TablePopin to the
context. TablePopins cannot be used in a table if they contain a TreeByNestingTable element.
Properties
• accessibilityDescription. Once you have activated accessibility, the assigned text is added to the
quick info. This description provides semantic details of the UI element and is only read by the screen
reader if the user focuses the complete Ul element.
• design. Specifies the appearance of the TablePopin content area. design is of enumeration type
WDPopinDesign and can take the following values:
fill Content area with background color

plain Content area with white background and frame.
transparent Content area with transparent background and no frame.

© 2008 SAP AG 141
UI Element Guide
• hasContentPadding. Determines whether the content area is surrounded by an inner indent.

• titleDesign. This property allows you to specify the symbol that illustrates the message type of the title
area. Property titleDesign can take the following values and is represented by enumeration type
WDTablePopinTitleDesign.
critical A symbol for a critical message appears in the title.

error A symbol for an error/stop message appears in the title.
ok A symbol for an okay message appears in the title.
text The title appears without a symbol.
The default value for this property is text.
• titleText. Determines the text to be displayed for this popin. You can statically specify this property
value at design time or bind it to a context attribute so that the value is provided automatically by the
context at runtime.
Events
• onClose. If you define an action for this event, a Close button is displayed in the TablePopin. If the
user clicks this button, event onClose is triggered.
TablePopinToggleCell
The TablePopinToggleCell is inserted as a cell variant in the first column of a table and enables the user to
open and close a TablePopin as an enhancement of a table row by selecting the row.
• cellDesign. Specifies the color of the LegendItem. The cellDesign property is represented by
• hAlign. Determines the horizontal alignment of the UI element in the grid layout cell. The default value
of this property is beginOfLine. The hAlign property is represented by the enumeration type
WDCellHAlign and can be filled with the following values:
char Specifies the alignment using a specific character. The assignment of the char
value allows you to align the cell contents to a single character.
• variantKey. Determines the key to be used to identify the TablePopinToggleCell.

© 2008 SAP AG 142
UI Element Guide
Event
• onToggle (boolean expanded). The onToggle event is triggered when the user clicks the
TablePopinToggleCell. The transfer parameter expanded is the new status.
TextBar
Properties
• text. Determines the text of the TextBar.
• visible. Controls whether the TextBar is displayed.
The visible property can be filled with the following values and is represented by the data type
WDVisibility.
Tabstrip
The TabStrip UI element (IWDTabStrip) allows the display of a tab. The user can toggle between several tab
pages by selecting a specific tab title. The same window is shared by all tab pages and used for displaying
the content. The user can display the content of a tab by selecting a tab title. The following graphic shows
the visual representation of a TabStrip with an integrated toolbar:
If the width of the TabStrip element is not sufficient to display all tabs, as shown in the example above, the
user can navigate through the tabs using the two integrated scroll tabs with little arrows.
TabStrip
Properties
• handleHotkeys. Specifies whether this TabStrip acts as a separate container for hotkeys. If this
property is set to true then all hot keys defined by UI elements within this TabStrip will be handled by
this TabStrip. It defines a new scope for hot keys.
• height. Specifies the height of the tab and its tab pages. You can specify the height in CSS units like
em, ex or pixels.
• selectedTab. The ID of the selected tab page.
• selectionChangeBehaviour. The selectionChangeBehaviour property can be filled with the
following values and is represented by the enumeration type WDTabStripSelectionChangeBehaviour.
interaction by the user but triggers the corresponding event. In this case, the event
handler must change the lead selection to enable the UI element to display the
data. This setting allows you to check the change of the lead selection.
• tabAlignment

© 2008 SAP AG 143
UI Element Guide
exact: Forces the exact specification of height and width of the tabs. Each tab has the
same height and width which result from the specification of a minimum size and the
size specified by the label.
fast Enables the client to efficiently align height and width.
There is no alignment for browser-based clients. Height and width are specified by
the tab label. Height and width of the tabs can be aligned for Web Dynpro clients to
optimize the window structure.
• width. Specifies the width of the register and its tab pages. You can specify the width in CSS units like
em, ex, pixel, or percentage.
Events
• onClose (String tab). This event is triggered when a user clicks the close icon of a tab.
Parameter is the respective tab.
• onSelect (String oldTab, String tab). The event is triggered if the user selects a tab page.
Transfer parameters are the previously selected and the newly selected tab.
Tab
The Tab UI element is an individual tab page within a tab. The tab consists of a header area, a content area,
and an optional toolbar.
Description of the View Element Properties

• closeable. Specifies whether the user can close the tab.
• enabled. Specifies whether or not the tab can be activated to display its content.
• hasContentPadding. Controls whether there is a padding around the content of the tab
page..
• visibility. Specifies whether the Tab is visible and is of type WDVisibilty.
• visible. This property is deprecated, use visibility instead.
TextEdit
TextEdit makes it possible to enter and display multi-line text. The text in this UI element uses a uniform font,
font size, and font style. The UI element is displayed with borders and the frame size is specified by the
properties col and row. If the number of rows exceeds the value of property row, a vertical scroll bar is
displayed.
If the value of wrapping is off, the scroll bar is only displayed if the text row length exceeds the
value of property col.
The following graphic shows UI element TextEdit in the SAP standard design:
Properties
• adjustRowsToText. Specifies, whether this TextEdit should adjust the number of rows to the text,
which is displayed.

© 2008 SAP AG 144
UI Element Guide
• cols. Specifies the width of UI element TextEdit as a number of characters.

• displayAsText. Specifies, whether the TextEdit looks like a TextView if it has not the focus.
• readOnly. Specifies whether or not text can be entered in the UI element.
• rows. Specifies the height of UI element TextEdit as a number of characters.
• state. Describes the state of UI element TextEdit. Property state can take the following values and
is represented by enumeration type WDState.
value. Describes the text to be displayed. The text can be edited.
wrapping. Specifies whether or not the text can be wrapped. wrapping can take the following values
and is represented by enumeration type WDTextWrapping.
hard deprecated
off The text is not wrapped. If the text row length exceeds the width specified by
property col, a horizontal scroll bar is displayed.
soft Wraps the text if the value specified by attribute col is reached. A carriage
control is not inserted for wrapping, and a horizontal scroll bar is not
displayed for this value.
width. Determines the width of the UI element that you can specify in CSS sizes, such as em, ex,
pixels or percentage values. This property value overwrites the value in property row.
Events
onChange. This event is triggered when the TextEdit loses focus and the value has been changed.
TextView
The TextView UI element provides an area for displaying a multiline text.
You can assign a popup menu to a TextView which is visible when the user places the cursor on the
TextView:
When using a TextView element, you should always add a label to ensure accessibility of an application.

© 2008 SAP AG 145
UI Element Guide
Properties
• design. Describes the look of the TextView element. The Cascading Style Sheet (CSS) provided by
SAP describes the variations of the design attribute display. The design property can be filled with
the following values and is represented by the enumeration type WDTextViewDesign.
emphasized Highlights the text and applies the standard font size.
groupTitle deprecated. Use SectionHeader instead to define a header of a
TransparentContainer.
header 1 Highlights the text and applies the standard font size +4.
header 2 Highlights the text and applies the standard font size +2.
header 3 Highlights the text and applies the standard font size.
header 4 Highlights the text and applies the standard font size –1 (small) ->
(like the legend value, but highlighted).
label deprecated. Use Label instead.
label_small deprecated. Use Label instead.
legend Displays the text using the standard font size –1.
monospace Displays the text using a non-proportional font size. Each letter
takes up the same space.
reference Displays the text in italics and applies the standard font size.
standard Displays the text using the standard font size. No text attributes
are defined for this value.
• hAlign
Specifies the horizontal alignment of the content within the TextView element. The value native for
the layout property is ignored. The hAlign property can take the following values and is represented
by the list type WDInputFieldAlignment:
represented.

© 2008 SAP AG 146
UI Element Guide
• layout. Describes the alignment of the text. The layout property can be filled with the following
values and is represented by the enumeration type WDTextViewLayout.
block Displays the TextView element in a <div> tag.

native Displays the TextView element in a <span> tag.
paragraph Displays the TextView element in a <p> tag.
• semanticColor
critical Displays the TextView element with a color that indicates a critical state - for
example, orange.
diminished Displays the TextView element with a color that indicates a diminished state.
marked1 Displays the TextView element with a color whose meaning can be defined by the
user.
marked2 Displays the TextView element with a second color whose meaning can be
defined by the user.
negative Displays the TextView element with a color that indicates a negative state - for
example, red.
positive Displays the TextView element with a color that indicates a positive state - for
example, green.
standard Displays the TextView element with a default color.
inherit

• width. Specifies the width of the TextView UI element that you can specify in CSS sizes, such as em,
• wrapping. Specifies whether or not text can be wrapped to the next line.
TimedTrigger
UI element TimedTrigger automatically and periodically triggers an event with a specified delay. UI element
TimedTrigger is not displayed on the user interface. It therefore ignores the tooltip and property
visible. However, in specific layouts such as the matrix layout, it does take up space. To trigger an action,
you must bind property onAction to an action. You use property delay to specify the delay in seconds.
To prevent events being triggered by UI element TimedTrigger, proceed as follows:
• Disable the action that is bound to the UI element’s onAction property.
• Set the value of the delay to 0 seconds
• Disable UI element TimedTrigger
Every user interaction is interrupted when the onAction event is triggered.

In the Web Dynpro application, you can – with certain restrictions – use periodical server requests and UI
element TimedTrigger to trigger push events – that is, the controlled triggering of events, for example, as a

© 2008 SAP AG 147
UI Element Guide
message for the user. When using UI element TimedTrigger, the client actively retrieves the data from the
server. Due to the considerable server load, you should only use this option if the number of clients is small.
Properties
• delay
Property delay describes the delay in seconds before a specific action is triggered. The value of this
property cannot be negative. A delay of 0 seconds means that the timer is turned off and no action is
executed. The delay starts at the point of the time at which the client receives the response. After each
round trip to the server – that is, after each user action, the timer is restarted.
Note that in case of very short delays (delays of less than 5 seconds), it might be impossible to
operate user interfaces.
Events
onAction. The event is triggered when the delay has ended.
ToggleButton
• checked. Specifies whether or not the ToggleButton is toggled.
• checkedImageSource. defines the path to the image source.
• design. The design property can be filled with the following values and is represented by the
enumeration type WDToggleButtonDesign.
standard Displays the ToggleButton with the default colors for the background and text.
When values are assigned to the properties imageSource and
checkedImageSource, the corresponding icon is displayed.
toggle Displays the ToggleButton with a triangle symbol:
If the ToggleButton is toggled, the triangle points down:
If you select this value, no further icons should be assigned.
• text. Specifies the text to be assigned to the ToggleButton.
• textDirection. Specifies the text direction and allows you to use the toggle element for texts in
inherit

• width. Specifies the width of the ToggleButtons. You can specify the width in CSS units like em, ex,
pixel, or percentage.
Events
• onToggle (boolean checked). This event is triggered when the ToggleButton is toggled. The
parameter is the new status of the element.

© 2008 SAP AG 148
UI Element Guide
ToggleLink
A ToggleLink is a link that can display two different states. They are displayed with a triangle symbol:
checked = false
checked = true
Properties
• checked. Specifies whether or not the ToggleLink is toggled.
• textDirection. Specifies the text direction and allows you to use a ToggleLink for texts in languages
inherit
Events
The onToggle event is triggered when the ToggleLink is toggled. The parameter is the new status of the
element.
onToggle IWDAbstractToggle (boolean checked)
ToolBar
The Toolbar UI element is a collection of tools that can be accessed using UI elements. Therefore, toolbars
provide an additional way of grouping UI elements functionally.
A toolbar can contain the following elements:
• ToolBarButton, ToolBarButtonChoice, ToolBarLinkToAction, ToolBarLinkToURL,
ToolBarDropDownByIndex, ToolBarDropDownByKey, ToolBarInputField, ToolBarSeparator,
ToolBarToggleButton, ToolBarLinkChoice.
• CalendarPaginator. The CalendarPaginator allows the user to browse through an assigned Calendar
UI element.
These toolbar elements are horizontally arranged in one row of the toolbar. The size and position of the
individual UI elements are automatically calculated. You can use the wrapping property to determine whether
a line break can be applied to the elements in a row.
Each individual element has the collapsible property, with which it can be hidden. If you have set at least one
of these elements to collapsible, a triangle symbol appears in the toolbar at runtime via which the user can
hide these elements. This is demonstrated by the following screenshots:
• collapsed
• not collapsed
You can create all elements as ToolBarRightItems. These are then arranged starting from the right.
ToolBarRightItems cannot be collapsed.

© 2008 SAP AG 149
UI Element Guide
It’s recommended to use the ToolBar inside the following elements:

• Group, Tab, Table, Tray
Properties
• design. Specifies the display style of the ToolBar on the screen. The design property is represented
by the enumeration type WDToolBarDesign and has the values:
emphasized Highlights the ToolBar.

standard Displays the ToolBar in the standard design.
• enabled. Specifies whether or not the ToolBar is activated. If you deactivate the ToolBar, all elements
of the ToolBar are deactivated. Some renderer implementations can ignore this behavior.
• wrapping. Specifies whether or not the ToolBar elements can be wrapped.
ToolBarButton
The ToolBarButton element (IWDToolBarButton) is a pushbutton in a toolbar.
• collapsible. Specifies whether the ToolBarButton can be collapsed.
• design. Specifies the design of the ToolBarButton element. The design property can be filled with
the following values and is represented by the enumeration type WDToolBarButtonDesign.
next Display of a toolbar button that refers to a subsequent step.

previous Display of a toolbar button that refers to a previous step.
standard Displays the toolbar button with default background and default text
color.
ToolBarButtonChoice
A ToolBarButtonChoice is a button that offers to choose among several options via a small triangle symbol,
as is illustrated in the following figure.
If the user clicks on the triangle symbol, a menu opens from which an action can be selected. When the user
has selected an action, this action is set to the button and can then be executed by the user. The
repeatSelectedAction property makes it possible that the last selected action remains on the button
after execution of an action:
Properties
• collapsible. Specifies whether the ToolBarButtonChoice can be collapsed.
• repeatSelectedAction. Determines that the last selected action remains assigned to the button as
long as there is no other one selected.
• selectedActionItem. Determines the selected action element.

© 2008 SAP AG 150
UI Element Guide
• text. Determines the labeling of the ToolBarButtonChoice.
ToolBarDropDownByIndex
The ToolBarDropDownByIndex element is a dropdown box in a toolbar
Properties
• collapsible. Specifies whether the ToolBar element can be collapsed. A little icon is displayed in a
ToolBar which contains those elements. When the user selects this icon, all toolbar elements with the
collapsible property set to true are hidden.
• displayAsText. Specifies, whether the ToolBarDropDownByIndex looks like a text if it has not the
focus.
• labelFor. This property enables you to assign the ToolBarDropDownByIndex element to another UI
element as a label.
• labelText. Specifies the label text.
• readOnly. Specifies whether the user can modify the selection in the toolbar dropdown list box.
following values and is represented by the enumeration type WDLeadSelectionChangeBehaviour.
interaction by the user but triggers the corresponding event. In this case, the event
handler must change the lead selection to enable the UI element to display the
data. This setting allows you to check the change of the lead selection.
• state. Describes the status of the dropdown list box. The data type of this property corresponds to the

required Indicates that value selection is mandatory by displaying an
asterisk..
inherit

• texts. Determines the content of the list entries.
• width. Specifies the width of the dropdown list box and can be specified in CSS units like em, ex,
ToolBarDropDownByKey
The ToolBarDropDownByKey represents a DropDownByKey element in a ToolBar. In addition to the
DropDownByKey element, it can be collapsed.

© 2008 SAP AG 151
UI Element Guide
Properties
• displayAsText. Specifies whether the ToolBarDropDownByKey looks like a text if it has not the focus.
• keyVisible. Specifies whether the keys are displayed with the texts in the ToolBarDropDownByKey.
• labelFor. This property enables you to assign the ToolBarDropDownByKey element to another UI
element as a label.
• readOnly. Specifies whether the user can modify the selection in the ToolBarDropdownByKey.
• selectedKey. Describes the key that specifies the selection of the ToolBarDropdownByKey.
interaction by the user but triggers the corresponding event. In this case, the
event handler must change the lead selection to enable the UI element to
display the data. This setting allows you to check the change of the lead
selection.
• state. Describes the status of the ToolBarDropdown list box. The data type of this property
corresponds to the enumeration type WDState. You can use the following values in the application:

required Indicates that value selection is mandatory.
• suggestValues. specifies whether suggestion is enabled, if the ToolBarDropDownByKey is bound to
data type that has a value help.
inherit

• width. Specifies the width of the dropdown list box and can be specified in CSS units like em, ex,
ToolBarInputField
ToolBarInputField represents an input field in a toolbar. It enables the user to enter or display a single-line
text in the toolbar.
Properties
• alignment. Specifies the horizontal alignment of the UI element in the grid. The default value of this
property is auto. The alignment property can take the following values and is represented by the list
type WDInputFieldAlignment:

© 2008 SAP AG 152
UI Element Guide
auto The alignment is specified by the usage of the UI element - for example, by the displayed
data type.
left The content is displayed left-aligned.
right The content is displayed right-aligned.
• collapsible. This property enables you to assign the ToolBarInputField element to another UI element
as a label.
• defaultDateRefId. specifies the Id of another input field, whose date is initialized with the value of this
ToolBarInputField, if it has no own value.
• displayAsText. Specifies whether the ToolBarInputField looks like a text if it hasn’t the focus.
• displayLabelAsDefault. Specifies whether the associated label’s text is displayed as default value of
this ToolBarInputField, if the value is null.
• length. Determines the maximum number of characters to be displayed in the input field.
• passwordField. Boolean value that controls the display of entered characters on screen. If the value
is true, the entered characters on screen are echoed with an asterisk (*). This attribute is usually
used for password input fields.
• readOnly. Specifies whether the input field can be edited or only read. If the value is true, the
displayed text can only be read.
• state. state is not supported. The state required will not be visualized.
inherit

• value. Specifies the character string displayed in the input field area. This property must be bound to a
context attribute.
• width. Determines the width of the input field that you can specify in CSS sizes, such as em, ex, pixels
Events
• onChange. This event is triggered when the InputField loses focus and the value has been changed.
ToolBarLinkToAction
ToolBarLinkToAction is a LinkToAction especially for a ToolBar. You have the option to collapse the element.

© 2008 SAP AG 153
UI Element Guide
Properties
• design. specifies the design of the ToolBarLinkToAction. The design property can take the following
• textDirection. Specifies the text direction and allows you to use subordinated UI elements for texts in
inherit

not wrapped.
If the value of this property is false, the link text is not wrapped.
Events
• onAction. The event onAction is triggered when the user clicks the ToolBarLinkToAction.
ToolBarLinkToURL
ToolBarLinkToURL is a LinkToURL especially for a ToolBar. You have the option to collapse the element.
Properties
• activateAccessKey. Indicates whether access key for this control is activated
• design. specifies the design of the ToolBarLinkToURL. The design property can take the following

© 2008 SAP AG 154
UI Element Guide

• hotkey. Specifies the key combination that triggers the onAction event.
• reference. Describes the address of the Web page to be opened.
• target. Specifies the browser window in which the page is to be opened. You can specify the name of
the target window yourself or use the following values, which comply with the W3C-HTML standard:
{ ""
The page is opened in a new window without a name. This is the default value.
• textDirection. Specifies the text direction and allows you to use subordinated UI elements for texts in
inherit

not wrapped.
ToolBarSeparator
The ToolBarSeparator element is used for the optical separation of ToolBar elements within a toolbar.
Properties
• visible. Specifies the visibility of the UI element. The default value of this property is visible.
ToolBarToggleButton
A ToolBarToggleButton is a ToggleButton especially for a ToolBar. In addition it can be collapsed.
Properties
• checked. Specifies whether or not the ToolBarToggleButton is toggled.

© 2008 SAP AG 155
UI Element Guide
• checkedImageSource. Specifies the Web address of the icon that appears when the
ToolBarToggleButton is toggled.
• design. The design property can be filled with the following values and is represented by the
enumeration type WDToggleButtonDesign.
standard Displays the ToolBarToggleButton with the default colors for the background and
text. When values are assigned to the properties imageSource and
checkedImageSource, the corresponding icon is displayed.
toggle Displays the ToolBarToggleButton with a triangle symbol:
If the ToolBarToggleButton is toggled, the triangle points down:
If you select this value, no further icons should be assigned.
• imageSource. Specifies the Web address (URL) of the graphic to be displayed.
• text. Specifies the text to be assigned to the ToolBarToggleButton.
• textDirection. Specifies the text direction and allows you to use the toggle element for texts in
inherit

• width. Specifies the width of the ToolBarToggleButton. You can specify the width in CSS units like em,
ex, pixel, or percentage.
Events
The onToggle event is triggered when the ToolBarToggleButton is toggled. The parameter is of the type
boolean and transfers the new status.
onToggle IWDAbstractToggle (boolean checked)
ToolBarLinkChoice
A ToolBarLinkChoice is a button inside a tool bar that provides a selection of different options via a small
triangle symbol.
Example of a visual display:
Properties
• collapsible. Specifies whether the ToolBarLinkChoice can be collapsed
• text. describes the text for the ToolBarLinkChoice

© 2008 SAP AG 156
UI Element Guide
Tree
Hierarchies defined in the context can be visualized using the Tree UI element. The hierarchy to be
displayed is defined in the context. You can describe this context structure in two ways:
• If the number of levels is not known at design time, a recursive node is used
• If the number of levels is already specified at design time, a recursive node is not used.
The following graphic shows how the UI element is displayed:
The Tree UI element is bound against the top-level context node to be displayed.
You use nodes (TreeNodeType elements) or leaves (TreeItemType-Elemente) to specify
which subnodes are to be displayed and which context atttributes are to be displayed on
these subnodes as a text or tooltip. The dataSource property of the TreeNodeType
element or TreeItemType element is bound to the corresponding context node and the
properties text, tooltip, and so on, are bound to the corresponding context attributes on
this context node.
TreeItemType elements cannot have children. Therefore, they are always displayed as
leaves. They are used when it is decided at design time that the corresponding node does not have children.
When using TreeNodeType elements, the decision of whether to use children is dynamically made at
runtime.
Hierarchy levels defined in the context cannot be left out when displaying the UI element. For
example, a TreeNodeType element that is bound to the Orders must also exist to display the
items for the hierarchy Customers → Orders → Items, which is defined in a context.
All nodes that are not directly below the context root node must be non-singleton nodes,
because all elements should be displayed in a tree regardless of the lead selection.
Properties
• defaultItemIconAlt. This property is deprecated. Use tooltip instead.
• defaultItemIconSource. defines the path to the icon source of the graphic to be displayed for a leave.
• defaultNodeIconAlt. This property is deprecated. Use tooltip instead.
• defaultNodeIconSource. defines the path to the icon source of the graphic to be displayed for a
node.
• minHeight. Specifies the minimum height of the tree.
• rootText. Describes the text for labeling the root node.
• rootVisible. Specifies whether the root node of the tree structure is visible.
manual Specifies that the UI element does not change the lead selection after an interaction
by the user but triggers the corresponding event. In this case, the event handler must
change the lead selection to enable the UI element to display the data. This setting
allows you to check the change of the lead selection.
• title. Describes the tree header.
• titleVisible. Specifies whether the tree label is visible.

© 2008 SAP AG 157
UI Element Guide
• width. Specifies the width of the tree and can be specified in CSS units like em, ex, pixels, or
percentage.
TreeNodeType
The TreeNodeType object describes a tree node type that, unlike the TreeItemType, can contain additional
tree nodes. They represent the nodes of the Tree.
• expanded. Specifies whether or not a tree node can be collapsed or expanded. The binding of this
property is not mandatory, however, we recommend the binding of the property to a context attribute.
In this case, this context attribute must be contained in a context node to which the dataSource
property is bound. You can now specify the initial expansion status of the tree node.
• hasChildren. Specifies whether or not a tree node has children. If you define an onLoadChildren
event handler, the corresponding tree element is displayed as a tree node by default – that is, the tree
element has an expansion symbol that can be used to expand or collapse the tree. If you know
beforehand or during the LoadOnDemand that a tree element does not contain children, you can set
the hasChildren property to false. The default value of this property is true. The tree element is then
displayed as a leave without expansion symbol.
The hasChildren property is only evaluated if no data for children of the corresponding tree
element is available. Tree elements are always displayed as tree nodes if data for their children
is available.
Events
• onAction (String path). This event is triggered, if the user selects a node.
• onLoadChildren (String path). This event is triggered, if the data for a compressed tree node that
initially has no children is read from the back end only if required. The corresponding event handler is
called when a tree node without data for its children is expanded. The Web Dynpro application can use
the event handler to read data for the children of the expanded tree node and add this data to the tree.
The event handler of the event onLoadChildren is only triggered during the expansion if no
data for the children of the expanded node exists. If the application adds data during the
expansion, the event is not triggered when the tree node is opened again.
Since the introduction of the generic event parameter nodeElement the parameter path is not needed
anymore and is only available for compatibility reasons.
onDrop (String data, String mimeType, int offset, String path, String tags
This event is triggered when the user drops an object onto this TreeNodeType. The parameters are:
{ offset: the position relative to the index, the user has dropped the object onto.
path: The tree node is described by a path to the node element
representing it. Declare an action and event handler parameter of type
IWDNodeElement (or one of your own node element classes) along with a
suitable parameter mapping; then the path will be automatically
transformed into a node element instance.
Note: when the tree is empty, no drop will be possible.

© 2008 SAP AG 158
UI Element Guide
tags: the tags defined for the drag source
TreeItemType
The TreeItemType object describes a tree node type that, unlike the TreeNodeType, cannot contain
additional tree nodes. They represent the leaves of the Tree.
Events
• onAction (String path). This event is triggered when the user selects a node of this type. parameter
is the path to the relevant context element.
• onDrop (String data, String mimeType, int offset, String path, String tags)
This event is triggered when the user drops an object onto this TreeNodeType. The parameters are:
{ offset: the position relative to the index, the user has dropped the object onto.
path: The tree node is described by a path to the node element representing it. Declare an action
and event handler parameter of type IWDNodeElement (or one of your own node element
classes) along with a suitable parameter mapping; then the path will be automatically
transformed into a node element instance. Note: when the tree is empty, no drop will be
possible.
tags: the tags defined for the drag source
Data Binding of a Tree UI Element

The Tree UI element displays hierarchical structures. Each Tree UI element contains a number of tree nodes
either of the type TreeNodeType or TreeltemTyp. They describe which data is displayed below the top-level
context node. The context node is bound by the Tree property dataSource. The only difference between
the TreeNodeType element and the TreeltemType element is that the tree node type TreeNodeType can
have children, whereas the type TreeltemType can display the leaves of a tree, but cannot have children.
The hierarchical structure of the tree UI element must be represented in the context. This is possible by
specifying a certain number of levels in the context at design time. For example: Customer Æ Order Æ
OrderItems.

© 2008 SAP AG 159
UI Element Guide
Recursive Nodes – Basis for Data Binding of a Tree
Design Time Runtime

Folder
Folder
Folder
Folder Document
Document
Folder Folder Document
Document
Node
Element
Or you can create a recursive node in the context. In this case, a virtual node points to a parent node at
design time. At runtime, a specific property of the context node allows to add non-singleton child nodes that
need to be of the same type as the ones they are pointing to. In so doing, you specify – at design time - a
context structure with recursive nodes that can have any number of levels at runtime.
Code Example for Creation of a Tree UI Element

The following example shows the data binding of a Tree UI element to a context structure for which a
determined number of levels is specified at design time.
Prerequisites
You created a Web Dynpro application and within a Web Dynpro component you created the view
„NonRecursiveTree“, in which you can add a tree UI element and its sub-elements TreeNodeType or
TreeItemType.
Procedure
Tree Creation in the NonRecursiveTree View

...
1. You edit the view by double-clicking the NonRecursiveTree view or by choosing Edit in the context
menu of the view.
2. At the left bottom edge of the SAP NetWeaver Developer Studio appears the outline window with the
default container “RootUIElementContainer”. This container can be filled with UI elements.
3. Right-click the Insert Child menu item. A new window appears. Select a UI element of the type Tree
from the dropdown list box and specify a name (ID) for the selected UI element. You can use this ID to
call the UI element. You can also create a UI element in the View Designer using little icons, which you
can drag and drop directly into the View Designer.
4. Choose Finish.
5. After inserting the UI element into the view you can edit the properties of the individual UI elements in
the properties window. If you have already defined the context structure for this view, you can assign
context nodes and context attributes to these UI elements in the properties window. To create a
complete Tree UI element, use the procedure described above: You add the required subelements of

© 2008 SAP AG 160
UI Element Guide
the type TreeNodeType and/or TreeltemType to the Tree UI element, which then represent the
complete tree. See the graphic below on the left:
Refer to item 5 under Tree Creation in the Refer to item 4 under Context Creation
NonRecursiveTree View Structure of the context that provides the data
Creation of the Tree_0 UI element in the and must support the creation of the tree UI
NonRecursiveTree view. element.
Context Creation
Each view contains a corresponding context that provides the data.
...
1. Choose the Context tab in the right editor area.

2. Right-click Context. A context menu appears in which you can create the value nodes and value
attributes to create the context structure.
3. Choose New → Value Node. For example, enter the name “Customer” for this context node and
specify the context properties of the node in the properties window. Use the values listed in the graphic
below.
Confirm by choosing Finish

4. Repeat this procedure until the context structure looks like the one in the graphic.

© 2008 SAP AG 161
UI Element Guide
You can also create the context structure before the creation of the view. In this case, you can
already bind the bindable properties of the UI element to the context nodes and context
attributes while inserting the UI elements.
Data Binding
To display the data in a UI element, the appropriate properties of the UI element must be bound to the
context nodes or context attributes. This requires the following steps:
sss
1. Select the Layout tab and edit the properties of the UI element Tree_0 and its subelements.
2. Navigate to a property and choose the graphic in the properties window. The button appears.
It enables you to access the Context Viewer dialog box.
3. Select a context node or the context attribute in the dialog box.
4. Confirm by choosing OK.
5. The UI element property is now bound to a context element. The following table lists the main data
binding relationships of the Tree example Tree_0. In the same way, the individual associated
subelements TreeNodeType and TreeItemType are bound to the corresponding context nodes and
context attributes.
Objekt Objekt- ID Datenbindung Pfad innerhalb der Context-Struktur
Tree Tree_0 dataSource NonRecursiveTree.Customer

property → value
node customer
TreeNodeType Customer dataSource NonRecursiveTree.Customer
property → value
node customer
TreeNodeType Customer text property → NonRecursiveTree.Customer.id
value attribute id
TreeItemType PurchaseItem dataSource NonRecursiveTree.Customer
property → value
PurchaseOrder.purchaseItem
node
purchaseItem
TreeItemType PurchaseItem text property → NonRecursiveTree.Customer
value attribute PurchaseOrder.purchaseItem.text
text
TreeNodeType PurchaseOrder dataSource NonRecursiveTree.Customer
property → value
PurchaseOrder
node
PurchaseOrder
TreeNodeType PurchaseOrder text property → NonRecursiveTree.Customer.PurchaseOrder.text
value attribute
text
TreeNodeType Order dataSource NonRecursiveTree.Customer.Order
property → value
node Order
TreeNodeType Order text property → NonRecursiveTree.Customer.Order.id
value attribute id
TreeItemType Item dataSource NonRecursiveTree.Customer.Order.Item

property → value
node Item

© 2008 SAP AG 162
UI Element Guide
TreeItemType Item text property → NonRecursiveTree.Customer.Order.Item.id

value attribute id
Filling Context with Data

The wdDoInit method in the controller implementation enables you to fill the context of a view with data.
The wdDoInit method is a Hook method whose source code is executed when the view controller is
initialized.
...
1. Select the Implementation tab. The implementation of the controller is generated directly afterwards.
2. The source code that is to be called when initializing the controller can be inserted into the user coding
area that starts with the character string //@@begin wdDoInit() and ends with the character
string //@@end. The source code in the wdDoInit method for this example is:
/** Hook method called to initialize controller. */
public void wdDoInit()
{
//@@begin wdDoInit()
IPrivateNonRecursiveTree.IContextElement el =
wdContext.currentContextElement();
el.setSelectedCustomerIdx(-1);
el.setSelectedOrderIdx(-1);
el.setSelectedItemIdx(-1);
el.setSelectedPurchaseOrderIdx(-1);
el.setSelectedPurchaseItemIdx(-1);
el.setIdx(0);
IPrivateNonRecursiveTree.ICustomerNode customerNode =
wdContext.nodeCustomer();
for (int i = 0; i < 3; i++) {
IPrivateNonRecursiveTree.ICustomerElement customer =
customerNode.createCustomerElement();
customer.setId("Customer No:" + i);
customerNode.addElement(customer);
IPrivateNonRecursiveTree.IOrderNode orderNode =
customer.nodeOrder();
for (int j = 0; j < 3; j++) {
IPrivateNonRecursiveTree.IOrderElement order =
orderNode.createOrderElement();
order.setId("Order Id:" + i + ":" + j);
order.setText("Order Text:" + i + ":" + j);
orderNode.addElement(order);
IPrivateNonRecursiveTree.IItemNode itemNode =
order.nodeItem();
for (int k = 0; k < 5; k++) {
IPrivateNonRecursiveTree.IItemElement item =
itemNode.createItemElement();
item.setId("Item Id:" + i + ":" + j + ":" +k);
item.setText("Item Id:"+ i + ":" + j + ":" +k);
itemNode.addElement(item);
}
}
IPrivateNonRecursiveTree.IPurchaseOrderNode purchaseOrderNode =
customer.nodePurchaseOrder();
for (int j = 0; j < 3; j++) {
IPrivateNonRecursiveTree.IPurchaseOrderElement purchaseOrder =
purchaseOrderNode.createPurchaseOrderElement();
purchaseOrder.setText("Purchase Order:" + i + ":" + j);
purchaseOrderNode.addElement(purchaseOrder);
IPrivateNonRecursiveTree.IPurchaseItemNode
purchaseItemNode =

© 2008 SAP AG 163
UI Element Guide
purchaseOrder.nodePurchaseItem();
for (int k = 0; k < 5; k++) {
IPrivateNonRecursiveTree.IPurchaseItemElement
purchaseItem =
purchaseItemNode.createPurchaseItemElement();
purchaseItem.setText("Purchase Item Id:"+ i + ":" +
j + ":" +k);
purchaseItemNode.addElement(purchaseItem);
}
}
}
//@@end
3. }
Calling the Web Application

Before you call the Web application, you must build the Web Dynpro project and install the Web application
on the SAP J2EE Engine. Build and deploy the application and call it by choosing Run.
You can call the Web application using a Web address in the browser. The following graphic shows the
resulting tree in the browser:
Result
The resulting tree displays three customers (No: 0 to No: 2), each of them containing:

© 2008 SAP AG 164
UI Element Guide
• Three purchase orders (0:0 to 0:2) with five purchase item IDs (0:1:0 to 0:1:4)
• Three orders (0:0 to 0:2) with five item IDs (0:1:0 to 0:1:4)
TriStateCheckBox
A TriStateCheckBox is an extension of a checkbox which can have the values true and false and also the
state undecided. The UI element consists of a graphic with text. The checkmark in the box indicates that
the option is selected and the value is set to true, and an asterisk indicates the status undecided, as the
following graphic illustrates:
The Web Dynpro class TriStateCheckBox which implements the IWDTriStateCheckBox interface is the base
class of checkboxes which can have three different statuses.
Properties
• activateAccessKey
Indicates whether access key for this control is activated.
• explanation
specifies the explanation text. explanation is maintained by the documentation developer in the
Web Dynpro Authoring environment.
• State
Describes the status of the TriStateCheckBox. Checked is represented by the enumeration type
WDTriState and can have the following values:
{ true
{ undecided
{ false
• readOnly
Specifies whether or not the user can check the checkbox.
• State
The data type of this property corresponds to the enumeration type WDState. You can use the
following values in the application:

required Specifies whether the entered value is required. A red
asterisk appears next to the text.
• Text
Specifies the text that is associated with the checkbox graphic and displayed to the right of the box.
• textDirection
Specifies the text direction and allows you to read texts in languages which require a specific text
direction. The textDirection property can be filled with the following values and is represented by
the enumeration type WDTextDirection.
inherit

© 2008 SAP AG 165
UI Element Guide
Events
• onToggle (WDTriState newChecked, WDTriState oldChecked)
The onToggle event is triggered when the user clicks the TriStateCheckBox. The parameters are the
old and the new status.
ValueComparison
The UI element ValueComparison (IWDValueComparison) can be used to compare the graphic display of
several values. You can use the properties boxValue, markerValue and barValue to visualize the
relation of up to three comparison values. In addition, you can set two threshold values and thus define three
differently colored areas.
Typically, the ValueComparison element is used within a table. You can visualize the comparison of up to
three values on a row-by-row basis.
The ValueComparison-Element in its representation in a table column is always justified to the left.
Properties
• barValue
Specifies the width of the bar.
• boxValue
Specifies the width of the box.
• colorAboveThreshold
Specifies the color of the bar above the upper threshold value.
• colorBelowThreshold
Specifies the color of the bar below the lower threshold value.
• colorBetweenThresholds
Specifies the color between the threshold values.

© 2008 SAP AG 166
UI Element Guide
colorAboveThreshold, colorBelowThreshold and colorBetweenThresholds are of

enumeration type WDBarColor and can accept the following values:
{ critical
{ negative
{ neutral1
{ neutral2
{ neutral3
{ positive
• lowerThresholdValue
Specifies the lower threshold value.
• markerType
Specifies the type of the marker line. markerType is of enumeration type WDMarkerType and can
accept two different values:
{ critical for a critical value and
{ neutral for a neutral value.
• markerValue
Specifies the position of the marker line.
• maxValue
Defines a maximum value, which is needed if you want to display several ValueComparison elements,
for example, in a table. The maxValue property allows you to define a common maximum value
which allows the comparison between the different ValueComparison elements.
• text
Specifies the text of the ValueComparison element.
• upperThresholdValue
Specifies the upper threshold value.
• width
Specifies the width of the ValueComparison element in pixels.

© 2008 SAP AG 167
UI Element Guide
Copyright
© 2008 SAP AG. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG.
The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries,
zSeries, System i, System i5, System p, System p5, System x, System z, System z9, z/OS, AFP, Intelligent Miner, WebSphere,
Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, POWER5+, OpenPower and PowerPC are trademarks or registered trademarks of
IBM Corporation.
Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems
Incorporated in the United States and/or other countries.
Oracle is a registered trademark of Oracle Corporation.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of
Citrix Systems, Inc.
HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts
Institute of Technology.
Java is a registered trademark of Sun Microsystems, Inc.
JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by
Netscape.
MaxDB is a trademark of MySQL AB, Sweden.
SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All
other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves
informational purposes only. National product specifications may vary.
These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP
Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or
omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the
express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an
additional warranty.
These materials are provided “as is” without a warranty of any kind, either express or implied, including but not limited to, the implied
warranties of merchantability, fitness for a particular purpose, or non-infringement.
SAP shall not be liable for damages of any kind including without limitation direct, special, indirect, or consequential damages that may
result from the use of these materials.
SAP does not warrant the accuracy or completeness of the information, text, graphics, links or other items contained within these
materials. SAP has no control over the information that you may access through the use of hot links contained in these materials and
does not endorse your use of third party web pages nor provide any warranty whatsoever relating to third party web pages.
Any software coding and/or code lines/strings (“Code”) included in this documentation are only examples and are not intended to be
used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of
certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors
or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.

© 2008 SAP AG 168

UI Element Guide

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

UI Element Guide

Diunggah oleh

Hak Cipta:

Format Tersedia

UI Element Guide

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

Common UI Element Properties

• contextMenuId. Describes the ID that identifies the context menu you

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

PSpecifying the Image Source

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

Choosing the Layout

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

Column 1 Column 2 Column 3

Default Behavior of Different UI Elements

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

ColumnLayoutData and ColumnLayoutHeadData

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

large Additional horizontal distance of 31 pixels

largeWithRule Additional horizontal distance of 31 pixels

Medium Additional horizontal distance of 17 pixels

mediumWithRule Additional horizontal distance of 17 pixels

none No additional distance

xLarge Additional horizontal distance of 63 pixels

Description of GridLayout Properties

The following diagram illustrates how the GridLayout properties work:

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

for property textDirection.

MatrixData and MatrixHeadData

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

Value Appearance Description

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

Value Appearance Description

largeWithRule Additional horizontal distance of 31 pixels with a

Medium Additional horizontal distance of 17 pixels

mediumWithRule Additional horizontal distance of 17 pixels with a

none No additional distance

xLarge Additional horizontal distance of 63 pixels

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

xLargeWithRule Additional horizontal distance of 63 pixels with a

RowData and RowHeadData

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

Value Appearance Description

lrNoPad Specifies the distance to the top edge (2 pixels) and

lrPad Specifies the distance to the top edge (2 pixels), the

rPad Specifies the distance to the top edge (2 pixels), the

large Additional horizontal distance of 31 pixels

largeWidthRule Additional horizontal distance of 31 pixels with a

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

medium Additional horizontal distance of 17 pixels

mediumWithRule Additional horizontal distance of 17 pixels with a

none No additional distance

xLarge Additional horizontal distance of 63 pixels

You can fill the panels using

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

Implementing Drag and Drop

What does the user do?

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

Creating the UI elements

1. To define a drag source, insert a DragSourceInfo into an ItemListBox.