Webdynpro Elements

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2008 SAP AG 1

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.

http://help.sap.com/�

http://help.sap.com/saphelp_nwce711/helpdata/en/9f/656442a1c4de54e10000000a155106/frameset.htm�

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

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

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

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

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

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.

http://help.sap.com/saphelp_nwce711/helpdata/en/46/54bbe01af808e9e10000000a114a6b/frameset.htm�

http://help.sap.com/saphelp_nwce711/helpdata/en/46/54bbe01af808e9e10000000a114a6b/frameset.htm�

http://help.sap.com/saphelp_nwce711/helpdata/en/46/55c841d202c317e10000000a155106/frameset.htm�

http://help.sap.com/javadocs/nwce/current/wdr/index.html�

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

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.

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.

UI Element Guide


Column 1 Column 3Column 2

View 1

View 2

View 3

MeltingGroup

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.

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 design

Short description

UI Element Guide


large

Additional horizontal distance of 31 pixels

largeWithRule

Additional horizontal distance of 31 pixels with a vertical line

Medium


mediumWithRule


none

No additional distance

xLarge Additional horizontal distance of 63 pixels

xLargeWithRule Additional horizontal distance of 63 pixels with a vertical line

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:

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.

Description of 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. 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

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:

UI Element Guide


Value Description


fill1 The color corresponds to value primarycolor of property design in the Group UI element. *)

fill2 The color corresponds to value secondarycolor of property design in the Group UI element. *)

fill3 This color corresponds to the color value of the third level of a Tree UI element. *)





• 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:

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.




forcedLeft The text is always left-justified, regardless of whether the value is ltr or rtl for property textDirection.

forcedRight The text is always right-justified, regardless of whether the value is ltr or rtl for property textDirection.



right Right-justified alignment. This value is deprecated. Use forcedRight instead. • 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


large


largeWithRule


Medium


mediumWithRule


none



UI Element Guide



• 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:






forcedRight The text content is always right-justified, regardless of whether the value is ltr or rtl for the textDirection property.

justify Justified - This value allows forced justification within a row layout cell.


right Right-justified alignment. This value is deprecated. Use forcedRight instead. • 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

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 layouts to create grid net lines.

fill1 The color corresponds to value primarycolor of property design in the Group UI element.

fill2 The color corresponds to value secondarycolor of property design in the Group UI element.

fill3 This color corresponds to the color value of the third level of a Tree UI element.




• 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 .

large


largeWidthRule


UI Element Guide


medium


mediumWithRule


none




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.

Begin End

Top

InnerTop

CenterInner Begin

InnerEnd

Bottom

InnerBottom

You can fill the panels using

• individual containers or • inserting views using ViewContainerUIElement.

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.

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

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:

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.

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.

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.


• defaultButtonId. Specifies the ID of the assigned default button. • 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. • 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.



none Scrolling within the text context is not possible.

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.



• activateAccessKey. Indicates whether access key for this control is activated. • 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.



none Scrolling within the text context is not possible.

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

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 • accessibilityDescription. When accessibility is activated, the assigned text is added to the tooltip.


• activateAccessKey. Indicates whether access key for this control is activated. • defaultButtonId. Specifies the ID of the assigned default button. • 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. • 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.



none Scrolling within the text context is not possible. • width. Determines the width of the Tray. You can specify this in CSS sizes, such as em, ex, pixels or

percentage values.

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:

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

requires a category axis.

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

UI Element Guide


line A Line Chart control, displays data series with connecting lines and requires a category axis.

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).

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.

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.

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.

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.

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

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.

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.

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.

Property Descriptions • 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.

• eventId. Enables you to define an ID that can determine from which object the event has been 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.

• label. This property is used to specify an optional text to be displayed for a point in a business graphic.

• tooltip. Describes a note that is displayed when the user places the cursor on the area of the data 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

UI Element Guide


Property Descriptions • 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. • eventId. Enables you to define an ID that can determine from which object the event has been

triggered. • label. This property is used to specify an optional text to be displayed for a point in a business

graphic. • tooltip. Describes a note that is displayed when the user places the cursor on the area of the data

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.

Property Descriptions • 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:

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.

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.


ltr The text runs from left to right.

rtl The text runs from right to left

The default value for this property is inherit. • 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:

UI Element Guide


Properties • activateAccessKey. Indicates whether access key for this control is activated. • 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.

UI Element Guide




