Short History of SAP's Web Applications

SAP's First Web Applications | Palo Alto Designs | SAP Retail Store | ESS and B2B Applications (frogdesign) | EWTs, IACs, Web GUI | HTML Business | Web GUI for R/3 | IACs – Second Round | MiniApps | HTMLB Library – iViews

By Gerd Waloszek, SAP User Experience, SAP AG – Updated: April 16, 2004

This page shows screen dumps that illustrate the history of SAP's Web applications.

Note: This overview does not cover the mySAP.com Workplace and portals.

 

SAP's First Web Applications

SAP's first Web applications (version 3.1 G and H; work on the project started in 1996) were based on the ITS (Internet Transaction Server) in conjunction with an R/3 backend engine running the Web applications. That is, the ITS mediated between an R/3 system, which expected a standard GUI as frontend, and the browser frontend that used HTML pages for communicating with the users. Communication between frontend and backend was very similar to the PAI-PBO behavior of R/3.

Screens were initially developed with the R/3 Screen Painter and enhanced afterwards using so-called templates: The R/3 dynpro determined the initial screen elements and their positions on a page. Developers could then remove and rearrange elements, as well as add graphics and other gimmicks to the page template. Page templates were written in Business HTML, a SAP-proprietary macro language. This language offered loops and conditions and cared for the connection between dynpro and HTML page elements. The ITS converted Business HTML to plain HTML for the browsers.

The first graphic design, nicknamed "ides design" or "Pittsburgh Steel" (because of the colors), was created by Kai Vermehr, a Berlin-based graphic designer, who also designed SAP's first icons. A "construction set" was created that allowed graphic designers to produce custom headers and buttons. Web applications were typically composed of frames as shown in figure 1 below.

First-generation Web application

Figure 1: Look of a typical first-generation "ides" Web application screen (click image for larger version)

 

Palo Alto Designs

The second-generation Web applications were designed at SAP Labs, Palo Alto. There, also the major part of the ITS and the development environment, called Web Studio, was developed.

Blue Stripe

The first Palo Alto design (versions 3.1 I, 4.0 A and B) was nicknamed "Blue Stripe" because of the blue stripe to the left. It had the same, albeit improved technical basis and was demonstrated by mid 1997 at a SAPPHIRE to the public.

Online Store in Blue Stripe design

Figure 2: The "ides" Online Store screen from above converted to "blue stripe" design (SAPPHIRE, SAPCOE, 4.0 A - click image for larger version)

Below are more example screen examples, all as the previous based on frames:

Example screen with Blue Stripe design        Example screen with Blue Stripe design


Two versions of a Calendar of Events Web application

   

Web application in Blue Stripe design

Web application in Blue Stripe design

Web application in Blue Stripe design

 

Web application in Blue Stripe design

Web application in Blue Stripe design

Web application in Blue Stripe design


A sequence of screens in an Employee Directory application (Search, Results, Details)

 


Different application screens (Requirements Request, Sales Order Status, Display Purchase Order)

Figure 3a-h: Web applications in the "blue stripe" design (click images for larger versions)

The design could be flexibly changed and adapted to the customers' needs. Here are two design studies:

Adapted Web application design        Adapted Web application design

Figure 4a-b: Two versions of the same Web application (initially in the "blue stripe" design - click images for larger versions)

New Design

The "blue stripe" design was followed by a more compact design – the last Web design before frogdesign came in at SAP. It corresponded to R/3 version 4.5A and appeared in 1998 (the first demo may have been earlier).

There were several technical improvements to the earlier versions, such as basic CSS support and use of Javascript for data validation. HTML 3.2 was supported, and the browsers Netscape 4.x, as well as MSIE 3.0 and 4.0.

Web application version 4.5        Web application version 4.5
     
Web application version 4.5   Web application version 4.5

Figure 5a-d: Web applications in the 4.5 design - three Status of Procurement screens and one Purchase Order screen (bottom right) (preliminary screen dumps; click images for larger versions)

Like its predecessors, these Web applications could be flexibly adapted to the customers' needs and branding.

Web application version 4.5, customized        Web application version 4.5, customized

Figure 6a-b: Two Web applications with custom designs - the left screen is a custom design for the Online Store

 

SAP Retail Store

Several SAP Web applications did not follow the mainstream designs and had designs of their own; the SAP Retail Store is one such example. Below you find some screens, the logon screen, the menu screen for the application suite, an initial screen for an application and an application work screen.

SAP Retail Store entry screen        SAP Retail Store main menu
     
Application entry screen   Application overview screen

Figure 7a-d: SAP Retail Store screens – logon screen (top left), menu (top right), application entry screen (bottom left), application screen (bottom right) (click images for larger versions)

 

ESS and B2B Applications (frogdesign)

The first ESS applications started with a "Pittsburgh Steel" design. Later they adopted the 4.5A and 4.5B designs. With the Enjoy initiative, a major redesign was done; the graphic design was now created by frogdesign. Later, frogdesign also was involved in the design of Web applications based on HTML Business (see below).

Typical of this design – called 4.6A – are the bevels (3D separators) and a help area to the right.

ESS Web application in 4.5A design        ESS Web application in 4.5B design
     
ESS Web application in 4.6 design    

Figure 8a-c: Evolution of an ESS screen from 4.5A to 4.5B and to 4.6A, which has the new ESS frogdesign look (click images for larger versions)

