New UI Elements for Web Dynpro ABAP
SAP Education provides the course NET312 – UI Elements for Web Dynpro ABAP.
This course summarizes changes in respect to WD ABAP between SAP NetWeaver 7.0 and SAP NetWeaver 7.0 EHP 2. This includes changes in the development environment and changes in the WD functionality.
As of SAP NW 7.0 EhP 2, the first element in a container automatically gets the correct value for the property LayoutData(e.g. MatrixHeadData in a MatrixLayout).
For this element, the property LayoutData is not visible.
Learn how to use all new features of the Web Dynpro Explorer.
• Implement new UI elements, new features of existing UI elements, and new layout managers.
• Implement context menus statically and dynamically.
• Implement drag-and-drop functionality
• Configure pages and side panels using the Web Dynpro Page Builder.
• Define CHIPs (Collaborative Human Interface Parts), which are the basis for the configuration process using the Web Dynpro Page Builder.
• Assign side panels to existing Web Dynpro applications
The Web Dynpro Explorer is the development tool to create and implement Web
- Dynpro components. All kinds of controller entities and their relationship are defined using this tool. In addition, wizards allow you to create code in controller methods or parts of the UI element hierarchy in views. New features are offered in Web Dynpro Explorer.
New functions of Web Dynpro Code Wizard allow you to generate the code to set and change context data
You can create a persistent copy template of an element, e.g. a FORM, by selecting Save as Templatefrom the context menu of this element. To create
a copy, use the Web Dynpro Code Wizard.
Templates you have defined are listed as user templates beneath the standard templates. You can use the wizard to add a user template to the layout. You can also use the wizard to remove your own templates. In addition, you can import and export them.
The Window Editor comes in the following variants, where they usually each contain the same functionality:
• Classic Window Editor - Window Editor in the classic tree view (standard setting).
• Graphic Window Editor - Window Editor with graphical user guide.
You can switch between both Window Editor variants using the Switch Window Editor View toolbar button.
As of SAP NW 7.0 EhP2, SAPScript based documentation can be created for and transported with Web Dynpro controllers and Web Dynpro components, respectively. To access the documentation, display the entity in the Web Dynpro Explorer. Then open the SAP GUI menu Goto and select the menu item Documentation.
If the WD Component is documented, you can see the documentation by using the menu path Goto → Documentation, or by pressing the button Component Documentationin the application toolbar, after the component is selected (double-click). If there is no documentation, the button is disabled.
As of SAP NW 7.0 EhP2, a new layout manager is available: the FormLayout.
If the FormLayout layout manager is used with the container UI element, all children inherit the property LayoutData, which can have the values FormTopData, FormHeadData, and FormData.
The setting FormTopData is used to divide the page horizontally in sections, each section containing a statically defined number of columns. The width of these columns is unique across all sections. Thus, the ratio of the section widths is given by the ratio of the column counts related to the sections.
As of SAP NetWeaver 7.0 EhP2, the property LayoutDatais never displayed for the first sub element of a container. This is because the value of this property for the first sub element has only one valid value:
If RowLayoutis assigned to the property Layoutof the container, the first sub element automatically gets LayoutData= RowHeadData.
If MatrixLayoutis assigned to the property Layoutof the container, the first sub element automatically gets LayoutData= MatrixHeadData.
If FormLayoutis assigned to the property Layoutof the container, the first sub element automatically gets LayoutData= FormTopData.
As of SAP NetWeaver 7.0 EhP2, new UI Element are available:
An AccordionUI element displays multiple panels one below the other. Each panel is assigned an own content. Only one of the panels may be expanded at the same time. The total height of the Accordionis fix.
A FormattedTextEditUI element represents an edit box for formatted text. User input is automatically transformed into the corresponding tags. For the most part FormattedTextEdit corresponds to FormattedTextView.
Possible formats are:
• Headers 1 to 3
• Alphabetical and non-alphabetical lists
• Indentations
• Text printed in bold and italics
All formatting options contained in the toolbar can be used. The formatting options correspond to the XHTML conventions.
An IconButtonis a simple version of a Button, and is currently used as a HeaderFunctions aggregation of the Panel. The IconButtondoes not contain any text, just an image.
Unlike a Button, an IconButton can have a menu. If a menu is specified, and the typeis not equal to menu, the IconButtonis split into two areas. When the user clicks on the left-hand area, the onAction event is triggered, and when the user clicks on the right-hand area, a menu is expanded.
IconButtonswith type=menu behave differently. When the user clicks on an IconButton, a menu is always opened, and the action handler is not called. In this case an IconButtonis only enabled if the enabledproperty is set to true, and a Menuis aggregated for which the visibleproperty is set to visible.
A LinkChoiceUI element is a button that offers various options through a triangle symbol.
If the user clicks on the triangle symbol, a menu opens from which an action can be selected. A specific action is executed when the user selects the relevant menu entry.
A PanelUI element can be used to group a set of UI elements in a rectangular area with a common title. An icon in the header area allows to collapse and expand the body of the Panel. Thus, the Panel is an alternative to the Tray UI element.
However, in addition to the functionality offered by the Tray, the Panel may display a toolbar in the header area. This toolbar is not hidden if the UI element is
collapsed. A second difference is the meaning of the property height:
In a Tray, the value of this property equals the height of the body without toolbar and without header. For the Panel, this value includes toolbar and header.
A SectionHeader is used to display a header for a section in a form.
The ShuttleUI element is used to implement browse-and-collect patterns that enable the user to move entries from one UI element to another one. This is utilized by a set of four buttons. Two buttons display a double arrow, the other two buttons display a single arrow. Clicking on a button displaying two arrows is typically implemented in a way that all items selected in the first UI element are moved to the second UI element. Clicking on a button displaying one arrow is typically implemented in a way that only selected items are moved. UI element properties allow to hide the buttons displaying two arrows. It is also possible to disable all buttons or the set of buttons displaying arrows that point in the same direction.
The TableRowGrouping UI element is used to display a table whose rows are in groups. A group is represented by an expandable/collapsible row that takes up the whole table width.
The TableMultiEditorCell UI element is table cell variant that enables several UI elements to be placed in one table cell. This type of cell can be used for "one click actions". The number of cell editors permitted for this is limited – they must be of type TableMultiCellEditor:
• Button
• ToggleButton
• LinkToUrl
• LinkToAction
• FileDownload
The Hierarchical Tables are tables that can represent a hierarchy using the aggregation master column. The master column displays the grouping criterion (defined by the table cell editor) and an arrow-like icon. This arrow points to the right (condensed state) or to the bottom (expanded state).
A ThresholdSliderallows to visualize a state by means of a bar-like depiction. The bar color changes in accordance with threshold values. An arbitrary number of threshold values may be defined. A threshold value is visualized by a marker.
Small markings under the ThresholdSlidermay be displayed to guide the eye.
Adobe Flash Island Integration
FlashIsland
UI elements are available to enable the integration of Flex-based or Flash-based applications in Web Dynpro.
Value Suggestions
If the value help mode is set to automaticor dictionary search help(or if a value set is assigned to the related context attribute explicitly), allowed values may be displayed while entering the field value. The list of allowed values is adapted each time a new character is entered in the field. The value list is displayed below the corresponding field. Any of the suggested values can be copied to the field by clicking the list entry.
Input prompt for empty input fields
If an input filed is empty, a short translatable help text for the user can be displayed in it.
Defining and Implementing Context Menus
Context menus allow you to offer functionality to the user by means of a menu popping up if the secondary mouse button is clicked. The functionality may depend on the click position and the user role. You can:
- Define context menus at design time and at runtime.
- Adapt context menus at runtime
Implementing Drag-and-Drop Functionality
With drag-and-drop a user can select UI elements from a UI area (drag source), drag them from the source, and drop them (the ghost image) into another UI element area (drop target). Drag source and drop target can be either the same UI element (e.g. a tree) or two different UI elements (e.g. a list box and a table). Different application scenarios can be implemented using drag-and-drop:
Generic Drag-and-Drop.
The user drags a UI element and drops the ghost image on a different UI element.
Example:
An Image displaying a pictograph is dragged and dropped on a FormattedTextEditUI element. As a result a text file related to the Image may
be loaded and the text may be isplayed by the FormattedTextEditUI element.
Browse and Collect.
Here a user selects one or more entries in one UI element and drags the ghost image to a second UI element. When dropping the items, the data is either copied or moved.
Example:
Multiple items marked in an ItemListBox are dragged and dropped on a Table. As a result, related information may be displayed by the table.
Runtime Authoring.
UI elements defined as drag handles are moved in order to sort various screen areas that are related to a grid.
Example:
A Group UI element is repositioned on the screen by clicking on its caption (CaptionUI element is drag handle), move it on the grid, and drop it on a different cell of the Grid.
The Web Dynpro Page Builder
As of SAP NetWeaver 7.0 EhP 2, the Web Dynpro Page Builder can be used to configure pages or panels consisting of CHIPs (Collaborative Human
Interface Parts). CHIPs are small, widget-type, encapsulated and stateful pieces of software. They may offer interfaces. This allows to interchange data between CHIPs that are defined by different techniques and that may be located on different servers. CHIPs may be based on Web Dynpro components or on web applications.
Panels configured by the Web Dynpro Page Builder can be assigned to existing Web Dynpro applications via customizing or personalization. At runtime a panel can be expanded on the right side of the layout. For this reason these panels are referred to as side panels.
As of SAP NetWeaver 7.0 EhP 2, a Web Dynpro page can be configured without having to code a single line. The page fragments to be combined on this page have to be available as CHIPs. Data may be interchanged between the CHIPs if appropriate inports and outports are defined.