• 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.

UI Element Guide




• 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. • legendId. Specifies the ID of the assigned legend. • showWorkingTime. Determines whether the calendar should display differences between working

times and free times. • timeZone. Determines the time zone which all entries are displayed. If no time zone is given, the

calendar uses the system time zone.

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.

UI Element Guide




• 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. • firstVisibleDate. Specifies which date is displayed as the first date. • 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. • legendId. Specifies the ID of the assigned legend. • 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. • timeZone. Determines the time zone in which entries are displayed. If no time zone is specified, the

calendar uses the system time zone.

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.

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.



• 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.

• firstVisibleDate. Specifies which date is displayed as the first date. • firstVisibleTime. Specifies which time is displayed as the first time • legendId. Specifies the ID of the assigned legend. • scrollable. Defines whether the CalendarWeekView can be scrolled. Turning off the Scrolling the

calendar control might push the surrounding container control. • showWorkingTime. Determines whether the calendar should display differences between working

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.

• timeZone. Determines the time zone in which entries are displayed. If no time zone is specified, the calendar uses the system time zone.

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.



• contentHeight. Specifies the height of the content part of the CalendarWeekView. You can specify the height in CSS units like em, ex or pixels.

• firstVisibleDate. Specifies which date is displayed as the first date. • firstVisibleTime. Specifies which time is displayed as the first time • legendId. Specifies the ID of the assigned legend. • 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.

• showWorkingTime. Determines whether the calendar should display differences between working 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.

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.

• timeZone. Determines the time zone in which entries are displayed. If no time zone is specified, the calendar uses the system time zone.

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.

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.

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.

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

property is true, the icon is displayed to the left of the text. • 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.



rtl The text runs from right to left. The default value for this property is inherit.

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.

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 developer in the Web Dynpro Authoring environment.

• 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



required Specifies whether the entered value is required. • 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.



The default value for this property is 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.

UI Element Guide




• activateAccessKey. Indicates whether access key for this control is activated. • 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



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





• 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.

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 Friday with the ordinal number defined in java.util.Calendar.

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.

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.

Description of Properties • 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:

UI Element Guide


Properties • activateAccessKey. Indicates whether access key for this control is activated. • displayAsText. Specifies, whether the InputField looks like a text if it has not the focus. • explanation. specifies the explanation text. explanation is maintained by the documentation

developer in the Web Dynpro Authoring environment. • 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.

• size. This property is deprecated and can no longer be used. • 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.


The default value for this property is inherit. • 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.

UI Element Guide


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

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

developer in the Web Dynpro Authoring environment. • 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. • size. This property is deprecated and can no longer be used. • 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.




UI Element Guide


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

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.

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 • activateAccessKey. Indicates whether access key for this control is activated. • data. This property is deprecated, use resource instead. • explanation. specifies the explanation text. explanation is maintained by the documentation

developer in the Web Dynpro Authoring environment. • 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 following values and is represented by enumeration type WDTextDirection.



The default value for this property is 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);

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 Extension

MIME Type acc. W3C Attachment

APPLET "jar" "application/x-java" true CSS "css" "text/css" false DOC "doc" "application/vnd.ms-word"

"application/x-msword" false

FLASH "swf" "application/x-shockwave-flash"

false

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-

powerpoint" "application/x-mspowerpoint"

false

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" "application/x-msexcel"

false

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.

• 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.

• 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.

• imageSource. defines the path to the image source. • 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.



The default value for this property is 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.

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.

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.

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.

http://www.adobe.com/flex�

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]

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

and can take the following values: 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.

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

blockquote (PCDATA | Heading | Block | List)* Quotation block

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

http://www.w3.org/1999/xhtml�

UI Element Guide


li (PCDATA | Flow)* List item

Hypertext Module

Element Minimal Content Model Description

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: Element Minimal Content Model Description

formattedText (PCDATA | Heading | Block | List | Inline)* Root element

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

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 The text direction is inherited from the parent element. The text 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,

ex, pixels or percentage values.

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 .

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 or rtl for the textDirection property.



right Right-justified alignment. This value is deprecated. Use forcedRight instead. 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 The text direction is inherited from the parent element. The text 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.

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:

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:

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)

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.

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.

Description of Properties • 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 innermost surrounding layout cell that is enabled to act as a drag source can then be grabbed by this 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.