ESS Web application in 4.6 look        ESS Web application in 4.6 look
     
ESS Web application in 4.6 look   ESS Web application in 4.6 look

Figure 9a-d: ESS screens of different complexity in 4.6A look (click images for larger versions)

This design was also adopted by some application packages, such as the B2B application suite. The design changed slightly over time.

B2B Procurement Web application        B2B Procurement Web application

Figure 10a-b: SAP B2B Procurement application in two different versions (the original of the left image, probably an older version, is slightly distorted - click images for larger versions)

The Online Store, one of SAP's bread-and-butter Web applications, also appeared in a variation of this design:

Online Store in 4.6 look

Figure 11: The Online Store also appeared in the frogdesign look (click image for larger view)

 

EWTs, IACs, Web GUI

In 1999 the Enjoy initiative shifted its focus from R/3 to Web applications. SAP decided to offer a bunch of new, easy-to-use Web applications - so-called Easy Web Transactions (EWTs). In order to achieve this goal, a new three-layered design strategy was adopted:

  • The mass of new Web applications was to be developed using the R/3 screen painter, which was turned into an alternative development environment for Web applications in addition to the Web Studio. These applications would be automatically translated into HTML using the ITS and the Web GUI – developers would not need to bother with HTML
  • Applications which needed more Web-like screens could still be developed with the traditional template-based approach, starting with an R/3 application and a dynpro, which was then manually converted into a template.
  • Applications with even higher user interface requirements could be developed using flow logic; in this approach, dynpros were no longer involved.

The three SAP types of Web 
                    applications in 1999

Figure 12: The three SAP types of Web applications in 1999 (click image for larger view)

In principle, all types of Web applications should initially look similar as if they belonged to the same application family. Applications based on flow logic, however, could be designed so that they no longer showed any resemblance to typical SAP Web applications. To demonstrate this capability, frogdesign created a prototypical furniture Web shop based on the SAP Online Store:

Design study for Web application        Design study for Web application

Figure 13a-b: Design studies by frogdesign for the SAP Online Store, a flow logic-based Web application (click images for larger versions)

Design study for Web application

Figure 14: Prototype by frogdesign for the SAP Online Store (click images for larger view)

 

HTML Business

HTML Business was developed in cooperation with frogdesign; it consisted of a library of screen elements that had a graphic design similar in spirit to the Enjoy GUI of R/3 – the motto was that all R/3 applications should look the same, regardless of their technology. The description of this library can be found in the SAP Business HTML Cookbook. There were two metrics, a larger one for usual Web applications, and a smaller one for the new miniApps, small applications, that reside together on a Web page (formerly called Workplace, now called a portal page).

This library has been the basis for the IAC guidelines and for the first miniApp guidelines.

Typical screen created with HTML Business

Figure 15: Typical screen created with HTML Business (from Cookbook) in small metric (for miniApps – click image for larger view)

HTML Business group box        HTML Business tabstrip and table

Figure 16a-b: HTML Business elements (from Cookbook) in normal metric (for IACs – click images for larger views)

 

Web GUI for R/3

Following the current market trends, SAP decided to offer the whole R/3 system in a Web browser frontend. This concept was the basis for the SAP Web GUI.

R/3 application        R/3 applicaiton rendered in Web GUI

Figure 17a-b: R/3 application (left) rendered in the Web GUI as an ESS application (right) (click images for larger versions)

A simple application as 
                    it would appear in the Web GUI

Figure 18: A simple application as it would appear in the Web GUI (click images for larger view)

 

IACs – Second Round

In the course of the EWT project in 1999/2000 the EWTs were renamed to IACs, which had already been the name of SAP's first Web applications.

The user interface and interaction design of the IACs was described in the SAP Interaction Design Guide for Internet Application Components; the controls used were based on the HTML Business library.

Below are a few example screens from the IAC guidelines.

An Address Data application as IAC        A Quality Certificates application as IAC

Figure 19a-b: An Address Data application (left) and a Quality Certificates application; see the "blue stripe" solution using three screens for comparison to the Address Data application (click images for larger versions)

 

MiniApps

The Web application initiative (EWTs/IACs) was followed by the mySAP.com Workplace project. Now the focus was no longer on isolated applications but on an electronic workplace tailored to the needs of a specific job role. A new application type was born, the so-called miniApps. These are small application snippets that reside together on a page and provide users with relevant information and services. More demanding task were still executed using IACs or R/3 applications.

See the now obsolete SAP MiniApp Guidelines for more examples.

MiniApp        MiniApp - measurement converter

Figure 20a-b: Typical MiniApps in small metric based on HTML Business (click images for larger versions)

 

HTMLB Library – iViews

In 2001/2002, the HTML Business library was replaced by a simpler design that uses hardly any graphic elements and makes extensive use of CSS-based rendering techniques. This new design has been "finalized" as HTMLB library. The library and its use are described in the SAP HTMLB Guidelines. Currently, HTMLB is mainly used for applications running in SAP's enterprise portal.

With the advent of the portal, miniApps were renamed to iViews and their metric enlarged. The first iViews used a preliminary version of HTMLB that is presented in the SAP iView Guidelines for Java. There are only minor visual differences between this first version and the "finalized" HTMLB-based examples shown below. See the current SAP iView Guidelines for details.

iView using HTMLB        Measurement converter iView using HTMLB

Figure 21a-b: The same iViews using HTMLB (click images for larger versions)

 

To top top