Add Web UIs Quickly and Easily to Your ABAP Applications

by Karl Kessler | SAPinsider

October 1, 2001

by Karl Kessler, SAP AG SAPinsider - 2001 (Volume 2), October (Issue 4)

How many of you ABAP program- mers remember when business programming was dominated by client/server computing? Come on! The early nineties wasn't all that long ago! It was then that ABAP first made its mark, and many of you were gaining a mastery of distributed computing techniques. Client/server, a model that could distribute computing loads across the resources of your own enterprise, has since yielded to web-based client/server models that leverage the collaborative, standards-based medium provided by the Internet. Business applications today aren't constrained within the boundaries of one company. They can cut across multiple enterprises to serve all the organizations that comprise a collaborative space.

     What implications does this raise for ABAP programmers? Are your current client/server programming skills doomed to become obsolete? Absolutely not! Most ABAP programmers possess an invaluable command of business logic. SAP environments the world over, now and forever more, need that skill set. But I would suggest to you that it's time to start thinking about expanding your skill set to include some web UI development techniques. You can build applications using the same business logic you are conversant in now, but start adding web UIs.

     But how can an ABAP programmer who doesn't necessarily have familiarity with web development tools and techniques even begin to web-enable business applications and leverage common standards like HTML, XML, and HTTP? The answer is the SAP Web Application Server. This platform makes it easy for you. As of Release 6.10, the SAP Web Application Server (the successor to the Basis system you all work with) supports all these standards. The tools in the 6.10 Web Application Builder (see Figure 1) make it easy, from a programming perspective, for you to add a web UI to an ABAP application - and in a manner that encapsulates business logic from the UI.

Tool Features
Dynamic Page editor   Preview capabilities
  Basic script editing
  HTML code editing features such as drag-and-drop   Syntax checks
  Support for access by web designers, with tools they commonly use to design web UIs over a WebDAV interface
Tag libraries   Tag libraries for standards like HTML, WML, XHTML in all available versions
  Drag-and-drop of tag definitions
Debugging tools   ABAP and Javascript debugging
MIME repository   Hierarchical MIME store
  WebDAV-enabled repository
  Management of styles, icons, and images
Theme editor   Support for customer branding
  Partial overwriting of MIMEs

Figure 1

Web Application Builder Tools - Making it Easy to Build Web UIs

A Dynamic Page Editor

A key consideration for the development of a good web application (or web UI) is how the pages will show up in the end user's browser window. I like to think about pages from both the programmer's and the web designer's point of view.

     Typically, a web designer works with a tool that is not integrated with SAP software and that supports WebDAV, a distributed authoring and versioning protocol for the web. When a design tool supports the WebDAV protocol, designers can use it as a WebDAV client, which can check WebDAV content in and out of a WebDAV server. Because the SAP Web Application Server supports the WebDAV interface, the content of the web application development repository appears to WebDAV clients as a virtual file system that can be viewed in file folders of other corresponding WebDAV clients.

     The page editor of the Web Application Builder was not designed to serve as a substitute for robust web design tools, but rather to incorporate the use of these tools. Built-in integration for these types of tools means that pages can travel back and forth between the repository and the designer's desk. What the page editor does provide is basic script-editing and HTML code-editing features, such as drag-and-drop (see Figure 2). It also allows for syntax checks and includes a "preview," which scans the static HTML code and displays it in a preview window. Note that with the page editor:

  • You can add parameters to your page and inspect properties, such as its URL, and request the page in a web browser by pressing F8, just as you can with ordinary ABAP programs.

  • Flexible pages are parameterized, and the parameters are usually linked to the ABAP dictionary, since page parameters are very often referenced by SQL statements whose result rows populate dynamic web pages.

  • You can attach event handlers to your pages for the different points in time when a page is initially loaded, when the layout is being processed, or when the user issues a submit request.1
Figure 2 Page Editor in the Web Application Builder

Tag Library

When designing the Web Application Builder, we felt that strong support for a tag library would be absolutely essential. Typing HTML code is tedious work, and you won't generally be able to rely on the web designer to provide you with all the HTML code your application is going to need.

     We therefore inserted standard tags for HTML, WML, and XHTML (with support for multiple versions) in the development repository (database tables), so you can drag-and-drop tags into the page editor, eliminating the need to constantly browse the corresponding web sites. Tag libraries also provide an abstraction mechanism for web UI rendering, since complex HTML rendering can be hidden behind custom tags. We will soon support custom tags for standard development tasks such as SAP table rendering.

Testing and Debugging

Debugging and testing is particularly fast and easy with the Web Application Builder. If you are comfortable with these facilities for your ABAP code, you'll be comfortable with what we deliver to test and debug your script. You can arbitrarily set breakpoints in the page editor. If the runtime environment detects a breakpoint condition, a debugger window pops up that transfers control to your application's logic. All standard debug commands (setting watchpoints, examining the call stack, etc.) are available.

MIME Repository

Dynamic web pages may contain database content, icons, symbols, pictures, and so on. To help you conveniently and effectively organize all these elements, the Web Application Builder offers a MIME repository. The repository contains a hierarchy of MIME-type objects such as JPGs, GIFs, and even higher-order objects such as cascading stylesheets.

     The repository is subdivided into application-specific and application-independent folders. Each web application has its own folder that you can substructure as you would any folder. If you drag a MIME item and drop it into the page editor, the correct path name is inserted at the drop position. A context menu allows you to preview or upload the contents of the MIME repository.

     During runtime, MIMEs are cached in the Internet Communication Manager's (icman) cache to reduce database I/O.

Theme Editor

There are times that you want to put a different face (or a variety of pretty faces) onto an application - same logic, but a different look, perhaps one that is tailored for a specific customer or vendor. In cases like this, you'll want to be able to customize the appearance of the application without actually changing the application logic. The Web Application Builder's "theme editor" allows you to override any MIME object that is referred by your web application.

     With the editor, you have an application-specific view of your local MIME hierarchy, so that you can decide which visual elements should be substituted. Even application-independent MIME elements can be overwritten, but changes will apply then to all dependent applications.

SAP Web Application Server Runtime Environment

The SAP Web Application Server, given its support for HTTP, enables web browsers to directly request dynamic web pages that are fed with data from SAP systems without the need to set up a separate Internet gateway.

     If you issue a URL to the SAP Web Application server, the runtime environment will parse the URL and find the web application and corresponding page that is rendered in a dynamic fashion. The page may contain arbitrary HTML, XML or WML content. The dynamic content parts are computed using server side script code that has been implemented in ABAP or Javascript.


The Web Application Builder is based on the ABAP Development Workbench. Those of you who are familiar with the ABAP Development Workbench will find that the Web Application Builder offers a familiar environment for learning the ins and outs of a new set of tools and utilities, all to help you quickly and easily build flexible web UIs for your applications.


Karl Kessler joined SAP in 1992. He is the Product Manager of the ABAP Workbench and is responsible for all rollout activities. You can reach him via e-mail at



1 The event handlers form the bridge to the business logic. If you develop highly complex web applications, you can strictly separate the presentation and the business logic using an associated application class. Only method calls to objects of the application class should be used in the event handler and the layout specification.

An email has been sent to:

More from SAPinsider


Please log in to post a comment.

No comments have been submitted on this article. Be the first to comment!