forcedRight The text content is always right-justified, regardless of whether the value is ltr or rtl for

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. • explanation. determines the explanation text. explanation is maintained by the documentation

developer in the Web Dynpro Authoring environment. • 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.

• size. This property is deprecated and can no longer be used. • state. Describes the state 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, 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.


UI Element Guide



The default value for this property is inherit. • 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

http://help.sap.com/javadocs/nwce/current/ddic/com/sap/typeservices/ISimpleValueServices.html�

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.

UI Element Guide


Properties • activateAccessKey. Indicates whether access key for this control is activated. • dataSource. This property is used to specify the data source. You can use it to specify the path to the

context node providing the data. • descriptiveText. This property defines a descriptive text that is displayed within the ItemListBox

beside the text. • explanation. determines the explanation text. explanation is maintained by the documentation

developer in the Web Dynpro Authoring environment. • 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.



The default value for this property is 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 textDirection property can be filled with the following values and is represented by the listing type WDTextDirection.



The default value for this property is 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.

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





• 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.

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.

Description of Properties • imageSource. defines the path to the image source. • semantics. Specifies the color of the LegendItem. The semantics 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 LegendItem. • textDirection. Specifies the text direction and allows you to use a LegendItem 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.

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.

Description of Properties • dataSource. Determines the context node that stores the MultipleLegendItem. • imageSource. defines the path to the image source. • 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.

Description of Properties • 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


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 • activateAccessKey. Indicates whether access key for this control is activated. • 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. • 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. • 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




rtl The text runs from right to left.

The default value for this property is inherit. • 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.

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 • activateAccessKey. Indicates whether access key for this control is activated. • 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. • imageFirst. Defines the position of the icon in relation to the corresponding text. If the value of this


units like em, ex, pixels, or percentage. • imageSource. defines the path to the image source. • 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. • size. This property is deprecated. • 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. _self is no longer supported. Use exit plugs instead and specify the URL there.

• 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 following values and is represented by the enumeration 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. • 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.

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.

• wrapping. Indicates whether or not the link text is wrapped. If the initial value is false, the link text is 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 • activateAccessKey. Indicates whether access key for this control is activated. • imageSource. defines the path to the image source. • 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.

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.

UI Element Guide




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:

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 PopupMenu

Description

LinkToURL LinkToAction

For interactive elements, a static icon indicates the existence of a PopupMenu

Image ProgressIndicator TextView Header of TableRowGrouping

An orange triangle appears for the PopupMenu when the user places the cursor on the image.

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

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:

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.

UI Element Guide


MenuMenu

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 languages which require a specific text direction. The textDirection property can take the following values and is represented by enumeration type WDTextDirection.



The default value for this property is 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.

Description of Properties • 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. • hotkey. specifies the key combination that triggers the onAction event. • imageSource. defines the path to the icon source.

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




The default value for this property is 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.

• enabled. This property specifies whether or not an event can be triggered by a user interaction. • 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 textDirection property can be filled with the following values and is represented by the listing type WDTextDirection.



The default value for this property is inherit. • visible. specifies whether the MenuCheckBox is visible.

Events The event is triggered when the checkbox is switched. The parameter is the new status.

Name Class Parameter

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.

UI Element Guide


Properties • enabled. This property specifies whether or not an event can be triggered by a user interaction. • 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 textDirection property can be filled with the following values and is represented by the listing type WDTextDirection.



The default value for this property is inherit. • visible. Specifies whether the MenuRadioButton is visible.

Events The event onSelect is triggered, if the user selects the MenuRadioButton.

Name Class Parameter

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]

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)

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 →

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 or percentage values.

