GRC
HR
SCM
CRM
BI


Article

 

From SAP@Web Studio to the Web Application Builder - SAP's Latest Advances in Web Application Development Tools

by Karl Kessler | SAPinsider

October 1, 2000

by Karl Kessler, SAP AG SAPinsider - 2000 (Volume 1), October (Issue 2)
 

With R/3 Release 4.6C, SAP offers a new tool, the Web Application Builder, for Web software development. This tool is tightly integrated with SAP’s ABAP Development Workbench, has all the advantages of an online development tool, and accommodates both inside/out and outside/in development styles for building common Web applications for SAP. This article describes the strategies and tools SAP offers for Web development – from SAP@Web Studio to the Web Application Builder.

With R/3 Release 3.1, SAP introduced the ability to Internet-enable applications via the inside/out approach, whereby Internet applications are developed to add a Web user interface to already existing SAP transactions. With SAP@Web Studio, which was included with Release 3.1, you could automatically develop these Internet applications, but did not have the flexibility to do much heavy-duty customization, giving an application all the "bells and whistles" that users have come to expect from a Web application.

     With R/3 Release 4.6C, SAP offers a new tool, the Web Application Builder, for Web software development that is, for the first time, tightly integrated with SAP's ABAP Development Workbench. The Web Application Builder has all the advantages of an online development tool, including repository access, reuse, and navigation support, and it allows for both the inside/out and the outside/in development styles that are used in building common Web applications for SAP. This tool provides developers with the capability to add the Web-like "bells and whistles" the general user wants.

     This article describes the strategies and tools SAP offers for inside/out and outside/in Web development - from SAP@Web Studio to the latest advances in the Web Application Builder. It also takes you through the process of developing your own Internet services, whether you want a "quick-and-easy" Web representation of an SAP GUI or a fully functional Web page that accesses your SAP system.

     I will start by providing some background on Web development, first by revisiting the Internet Transaction Server (ITS) architecture, which is the base runtime platform for all of SAP's Internet products, including the SAP@Web Studio. I will then discuss how the Web Application Builder offers a new option for developing Web interfaces for SAP, and how it extends the capabilities many developers are using now in SAP@Web Studio. After taking you through the building of an HTML template, from the code to the frames and buttons, I will show you how to integrate these services into role definitions so they can appear as launchpad items in the mySAP.com Workplace.

Inside/Out and Outside/In: SAP's Got It Covered

