As we’ve seen over the past few years, the evolution of SAP Business Suite is built on a simple but powerful concept: enhancement packages.1 Companies can implement enhancement packages selectively and activate functionality based on their most pressing business needs to minimize process disruption (see sidebar for additional background).
A key area of innovation that SAP Business Suite enhancement packages deliver is the development of new and attractive application user interfaces (UIs) based on Web Dynpro technology. For instance, the lean order management application realized with Web Dynpro is an example of using web technology to create interfaces that are more intuitive and easier to use (see Figure 1).
Web Dynpro is the UI development platform of choice for SAP Business Suite; it enables developers to create dynamic, robust web UIs while also giving them the flexibility to build configurable UIs for complex applications according to business users’ needs. And now, with new tools such as a window editor (which I’ll discuss later) available in the latest SAP NetWeaver enhancement packages, Web Dynpro can further boost developer productivity in order to decrease the total cost of development.
In the following sections, I will discuss Web Dynpro’s basic principles, its interoperability with other user interface technologies, and its new capabilities delivered with enhancement packages 1 and 2 for SAP NetWeaver, which serve as the basis for SAP Business Suite 7 and SAP Business Suite 7 Innovations 2010. Since SAP Business Suite is built primarily on the ABAP stack, this article will focus on Web Dynpro ABAP.2
||The lean order management application realized with Web Dynpro has an intuitive, easy-to-use UI
The Basic Principles of Web Dynpro
As a highly model-driven tooling environment, Web Dynpro allows developers to specify many of its user interface artifacts (components and views, for example) in a declarative, non-programmatic way before coding. A developer can graphically see, for example, the UI’s layout, navigation, and data mapping.
On the back end, the artifacts have several interfaces that allow Web Dynpro to tie into the programmed parts of an underlying application. This interfacing is achieved through well-defined ABAP Objects interfaces that must be implemented. For example, a Web Dynpro view containing a few form fields and a push button can be linked to application logic by an event interface that is triggered when an end user hits the button. The layout and the binding of the fields to the context variables are described declaratively. With Web Dynpro, the model underlying the application will remain part of the application.
Web Dynpro ABAP applications are developed in the ABAP Workbench (transaction SE80). You typically start by developing a Web Dynpro component that contains several Web Dynpro views. Each view has a hierarchic set of context variables that serve as data containers and can be accessed programmatically. You can attach event logic, such as a button click. The views are connected with plugs that are usually triggered by navigation events. Once your component is ready, you can then create a Web Dynpro application that delivers the URL to start the application in the browser.
All of the elements of the classical ABAP Workbench infrastructure, such as correction and transport, where-used lists, and forward and backward navigation, are fully available during development. And, to ensure adequate testing, the ABAP Debugger allows you to easily inspect your Web Dynpro context variables while stepping through the event handlers.
Interoperability with Other User Interface Technologies
Web Dynpro is quite open when it comes to integrating with popular web UI technologies, demonstrating the flexibility of SAP’s UI strategy for enterprise applications. For example, Web Dynpro supports the integration of SAP Interactive Forms software by Adobe. At design time, you can use the Adobe Designer from within the ABAP Workbench (or from the SAP NetWeaver Developer Studio when working with Java) to develop a typical form, such as an invoice, containing text, graphics, input fields, and tables. With Web Dynpro tools, you specify a forms container that acts like a Web Dynpro view. The view’s context variables are then simply mapped to the input/output fields of the Adobe form; you don’t need to know the form’s inner workings and instead can treat the form like a complex Web Dynpro control.
In response to customers’ desire to leverage intuitive, state-of-the-art web UIs, Web Dynpro also offers containers to manage rich Internet application (RIA) components, such as Adobe Flash or Microsoft Silverlight, enabling developers to interact with and embed these new technologies into classical Web Dynpro applications.3 You would use an external development environment, such as the Adobe Flex Builder, to create the RIA component, which is then embedded into a Web Dynpro application. The component must expose attributes, methods, and events to be manipulated from the Web Dynpro application, and the context variables must use identical names so they can be mapped between the Web Dynpro container and the embedded RIA control.
Although RIA components can offer highly sophisticated user interaction, the model is somewhat clumsy because the available attributes, methods, and events are not visible inside the ABAP Workbench. You should only use controls that extend the Web Dynpro standard control sets because naïve RIA programming can lead to applications that cannot be properly translated and are likely not accessible. To help avoid this outcome, SAP ERP has used RIA components (also called “islands”) in special cases, such as for talent management grids,4 and typically provides fallback implementations in pure Web Dynpro when the islands are not fully accessible.
In sum, Web Dynpro is a very flexible framework that allows you to combine best-of-breed technologies to serve the end user’s needs. The overall program model remains homogeneous as much as possible in order to keep the total cost of development down.
Enhancement packages 1 and 2 for SAP NetWeaver 7.0 offer several Web Dynpro tool improvements that boost developer productivity.
New Web Dynpro Features in SAP NetWeaver Enhancement Packages
Now that we’ve reviewed the basic principles and interoperability capabilities of Web Dynpro, let’s look at some exciting new and enhanced Web Dynpro features available with the latest SAP NetWeaver enhancement packages.5
AJAX Style of Interaction
The new Web Dynpro AJAX capabilities, available to front-end users, succeed the traditional HTML client present in classical Web Dynpro applications. While classical Web Dynpro applications follow the traditional request/response pattern of the HTTP protocol, modern web applications benefit from direct interaction as a user types in information. The AJAX capabilities enable developers to directly validate the input of simple data types, such as the date, and allow users to obtain an immediate response to an interaction. For example, users benefit from drop-down boxes that appear automatically as they enter information.
Boosting productivity, the AJAX capabilities of Web Dynpro are the basis for in-place editing and fluid animations that help developers easily rearrange and configure the layout of Web Dynpro views. In addition, you can use function keys and hot keys on the keyboard, and optimize the client/server communication with on-demand scripting. The “light speed” rendering, which is switched on by default, accelerates the rendering that is necessary on the server side.
Tool and Control Improvements for SAP NetWeaver 7.01
Enhancement package 1 for SAP NetWeaver offers several Web Dynpro tool improvements that boost developer productivity through, for example, better code maintenance and ease of locating program variables. For example, the ABAP Workbench now offers a tabular editor for Web Dynpro context variables that you can use as an alternative to a tree-based editor (see Figure 2). The tabular editor enables you to edit several attributes simultaneously, and it offers full support for a where-used analysis of context fields.
In addition, the Web Dynpro code wizard has been extended considerably; it now helps you embed typical Web Dynpro code sequences that would be difficult to memorize.
SAP NetWeaver 7.01 also provides several enhancements for Web Dynpro controls. Here are some of the highlights:
- New access keys allow a user to directly set the focus on a particular field on the screen. In addition, hot keys (CTRL+SHIFT+F2, for example) enable a user to trigger a specific action more quickly.
- Drag-and-drop interaction is now available in multiple facets. For example, many UI elements now support the “on drop” event.6 Tables also support drop source and drop target behavior. Plus, users can rearrange columns via drag-and-drop.
- A new, formatted text editor enables rich text editing, and a flexible page-layout UI element allows you to divide the available space on a page in up to nine inner areas.
- File Upload, Download, and Program Execute capabilities improve interoperability with desktop applications.
- Tables have been enhanced to enable row grouping, header grouping, and header wrapping.
||The new tabular editor makes it easier to analyze context fields and edit attributes
Tool and Control Improvements for SAP NetWeaver 7.02
As with SAP NetWeaver 7.01, the tools of the ABAP Workbench significantly increase developer productivity with SAP NetWeaver 7.02.
An exciting new feature available with enhancement package 2 is the Web Dynpro window editor, a tool that shows views and their relationships, such as plugs between the views or layout arrangements in view sets (see Figure 3). Providing a two-dimensional overview, the window editor enables developers to drill down to elements faster. A comparable tool has been available in the SAP NetWeaver Developer Studio for the Web Dynpro Java environment, but before enhancement package 2, it had only been represented in a tree-based editor in Web Dynpro ABAP.
The new layout designer delivers an enhanced WYSIWYG preview, including a new context menu for developer-defined reusable templates, and improves the ability to cut and paste blocks of UI elements, decreasing the time needed to develop a page.
In terms of the controls, SAP NetWeaver 7.02 comes with enhancements to the classical Web Dynpro table that align more closely with the general guidelines for SAP Business Suite.7 For example, table headers allow for flexible sort and filter options, and resizing one column doesn’t affect the size of other columns in the table.
The new form layout control available with SAP NetWeaver 7.02 helps you design state-of-the-art layouts in predefined variants with fewer line breaks. Label elements in form layouts can be right-aligned and prefixed with an asterisk to indicate required input. Input fields can be displayed as text, and they have a new “inputPrompt” property to suggest the proper input by the end user, such as Type hostname:portname. And the ABAP List Viewer (ALV)8 control allows you to automatically display the ALV table as an SAP Crystal report; this is made possible by the integration with the SAP BusinessObjects portfolio.
||The new window editor allows developers to see views and their relationships
Web Dynpro is a powerful framework. But even with the most powerful tools at your fingertips, it’s not easy to achieve UI design and layout consistency across multiple applications within SAP Business Suite. It’s possible to create guidelines to ensure consistency, but it’s preferable to implement them up front and allow the applications to plug into the framework.
The Floorplan Manager, as the name suggests, delivers the Web Dynpro framework based on floor plans.9 Several floor plans are available in SAP NetWeaver 7.01, including the Object Instance Floorplan (OIF), the Guided Activity Floorplan (GAF), and the Quick Activity Floorplan (QAF). SAP NetWeaver 7.02 includes the Overview Page Floorplan (OPF).
The Floorplan Manager, which is launched as part of the application, supports the configuration and assembly of all UI parts of an application based on generic building blocks (such as lists and forms) and freestyle blocks (such as a text editor). A developer’s main tasks are implementing feeder classes and wiring the UI building blocks. The Floorplan Manager immediately adopts many Web Dynpro enhancements, accelerating the innovation for the end user.
With the Page Builder, a new runtime authoring environment, a developer can configure and wire configurable human interface parts (CHIPs) that are registered in a CHIP catalog and technically represented as Web Dynpro components that implement the CHIP interface. In the Web Dynpro application or component, a side panel can be opened and closed to display additional information on demand (see Figure 4).
You can register Web Dynpro components as CHIPs by assigning inports and outports of the components that are used to wire the CHIPs into the page. With the new layout tool for advanced runtime authoring, you can use the Page Builder to compose your page with CHIPs, like you would compose a portal.
||A user interface configured with the Page Builder; a user can access additional information in the side panel
With its developer-friendly features and powerful tools, Web Dynpro is the user interface technology for the enhancement packages of SAP Business Suite. As organizations implement enhancement packages, their developers can now configure intuitive UIs more easily based on users’ needs. As a result of Web Dynpro’s interoperability features, they can also include dynamic elements, such as RIA components.
And now, thanks to the latest Web Dynpro features and capabilities available with SAP NetWeaver 7.0 enhancement packages 1 and 2, developers have — at their fingertips — the necessary tools and controls to develop flexible, state-of-the-art user interfaces that match the needs of modern web applications.
Karl Kessler (email@example.com) joined SAP AG in 1992. He is the Product Manager of the SAP NetWeaver foundation — which includes SAP NetWeaver Application Server, Web Dynpro, the ABAP Workbench, and SAP NetWeaver Developer Studio — and is responsible for all rollout activities. Currently, Karl’s work centers on how SAP NetWeaver powers SAP ERP and SAP Business Suite software, with a particular focus on lifecycle management.
1 See “Driving Growth in Today’s Economy” by Richard Campione in the July-September 2010 issue of SAPinsider and “Innovation Without Disruption” by Thomas Weiss and Christian Oehler in the January-March 2009 issue. [back]
2 Although Web Dynpro Java follows the same metamodel as Web Dynpro ABAP, Web Dynpro Java is targeted more toward the development of composite applications and user interface technology used in business process management scenarios. [back]
3 See “Use Flash Technology for Richer UI Capabilities in Your Web Dynpro ABAP Applications” by Karl Kessler in the April-June 2009 issue of SAPinsider. [back]
4 See the article referenced in footnote 3 for a sample talent management grid. [back]
5 There are many smaller Web Dynpro improvements that exceed this column’s scope. You can find more details in the documentation and release notes available at help.sap.com → SAP NetWeaver. [back]
6 If you start a drag-and-drop type of interaction, first you need to drag an element to a drop target — for example, you drop an icon in a table. When you drop the element, logic needs to be executed, such as adding a line to the table or updating a field. This action must be programmed in the “on drop” event. [back]
7 SAP established guidelines to better harmonize the user interface between the SAP ERP and SAP Customer Relationship Management (SAP CRM) components of SAP Business Suite. The guidelines describe the elements necessary to achieve a consistent overall look and feel between the applications, and they also provide direction on, for example, how fields are organized and grouped on a page. [back]
8 The ABAP List Viewer is available for both SAP GUI and Web Dynpro. Here, I am only referring to it in the Web Dynpro context. [back]
9 Developers commonly work from floor plans; they are predefined guidelines that explain a high-level structure for UIs. [back]