• 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.

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) {

https://help.sap.com/javadocs/nwce/current/wdr/index.html?com/sap/tc/webdynpro/clientserver/uielib/officecomp/api/IWDOfficeControl.html�

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

https://www.sdn.sap.com/irj/sdn/javadocs�

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){ mmger.reportException("could not create file: " + envException.getMessage(), false); } catch (WDIOSFactoryException facException){ mmger.reportException("could not create file: " + 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.

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:

begin end

top

Inner top

centerInner begin

Inner end

bottom

Inner 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.

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 following values and is represented by enumeration type WDTextDirection.



rtl The text runs from right to left. The default value is inherit. 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

https://help.sap.com/javadocs/nwce/current/wdr/index.html?com/sap/tc/webdynpro/clientserver/uielib/pattern/api/IWDPageLayout.html�

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.



The default value for this property is 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:

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.

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 2

for(int i =0; i<3; i++) {

IPrivatePatternUIElementsView.IItemSourceElement ivse = 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

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.



• design. The design property can take the following values and is represented by enumeration type WDPatternContainerDesign.

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 The text direction is inherited from the parent element. The text direction is therefore the same as in the parent element.


The default value is inherit. • 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.

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.



• activateAccessKey. Indicates whether access key for this control is activated. • design. The design property can take the following values and is represented by enumeration type

WDPatternContainerDesign.

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. • design. The design property can take the following values and is represented by enumeration type

WDPatternContainerDesign.

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.

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:

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

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



• 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.

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 values and is represented by enumeration type WDTextDirection.



The default value for this property is inherit. • tooltip. Describes a note for the UI element that is displayed when the user places the cursor on the

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 values and is represented by enumeration type WDTextDirection.



UI Element Guide


The default value for this property is inherit. • tooltip. Describes a note for the UI element that is displayed when the user places the cursor on the

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.

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 • activateAccessKey. Indicates whether access key for this control is activated. • explanation. determines the explanation text. explanation is maintained by the documentation

developer in the Web Dynpro Authoring environment. • 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 represented by enumeration type WDTextDirection. The default value for this property 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 • activateAccessKey. Indicates whether access key for this control is activated. • 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.

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 which require a specific text direction. Property textDirection can take the following values and is represented by enumeration type WDTextDirection.



The default value for this property is inherit. • width. Specifies the width of the UI element that you can specify in CSS sizes, such as em, ex, pixels


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.


• activateAccessKey. Indicates whether access key for this control is activated. • 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.

UI Element Guide


normal Describes the default state of the UI element. 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

which require a specific text direction. Property textDirection can take the following values and is represented by enumeration type WDTextDirection.



The default value for this property is 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.

• width. Specifies the width of the UI element that you can specify in CSS sizes, such as em, ex, pixels or percentage values.

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.



• 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.

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);

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 The text direction is inherited from the parent element. Therefore, the text direction is identical to the one of the parent element.


The default value for this property is 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.

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 • dataSource. This property is used to specify the data source. You can use it to specify the path to the

context node providing the data. • 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 The text direction is inherited from the parent element. Therefore, the text direction is identical to the one of the parent element.


The default value for this property is 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.

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.

LinkToActionImage TextView

TextView Image

LinkToURL TextView FileDownloadImage


TextView Image



TextView Image



TextView Image


RowRepeater Element Transparent Container

Supported 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.



• 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

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

innermost surrounding layout cell that is enabled to act as a drag source can then be grabbed by this 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 and can take the following values:

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 The text direction is inherited from the parent element. The text 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.

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.

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.

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.

• activateAccessKey. Indicates whether access key for this control is activated. • 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 visibleRowCount = 5 displayEmptyRows = true (default)

Number of elements = 3 visibleRowCount = 5 displayEmptyRows = false

• 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:

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]

• legendId. Specifies the ID of the assigned legend. • 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:


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.

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.

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.

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.



• explanation. determines the explanation text. explanation is maintained by the documentation developer in the Web Dynpro Authoring environment.

• 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.

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.

Description of Properties • accessibilityDescription. When accessibility is activated, the assigned text is added to the tooltip.


• cellDesign. Specifies the color of the TableColumn. The cellDesign property is represented by enumeration type WDTableCellDesign.

• 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. • explanation. determines the explanation text. explanation is maintained by the documentation

developer in the Web Dynpro Authoring environment. • 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:


beginOfLine The text content is always displayed at the beginning of line. Therefore, the text

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.




forcedLRight The text content is always right-justified, regardless of whether the value is ltr or rtl for the textDirection property.



• 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. 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. visible The UI element is displayed on the screen.

• 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

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.

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:

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

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.

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.

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.





• 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.

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.

UI Element Guide


Description of Properties • cellDesign. Specifies the color of the table cell. The cellDesign property is represented by

enumeration type WDTableCellDesign. • 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.







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.

Description of Properties • 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

enumeration type WDTableCellDesign. • 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:




UI Element Guide




forcedRight The text is always right-justified, regardless of whether the value is ltr or rtl for property textDirection.



right Right-justified alignment. This value is deprecated. Use forcedRight instead. • 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

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 2 3

IPrivateUseSingleMarkableCellsView.ItableNodeElement elem; int count = 10; // Fill dummy data for(int i=0; i<count; i++) { elem = wdContext.nodeTableNode().createTableNodeElement(); wdContext.nodeTableNode().addElement(elem); elem.setCol1(“1.” + i); elem.setCol2(“2.” + i); elem.setCol3(“3.” + i); // set TableSingleMarkableCell as a variant for the table elem.setSelectedCellVariant(“variant1”);

}

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.

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.