There are two basic types of SAP Internet applications, both supported by the ITS:

  • Inside/out applications are based on special transactions developed inside an SAP system that can be accessed over the Internet via a Web browser. These applications are typically bound to the well-known client/server architecture of the R/3 Basis system. Here, for each user, a separate session is opened that runs the desired transactions automatically, screen-by-screen, over the Internet.

  • Outside/in applications loosely couple Web technology with SAP applications. In this case, most of the communication is carried out in a stateless manner (i.e., there is not a permanent connection to the SAP system). A user, for example, could browse through an online catalog without being permanently connected to the SAP system. In this type of application, session management (i.e., a session established with the SAP system) only happens if an order is placed or a shopping basket is submitted for processing. Support for the outside/in approach offers you the opportunity to adjust your SAP interfaces for use by a broader user audience, specifically for those users who do not have a great deal of training in SAP (and who don't want, or need, to negotiate the complexity of a classical SAP GUI), and who expect a simple, point-and-click, Web-browser- like interface that is hyperlink-driven rather than field-oriented.

Overview of HTML and ITS

HTML Templates and Business HTML

Any SAP transaction consists of a sequence of screens that contain input/ output fields. In order to run these transactions in a Web browser, there must be an HTML template available on the Web server for each screen. This template describes how the screen should look. Since HTML only allows you to define static content, a mechanism is needed to fill in the dynamic field content that you would normally obtain from a regular SAP session. That mechanism is Business HTML, and in addition to some control statements (REPEAT, IF, etc.), Business HTML also offers access to SAP fields and to special built-in functions for Web server abstraction.

ITS Architecture

During runtime, the ITS coordinates all the different user sessions that access SAP applications over the Internet. The ITS is made up of two basic components:

  • The Web Gate, or WGate, which is technically a Web server extension

  • The Application Gate, or AGate, which handles the different GUI sessions

      Shown here is the principal flow of control through the ITS.

      Let's use an example to take you through the control flow in the figure shown here. In this case, a user requests information from the employee directory through a Web browser. The request is sent to the corresponding Web server, which loads the extension (a DLL). The WGate connects to the AGate and determines whether to open a new session or resume an already existing session. In this sense, the AGate simulates a regular SAP GUI session driving the SAP dialog protocol.

      When the SAP GUI session comes back, the AGate loads the associated HTML templates, and fills in a formatted table with all the fields from the SAP GUI API call, including information like the employee name, phone number, and so on. The resulting page is forwarded to the Web server and is then rendered in the user's Web browser.

Resources for Easier Development of Visual Control

SAP HTML Business Functions

HTML template development can be a very tedious task, especially if you have to develop the same kind of visual control elements over and over again. This is why SAP created SAP HTML Business Functions. These reusable elements render specific elements of the classical SAP GUI in the Web GUI. The Business Functions encapsulate elements of the visual design - features such as pushbuttons, for example - that were implemented in Release 4.6B. Business Functions are a very powerful concept in the development of a consistent Web look and feel. The current library of HTML Business Functions covers the whole spectrum of a traditional SAP GUI session, as of Release 4.6B, from radio buttons to table controls.

SAP's HTML GUI

Another way to generate certain transactions in a Web-compatible format is by using the HTML GUI. SAP developed this generic GUI based specifically on HTML Business Functions. This GUI does not require any specific Web browser features; you can run any transaction using it. The HTML GUI runs without installation. And since the HTML GUI is not based on HTML templates, but rather generates all HTML on the fly, it is a great resource to fall back on whenever you need a template or service but don't have one readily at hand.

      Do not be misled however - this is not the cure-all for every Internet service need. Obviously, there are many transactions that simply will not be acceptable if you put them on the Web without any modification or simplification. Classical R/3 screens can use HTML GUI to generate an HTML page, but the result may also include some R/3 elements (pulldown menus, etc.) that you probably don't want on your Web site.

Control Flow in ITS for a User Request

Selecting the Right Tool to Meet the Needs of Your Online Users

The success of the Internet in the late 1990s is related to the fact that user interfaces have dramatically changed. Web-based user interfaces are highly graphical and document-oriented, and offer much more navigation and less function compared to classical client/ server GUIs. They are designed to attract a variety of users - including those who have little or no technical training.

     Likewise, we are seeing Web developers of various technical abilities, and varieties of SAP-based technical knowledge. For this reason, SAP offers more than one tool to support the development and design process.

SAP@Web Studio for Basic Inside/Out Web Development

The architecture of the ITS supports the rapid development of Web user interfaces for existing transactions. In fact, the ITS already comes with a PC-based development tool ready for HTML template development - SAP@Web Studio.

     If you start the Web Studio from your local desktop, you first create a named Internet service that corresponds to the SAP transaction you want to replicate.

     Later, you connect to an SAP system in order to check in or check out HTML templates that belong to this service. After checkout, the templates are stored on the local file system. A basic generation utility creates HTML templates based on existing screen definitions.

     When you finish your template development, you can publish (FTP) your templates to the ITS and launch your service in your favorite Web browser. It sounds fairly straightforward, and it is.

Web Application Builder for Development Activities That Require Backend Integration

The Web Studio is very well suited to users who have little technical background and are looking for a simplified way to create Web applications. It operates, for the most part, in offline mode and requires almost no specific SAP knowledge. If, on the other hand, you need to integrate your development activities more tightly with the backend system, the Web Application Builder offers some further benefits. It offers Web Studio functionality directly inside your system, and you won't need to install and maintain a separate desktop application, such as the Web Studio, outside the SAP GUI.

Developing Easy Web Transactions with the Web Application Builder

If you are familiar with the new ABAP Workbench, you will find it easy to develop Web applications online.¹ There are two types of Internet services you can create with the Web Application Builder: Easy Web Transactions (EWTs) and general Web Applications. This section discusses how to create an Easy Web Transaction.

     Note that to create an Internet service using the ABAP Workbench, you must use SAP GUI Release 4.6C, along with Basis Release 4.6C.

     Here are the steps to create your first Easy Web Transaction:

  1. In the ABAP Workbench, launch transaction SE80 or select "Object Navigator" from the SAP menu. Select "Internet service" from the object list types that appear in the dropdown list shown in Figure 1.

  2. In the Object Navigator, type in the name of your service, in this case, ZDEMO1. Press the Display button (the eyeglasses icon). A pop-up window tells you the service does not exist yet, and asks if you want to create it. Choose "Yes."

  3. Next, the system asks for the type of Internet service, as shown in Figure 2. Mark "Easy Web Transaction." (Whenever you develop an EWT, you must supply the transaction code that the ITS will run later on.)

    TIP: If you check "ITS Mixed Mode," as shown in Figure 2, the ITS will render any screen where the template is missing. This feature is especially helpful if you prototype your Web application.

  4. Choose transaction code TZ60 (from the standard SAP training demo program).

  5. Since we are in an online development environment, the Transport Organizer pops up asking for a development class and transport request. Select "Local Object" for the purposes of this example. The system presents your Internet service in tree form and automatically associates Theme 99 with your service, as shown in the left frame of Figure 3.

    TIP: Themes allow you to customize your HTML template - for example, you can apply your own organization's corporate logo to a screen. Theme 99 is SAP's default for delivery of standard templates, but you can, of course, create new themes to meet your own particular needs.

  6. Double-click the service name ZDEMO1. The system displays the parameter list of your service in table form under the Parameter tab.

  7. Switch to Change Internet Service mode, and then, under the Parameter tab, press F4 to add the following parameters: ~LOGIN, ~CLIENT, and ~LANGUAGE. Supply the respective user name, client, and logon language. Then save your work (to ease up the login dialog with the ITS).

  8. Press the Publish button shown in Figure 3. Your Internet service will be forwarded to the ITS.

  9. Press F8 to launch your service. The system starts the Web browser on your local desktop. Inside your Web browser, transaction TZ60 will be executed. Transaction TZ60 consists of two screens, screen 100 and screen 200, as shown in Figure 4.

    The Workbench allows you to create Internet service based on exisiting SAP transactions and run them directly in a browser

Figure 1 Using the Generic Object Services Tool to Send a Message from a Transaction

Figure 2 Creating an Easy Web Transaction

Figure 3 Internet Service ZDEMO1 in the Web Application Builder

Figure 4 Using the Generic Object Services Tool to Send a Message from a Transaction

Creating HTML Templates from R/3 Screens

As you have seen so far, the Workbench allows you to create Internet services based on existing SAP transactions and run them directly in a browser (inside/ out applications). Next, I will take you through the steps to create HTML templates from these services.

  1. In the Object Navigator, right-click on your service name and select Create ' Template from the context menu (see Figure 5).

  2. A dialog box appears asking for the type of template. Mark "Generate HTML from screen," as shown in Figure 6, and select a valid screen number from the Screen number menu - e.g., 0100. The system automatically suggests the underlying ABAP program SAPMTZ50. Press ENTER. The system displays the generated HTML template, as shown in Figure 7. The template includes Business HTML code, which you see highlighted in blue.

  3. Press the Publish button to forward your template to the ITS, and launch your service again, as shown back in Figure 6.
Figure 5 Context Menu to Create HTML Template

Figure 6 Accessing General Templates

Figure 7 The Generated Business HTML Template

     Notice the difference in what you get from these two transactions, as shown by comparing screen 200 with the generated HTML code. With the Easy Web Transaction, the HTML GUI rendered your screens automatically, including pulldown menus and even an okcode field (the input field directly below the menu bar, as shown in Figure 4). By comparison, all we have done in this session is create the template of that screen.

The ultimate goal of Easy Web Transactions is to make life easier for your end user - by removing the complex interactions of classical R/3 screen and adding more of a Web style to your application.

     The ultimate goal of Easy Web Transactions is to make life easier for your end user by removing the complex interactions of a classical R/3 screen and adding more of a Web style to your application (something that becomes even more apparent when we consider outside/in applications later on). So we can now use HTML templates like this one as the starting point to build a more user-friendly, standard-format Web interface.

Figure 8 Relationship Between the ITS and SAP Application Server

Figure 9 Elements of a Web Application

Helpful Features from the Context Menu of the Web Application Builder

The Web Application Builder's context menu offers a variety of different functions to streamline Internet application development, such as:

  • Creating and maintaining MIMEs. In the Web Application Builder, you can upload multimedia objects such as pictures and videos from your desktop or a network drive. Multimedia objects are stored in the development database and published to the corresponding directory of the ITS Web Gate (or WGate) in order to serve Internet users in an efficient manner.

  • Creating and maintaining language resources. Whenever you use user interface elements that do not correspond to dynpro elements, define the element as a symbol instead of plain text. Symbols are preceded by a # sign, as you can see in the upper screenshot. To specify the text for the master language, double-click on the symbol to reach a screen like the one shown in the lower figure. The symbol will later appear in a translator's worklist. Otherwise, regular dynpro fields are always presented in the logon language.
Defining an Element As a Symbol in HTML
  • Publishing the whole service. This function is useful if you are not sure whether both the service file and all other files (templates, MIMEs, etc.) have been successfully published. In that case, you can check by publishing the service.

  • Displaying the Business HTML documentation. This function is available from the toolbar. Here you find the complete reference for ITS programming, including Business Functions and available control statements.
Specifying Text for the Logon Language

Outside/In Internet Applications Based on Flow Logic

With the demands of e-commerce, your organization's SAP Internet applications have different needs and must accommodate a different type of user. These users have very little SAP- and application-specific training, and they certainly don't expect to be forced to read any documentation to get the information they need! They expect a simple, point-and-click, Web-browser-like interface that is hyperlink-driven rather than field-oriented.

     These user requirements have led to the development of a new programming model for Internet Transaction Server (ITS) applications that is somewhat different from traditional Application Server transactions.

In Figure 8, three different programming levels are shown in the Internet Transaction Server:

  1. On top, with the Web GUI, no programming efforts are required for ITS applications. The HTML GUI carries out user requests by simulating an ordinary SAP GUI session.

  2. At the second, inner level, the EWTs keep all application control inside the SAP system. Transactions are collections of screens, and the sequence of screens is determined by interpreting the dynpro's flow logic. The ITS handles only the visualization.

  3. In the third level, the flow logic has been moved to the ITS server. The ITS acts as an interpretation engine for outside/in applications whose user interface is based on templates. The SAP system merely serves as an RFC or BAPI provider in this case.

With the demands of e-commerce, your organization's SAP Internet applications must accomodate a different type of users: These users expect a simple, point-and-click, Web-browser-like interface that is hyperlink-driven rather than field-oriented.

The Flow Logic Program Model for Outside/In Applications

Web applications consist of a set of dialog steps. Each dialog step is described by a suitable HTML template and a flow file. Figure 9 depicts the overall idea of what comprises a Web application.

     The HTML template describes only the visible elements on the screen. However, you cannot derive the sequence of templates from the corresponding HTML code; the actions are defined separately in a flow file. Each HTML template has a flow file attached to it. The flow file controls the sequence of templates based on a state/event model. States are used to specify typical situations or messages, such as "Template loaded," "BAPI error occurred," and so on. A state change occurs when an event has been fired. Events are tied to user interface elements, such as submit buttons or hyperlinks.

     When an event occurs, the actual state might change or a followup template can be loaded. The system also supports built-in events that are useful for initialization purposes. The flow files are programmed in XML using a suitable data type definition (DTD). The complete reference for DTDs is available in SAP's online documentation (under "Internet Application Development with Flow Files").

A Simple Flow Logic Program for Outside/In Processing

Let's consider the following example of a simple flow logic program, where you create the HTML templates and specify the flow logic for your Web application. As an example, we will create an application similar to the one we created using the Easy Web Transaction approach - a program to search for and display flights from the flight database. This will provide a fairly straightforward example of what is involved in creating a Web application using the Web Application Builder. (Later in this article, I will briefly take you through the creation of an even more complex version of this process, complete with frames, buttons, and all the features users now expect from a Web application.)

Step 1: Create the HTML Code for Your Templates

Our simple flight application consists of two HTML templates: SEARCH and DISPLAY. SEARCH contains search fields for the flight database and a submit button named Search. DISPLAY will display all flights that match the search criteria as an HTML table. The HTML code for these templates is shown in Listing 1.

Listing 1 Code for HTML Templates: SEARCH and DISPLAY

     The SEARCH template is made up of input fields for the departure city and country as well as for the destination city and country. The input fields belong to an HTML form whose ACTION attribute refers to an HTML Business Function named wgateURL. The ITS evaluates the wgateURL function before the SEARCH template is sent to a Web user, and the function returns the URL of the ITS Web server extension (WGate).

     The DISPLAY template simply contains an HTML table. The entries of that table, however, are determined at runtime first. To fill these entries, therefore, the body contains a REPEAT loop that outputs the records of the table named FLIGHTLIST. The i-th line is denoted by a corresponding array index.

     The FLIGHTLIST table contains flight information from the SFLIGHT database table. As the code indicates in Listing 1, only the columns carrid, connid, fldate, and deptime are used. The repeat loop is bounded by the current length of FLIGHTLIST (flightlist-carrid.dim). Please note that the Internet Transaction Server substitutes data for all code between the backticks (marked in blue in Listing 1).

Step 2: Create the XML Code for Your Flow File

Now we have two templates that describe the visible elements, but we have not seen yet how data flows and how the templates are connected. Here is where the flow logic comes in. In our example:

  • The flow logic of the SEARCH template should load the followup template DISPLAY when a user requests a search.

  • Then the flow logic of the DISPLAY template must select the matching data by calling a BAPI that returns the flight list.

Listing 2 shows the XML code for the flow logic. The flow of template SEARCH consists of an Event tag, Search (event name="Search").

TIP: The name of the Event tag must match the value of the Search button, as you can see in Listing 1.

     When the Search event is fired by pressing the Search button, the form is submitted to the ITS. The ITS in turn interprets the flow file and determines the followup template, which in this case is the DISPLAY template.

     If you look at the DISPLAY template's flow file, you will notice an event specification named onLoad (event name="onLoad"). The onLoad event is a built-in event that is triggered whenever the template is loaded initially.

     In this case, the state is changed to "DISPLAY". This state change is needed to issue a BAPI call. The BAPI call is implemented using a module tag as shown in Listing 2 (modulename= "BAPI_SFLIGHT_GETLIST"). The module tag transfers any fields or tables to the BAPI if their names are identical to the BAPI's parameters. If BAPI parameters aren't identical to fields/tables, you can use the module tags for both input and output mapping.

TIP: Make sure that the input and output field names match. These names are also case-sensitive for input and output mapping.

     Now that we have designed this Web application template and the flow model, we will investigate how the Web Application Builder supports this new programming model.

Listing 2 Flow Logic XML Code: SEARCH and DISPLAY

Step 3: Create the Internet Service Template in the Web Application Builder

The following basic steps use the Web Application Builder, along with your code, to create an outside/in Internet service. (I have left out generic steps, such as correction and transport, for the sake of simplicity.) Create Your Start (SEARCH) Template To create the initial SEARCH template, use these steps:

  1. Launch transaction SE80 to open the Object Navigator. Select "Create Internet Service" in the Web Application Builder. Here, you will create and name your service, as you did with the Easy Web Transaction described above. But this time, when the system asks for the type of your Internet service, choose the Web application option shown back in Figure 2.

  2. There is an input field, "Start template," where you can enter the name of your initial template (~INITIALTEMPLATE). (Later, when you start your service, the overall processing will begin with the start template you name now.) Of course, your start template has not been created yet. The system simply displays the initial hierarchy of your service. Double-click on your new service name - for example, ZDEMO3 - to bring up the list of service parameters.

  3. In Figure 10, the Change Internet Service screen, you see that some special parameters have been generated automatically. The start template (~INITIALTEMPLATE) appears in the table of parameters. Double-click the name of the start template.

  4. As when you created the Easy Web Transaction, the system now leads you to the same dialog pop-up to create your start template. This time, though, do not generate the HTML template. Just name your start template "SEARCH" (see Figure 11).
  5. TIP: Creating objects during navigation is a very common feature inside the Workbench. Take advantage of this when you can!

  6. Some default HTML code appears in the HTML Editor, as it did in Figure 7. The generated code helps you to more quickly prototype your application, and helps ensure a consistent visual design.
  7. TIP: If you plan to use Business Functions later in your application, make sure to apply SAP's visual design in a consistent manner here.

  8. Fill in the corresponding HTML code from the SEARCH template, as shown in Listing 1.

  9. Save your work, publish the whole service by selecting Publish ' Whole service from the context menu, and press F8. You should see a basic SEARCH template, as shown in Figure 12.
Figure 10 The Change Internet Services Screen

Figure 11 Naming Your Internet Service Template

Figure 12 SEARCH Example

Create the Followup (DISPLAY) Template

Next create the DISPLAY template. Here are the steps to follow:

  1. From the hierarchy's context menu, found in the SEARCH template, create a followup template for the DISPLAY template. As you did before, fill in the HTML code from Listing 2.

  2. Use Edit -> Add flow logic from the menu to attach a flow file to your SEARCH template.

  3. Again, as it did for the SEARCH template, the system generates some default XML code. The next steps are up to you; you may prefer to type in plain XML code. I personally would suggest in this case, however, that you go to the Flow Builder tab, which is a structure editor, and use the Flow Editor for analysis and error correction.

  4. From the template screen, select the Flow Builder tab and delete the onLoad event using the context menu.

  5. To add an event, type in the event name, along with the corresponding template, as shown in Figure 13. Select the followup template by pressing F4. The system will generate the underlying XML code in the Flow Editor tab.

  6. In the event table, double-click the followup (DISPLAY) template name to change its flow logic. Here we can use the onLoad event.

  7. Add a module call to the flow. A dialog window appears. Type in the BAPI you need; in this case, you will call the module FlightConnection.GetList, as shown in Figure 14. The formal parameters (Source and Target) are displayed here. Type in the name of the corresponding input fields under Source. You must specify only those fields with names different from the parameters. Specifying these input fields will generate the module tag in the Flow Editor tab.

  8. Again, save your work. Since we changed the flow logic, publish both templates and go back to the browser to start your service again. With the database in our example, which contains flight data, you will find an output similar to Figure 15.
Figure 13 Adding an Event

Figure 14 Generating Module Tags and Adding Modules

Figure 15 Results of Your ZDEMO3 Service

Step 4: Add Business Functions

Now that we have a running example based on flow logic, it still looks very raw. What we need here is some elegant formatting on a higher abstraction level. This is exactly the purpose of Business Functions. Business Functions are, in a sense, the componentized building blocks of the HTML GUI. You can reuse them in your own Web applications.

Business Functions: Where to Find Them, and How to Use Them

You can access the library of Business Functions by pressing the Business HTML template button from the toolbar. This takes you to the Business Function library, shown in Figure 16. This library contains functions for the various visual elements of an HTML template that are displayed in an amodal hierarchy window. Here you can inspect the functions' parameters. Business Functions in the library include features such as: buttons, fields, icons, and tables.

The library window is drag-and-drop enabled. Simply drag the function's name and drop it into your source window. The corresponding functions are then inserted, along with their parameters, and commented out, as you can see in Figure 16. If the HTML code already contains Business Functions you are not familiar with, simply use Help (F1) to look up the function's definition.

Figure 16 Business HTML Function Library

Applying the Business Functions to Our Internet Transaction

What our Search and Display application needs now are Business Functions for table, row, and cell formatting. Listing 3 contains the complete code for the table display. By adding this code to the DISPLAY template, the output then corresponds to Figure 17.

TIP: A single Business Function is usually indicated in the code by a pair of functions named SAPTemplate

Listing 3 HTML Code for Table Display from the Template Library

Figure 17 Display of Search Results with Business Functions Added

Brief Look at Advanced Outside/In Processing: Frames and Hyperlinks

The relatively simple result of our flow logic programming still suffers from some major drawbacks. At this point, even with the addition of HTML Business Functions, it doesn't look much different than the Easy Web Transaction we developed earlier. What's missing? HTML frames and hyperlinks. Our next example will cover the techniques for adding these elements.

     The purpose of our new Internet application is to allow users to search and browse for BAPIs. This Web application will consist of several frames, as shown in Figure 18. On the upper left, the frame contains the Function name field, where users type in a BAPI's name (e.g., BAPI_ACTIVITY_COMPARE) or a BAPI name with wildcards (e.g., BAP*). Our application will also, of course, need a Search button.

When users hit the Search button, the system uses a SEARCH template to retrieve a matching list of BAPIs and then outputs them as a list of hyperlinks in the lower left frame. If you select one of these hyperlinks, the BAPI's parameters and types are displayed in the right frame.

Figure 18 BAPI Search and Display Results

Step 1: Write the Code

The main elements - i.e., both HTML templates and flow files - of our planned Web application are located on the SAP Insider Web site.² These include:

  • The start template. This template is named FUNCTION_APPLICATION. It contains a frameset consisting of three frames. Initially, only this Search (template FUNCTION_SELECTION) frame, shown in the top left of Figure 18, is visible.

  • The background template. The other two frames are loaded with the template named FUNCTION_SPACE. This template is rather simple and, as its name suggests, simply sets the background color to the default.

  • The "hit list" template. This template loads into the frame shown on the lower left corner of Figure 18 and is called FUNCTION_SEARCH.

  • The interface detail template. This template loads into the frame named INTERFACE (the righthand frame).

Step 2: Set Up the Flow Logic

FUNCTION_SELECTION contains a pushbutton. The corresponding flow logic maps this button to the FUNCTION_ SEARCH template. On load, the FUNCTION_SEARCH template will search for matching BAPIs by calling the function module RFC_FUNCTION_SEARCH.

     This module returns a list of BAPI names that are output as hyperlinks, as shown in the href tag in the HTML code of template FUNCTION_SEARCH.

     In order to be able to identify the selected function, the name of the function is added to the hyperlink as a name/value pair by means of the wgateurl functions. The associated flow maps an "OnSelect" event to the FUNCTION_ INTERFACE template. FUNCTION_ INTERFACE then displays the function's parameters and types, similar to the way our previous example used a Business Function for table formatting.

Internet Services As Implementation Basis for Workplace MiniApps

A thorough discussion of the mySAP.com Workplace is certainly beyond the scope of this article, but this section will give you a glimpse of the possibilities of Internet services for your organization.

     As you likely already know, a typical mySAP.com Workplace session is set up as a hierarchical launchpad that contains applications from various systems presented in a Web browser.³ The items of the launchpad are based on one or more role definitions. The user only sees functions that belong to her or his individual role. (This is an improvement on previous releases of SAP, where users navigate the overall SAP menu, which often contains numerous transactions a typical user rarely uses.) Easy Web Transactions are excellent candidates for launchpad items, and for professional user transactions that run in a separate Windows GUI session.

     MiniApps offer personalized information to a user's desktop. Most MiniApps display status or alert information. They are loaded when a user logs on to the Workplace. Due to their stateless nature, outside/in applications are very good candidates for MiniApp implementation. As you can see in Figure 19, the Web Application Builder helps you to create a MiniApp that is implemented by a flow logic based on an outside/in Internet service.

Figure 19 Creating MiniApps with the Web Application Builder

Planning for Future Web Development

So far, we have seen that with Basis Release 4.6C on, you can develop Web applications directly within the ABAP Workbench. The runtime platform for these applications is the ITS. While inside/out development keeps application control inside the R/3 kernel, outside/in applications are interpreted on the ITS. This allows for a more stateless approach to Web development, where you can access any SAP system, from Release 4.6C down to 3.1H. Workbench-based development is advantageous for both types of applications. And, looking into the future, because the Web Application Builder is not dependent on the runtime environment, this will be a great advantage, since the R/3 kernel will be HTTP-enabled from Release 4.6D on.


¹ For a detailed introduction to the ABAP Workbench, see my article "A Guided Tour of the New ABAP Workbench," in the June 2000 issue of SAP Insider.
² To view the complete code, visit our Web site at www.sappublications.com/SAPinsider/WAB.
³ For more information on the mySAP.com Workplace and MiniApps, see Alan Rickayzen's article "Universal Workflow Access with the mySAP.com Workplace" in this issue of SAP Insider.

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 karl.kessler@sap.com.

An email has been sent to:






More from SAPinsider



COMMENTS

Please log in to post a comment.

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


SAPinsider
FAQ