Description of Properties • cellDesign. Specifies the color of the LegendItem. The cellDesign property is represented by

enumeration type WDTableCellDesign. • 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.






right Right-justified alignment. This value is deprecated. Use forcedRight instead. • variantKey. Determines the key to be used to identify the TablePopinToggleCell.

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



• activateAccessKey. Indicates whether access key for this control is activated. • 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.


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.

• tabAlignment

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 • activateAccessKey. Indicates whether access key for this control is activated. • adjustRowsToText. Specifies, whether this TextEdit should adjust the number of rows to the text,

which is displayed.

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. • explanation. determines the explanation text. explanation is maintained by the documentation

developer in the Web Dynpro Authoring environment. • 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.


required Specifies whether the entered value is required.

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.

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:









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. • text. Describes the text to be displayed. • 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. • textDirection. Specifies the text direction and allows you to use input fields for texts in languages




The default value for this property is inherit. • width. Specifies the width of the TextView UI element that you can specify in CSS sizes, such as em,

ex, pixels or percentage values. • 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

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 • activateAccessKey. Indicates whether access key for this control is activated. • 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.


• imageSource. defines the path to the image source. • 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

languages which require a specific text direction. The textDirection property can take the following values and is represented by enumeration type WDTextDirection.



The default value for this property is 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.

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 • activateAccessKey. Indicates whether access key for this control is activated. • checked. Specifies whether or not the ToggleLink is toggled. • text. Describes the text to be displayed. • textDirection. Specifies the text direction and allows you to use a ToggleLink for texts in languages





Events The onToggle event is triggered when the ToggleLink is toggled. The parameter is the new status of the element. Name Class Parameter

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.

UI Element Guide


It’s recommended to use the ToolBar inside the following elements: • Group, Tab, Table, Tray



• 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.

Description of Properties • activateAccessKey. Indicates whether access key for this control is activated. • 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.

• hotkey. specifies the key combination that triggers the onAction event.

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 • activateAccessKey. Indicates whether access key for this control is activated. • collapsible. Specifies whether the ToolBarButtonChoice can be collapsed. • imageSource. defines the path to the icon source. • 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.

UI Element Guide


• text. Determines the labeling of the ToolBarButtonChoice.

ToolBarDropDownByIndex

The ToolBarDropDownByIndex element is a dropdown box in a toolbar

Properties • activateAccessKey. Indicates whether access key for this control is activated. • 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. • selectionChangeBehaviour. The selectionChangeBehaviour property can be filled with the

following values and is represented by the enumeration type WDLeadSelectionChangeBehaviour.



• state. Describes the status of the dropdown 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 by displaying an asterisk..

• textDirection. Specifies the text direction and allows you to use dropdown list boxes 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.



The default value for this property is 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,

pixels, or percentage.

ToolBarDropDownByKey

The ToolBarDropDownByKey represents a DropDownByKey element in a ToolBar. In addition to the DropDownByKey element, it can be collapsed.

UI Element Guide




• 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. • labelText. Specifies the label text. • readOnly. Specifies whether the user can modify the selection in the ToolBarDropdownByKey. • selectedKey. Describes the key that specifies the selection of the ToolBarDropdownByKey. • selectionChangeBehaviour. The selectionChangeBehaviour property can be filled with the




• 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. • textDirection. Specifies the text direction and allows you to use dropdown list boxes for texts in




The default value for this property is inherit. • width. Specifies the width of the dropdown list box and can be specified in CSS units like em, ex,

pixels, or percentage.

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 • activateAccessKey. Indicates whether access key for this control is 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 list type WDInputFieldAlignment:

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. • labelText. Specifies the label text. • 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. • textDirection. Specifies the text direction and allows you to use input fields for texts in languages




The default value for this property is 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.

UI Element Guide




• design. specifies the design of the ToolBarLinkToAction. The design property can take the following values and is represented by enumeration type WDLinkDesign.

emphasized. Highlights the text. standard. Displays the text using the standard font size.

• hotkey. specifies the key combination that triggers the onAction event. • 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


units like em, ex, pixels, or percentage. • imageSource. defines the path to the image source. • 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. Describes the label text. • textDirection. Specifies the text direction and allows you to use subordinated UI elements for texts in




The default value for this property is inherit. • wrapping. Indicates whether or not the link text is wrapped. If the initial value is false, the link text is

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 • collapsible. Specifies whether the ToolBar element can be collapsed. A little icon is displayed in a


• design. specifies the design of the ToolBarLinkToURL. The design property can take the following values and is represented by enumeration type WDLinkDesign.

UI Element Guide


emphasized. Highlights the text. standard. Displays the text using the standard font size.

• hotkey. Specifies the key combination that triggers the onAction event. • imageFirst. Defines the position of the icon in relation to the corresponding text. If the value of this


units like em, ex, pixels, or percentage. • imageSource. defines the path to the icon source. • 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. • reference. Describes the address of the Web page to be opened. • size. This property is deprecated. • 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. _self is no longer supported. Use exit plugs instead and specify the URL there.

• text. Describes the label text. • textDirection. Specifies the text direction and allows you to use subordinated UI elements for texts in




The default value for this property is inherit. • wrapping. Indicates whether or not the link text is wrapped. If the initial value is false, the link text is

not wrapped.

ToolBarSeparator

The ToolBarSeparator element is used for the optical separation of ToolBar elements within a toolbar.

Properties • collapsible. Specifies whether the ToolBar element can be collapsed. A little icon is displayed in a


• visible. Specifies the visibility of the UI element. The default value of 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. visible The UI element is displayed on the screen.

ToolBarToggleButton

A ToolBarToggleButton is a ToggleButton especially for a ToolBar. In addition it can be collapsed.

Properties • activateAccessKey. Indicates whether access key for this control is activated. • checked. Specifies whether or not the ToolBarToggleButton is toggled.

UI Element Guide


• checkedImageSource. Specifies the Web address of the icon that appears when the ToolBarToggleButton is toggled.

• 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.

• 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




The default value for this property is 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. Name Class Parameter

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 • activateAccessKey. Indicates whether access key for this control is activated. • collapsible. Specifies whether the ToolBarLinkChoice can be collapsed • imageSource. defines the path to the image source. • text. describes the text for the ToolBarLinkChoice

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 • dataSource. This property is used to specify the data source. You can use it to specify the path to the

context node providing the data. • 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. • selectionChangeBehaviour. The selectionChangeBehaviour property can be filled with the




• title. Describes the tree header. • titleVisible. Specifies whether the tree label is visible.

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.

Description of Properties • 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:

data: The data specified for the drag source. mimeType: the mime type specified for the drag source. 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.

UI Element Guide



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: data: The data specified for the drag source. mimeType: the mime type specified for the drag source. 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.


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.

UI Element Guide


Design Time

Folder

Folder

Document

Runtime

Folder

Folder Document

Folder Folder

Node

Element

Document

Document

Recursive Nodes – Basis for Data Binding of a Tree

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

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 NonRecursiveTree View Creation of the Tree_0 UI element in the NonRecursiveTree view.

Refer to item 4 under Context Creation Structure of the context that provides the data and must support the creation of the tree UI 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.

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 property → value node customer

NonRecursiveTree.Customer

TreeNodeType Customer dataSource property → value node customer


TreeNodeType Customer text property → value attribute id

NonRecursiveTree.Customer.id

TreeItemType PurchaseItem dataSource property → value node purchaseItem


PurchaseOrder.purchaseItem

TreeItemType PurchaseItem text property → value attribute text


PurchaseOrder.purchaseItem.text

TreeNodeType PurchaseOrder dataSource property → value node PurchaseOrder


PurchaseOrder

TreeNodeType PurchaseOrder text property → value attribute text

NonRecursiveTree.Customer.PurchaseOrder.text

TreeNodeType Order dataSource property → value node Order

NonRecursiveTree.Customer.Order

TreeNodeType Order text property → value attribute id

NonRecursiveTree.Customer.Order.id

TreeItemType Item dataSource property → value node Item

NonRecursiveTree.Customer.Order.Item

UI Element Guide


TreeItemType Item text property → value attribute id

NonRecursiveTree.Customer.Order.Item.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 =

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:

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.




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.

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.

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.

Documents

Webdynpro Elements