its2 by irays


									SAP R/3 Document : SAP ITS Architecture – Part II

       The SAP Internet Programming Model Part II

Writing an Internet Application with ITS
Internet application development, like all application development efforts, starts with a list of
business requirements. Say, for example, that your company’s employees are tired of filling out
purchase requisitions, sending the paper to their managers via snail mail, waiting for approval,
and finally getting what they want three weeks later. This approval process may be necessary for
large purchases, such as a $10,000 computer, but is far too complicated for ordering pencils. To
simplify the process you might want to create an electronic form users can fill out and skip the
approval process altogether when the total is below a certain value. The system could
automatically create a purchase order, which is then sent to a specific vendor.

With SAP R/3, you could ask the users to call a standard SAP transaction such as ME21 to create
a purchase order, but you’d face two problems. First, you don’t want to install SAPGUI on every
employee’s workstation (your company could have more than 50,000 employees). Second, ME21
was designed for expert users and requires far too many fields for the standard user—after all, do
you know what document type NB means?

You probably already have a solution for the first problem: The Internet browser on every
employee’s PC lets you use Internet technology to implement a corporate intranet application.
This approach solves your installation problem in a way that users will immediately accept
because they are used to HTML’s look and feel.

Because each user may have a different browser (ranging from Netscape 2.0 to the latest
Microsoft Internet Explorer), a standard HTML application is probably the best bet for successful
application deployment. What technology do you use to implement this application? First, let’s
determine the business requirements, or what your application must be able to do:
•Allow users to enter several line items per purchase order
•Check valid input for date formats and price
•Administer per-user defaults, such as office location
•Check whether the user is authorized to create a purchase order
•Automatically create a purchase order in SAP.

In addition, the fact that yours is a multinational company with office locations in the U.S.,
Canada, and Europe makes your life more difficult. You’ll have to deploy your application in
several languages, and, because input formats are not the same for every nation, your input
checks will have to be specific to the country where the user is located. (For example, in most of
Europe the date is written “day.month.year” as opposed to the “month/day/year” format used in
the U.S.)

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

After reviewing the requirement list, you realize you need the following:
•Powerful user management to maintain office location, input formats, and user authorizations
•A server that lets you keep the user context for a large number of online users (While the user
enters a purchase order, the entered line items must be kept in your application’s memory until
the user finally commits the purchase order to the database.)
•The ability to save the purchase order to the SAP database.
Writing your application as a regular SAP transaction with the ABAP Workbench should cover
all your project’s requirements:
•SAP user management lets you keep parameter IDs for every user, and you can maintain user
defaults like office location.
•SAP transaction screens take care of input validation by letting you define the valid input
formats for every user.
•The ABAP Dictionary contains short texts for important terminology (such as vendor, material,
and so on) in all installed SAP languages, so you don’t have to translate these terms yourself.
•SAP can handle the user context for a large number of online users.
•By writing your application within the SAP system, you obviously have tight integration with
SAP. Saving a purchase order to the SAP database only requires a call to a Business API (BAPI).
Since BAPIs are only function modules, calling a BAPI from an SAP transaction means
essentially calling a function module with the CALL FUNCTION ABAP command.

SAP Internet Transaction Server (ITS) adds an HTML presentation layer to every SAP screen
(see “The SAP Internet Programming Model, Part I,” SAP Technical Journal, Vol.1, No.1).

Writing an Internet application actually consists of two steps: first, writing the SAP transaction
and, second, Internet-enabling the SAP transaction screens. Let’s go through the steps required to
implement the transaction. (For the record, it should be obvious that the simple implementation I
will discuss here doesn’t cover all business and usability aspects of the application. The
procurement process is very complex, which is why SAP ships a complete set of procurement
applications, called Business-To-Business Procurement, on the SAP ITS.)


To get started, we must first create a dialog program (program type M) with the ABAP
Workbench (SE80). Because you are developing in a customer system, the program must start
with the letter Y or Z; let’s call the program ZZPOCREATE.

To make our application easy to use, it will contain screen 1000 (the main data input screen),
which will have only two input fields:
•Table (with purchase order line items consisting of these fields: delivery date, quantity, order
unit, material number, order price, and price unit).

We could make life easier for the user (for example, the system could automatically determine the
vendor), but for simplicity’s sake I’ve excluded such optimizations here.
Let’s now look at how to create a purchase order automatically in SAP. Obviously, we don’t want
to implement the functionality ourselves, but will use an existing BAPI called
BAPI_PO_CREATE. If you call transaction SE37 and type in the BAPI name, you can see this
function’s different parameters.

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

As you can see in Table 1, the user provides some parameters, and some are calculated when the
BAPI is called, but some must be kept on a per-user basis as a user default. The R/3 infrastructure
comes in handy here, because the R/3 user management can store these parameters in parameter
IDs. When system administrators set up a new user, they use the R/3 user interface to set up the
appropriate values for the parameter IDs (see Figure 1).

Figure 1. Values for parameter IDs.

Parameter Name                                       Meaning                         Provided By
BAPIEKKOC-VENDOR                                     Vendor delivering goods         User
BAPIEKET-DELIV_DATE                                  Delivery date                   User
BAPIEKET-QUANTITY                                    Quantity                        User
BAPIEKPOC-UNIT                                       Unit of measure                 User
BAPIEKPOC-PUR_MAT                                    Material number                 User
BAPIEKPOC-NET_PRICE                                  Net price                       User
BAPIEKPOC-PRICE_UNIT                                 Price unit                      User
BAPIEKPOC-DOC_TYPE                                   Document type                   User Default BSA
APIEKPOC-PURCH_ORG                                   Purchasing organization         User Default EKO
BAPIEKPOC-PUR_GROUP                                  Purchasing group                User Default EKG
BAPIEKPOC-STORE_LOC                                  Storage location                User Default LAG
BAPIEKPOC-CO_CODE                                    Company Code                    Calculated
BAPIEKPOC-DOC_DATE                                   Document date                   Calculated
Table 1. Parameters for BAPI_PO_CREATE

To continue writing the transaction, we need to provide ABAP variables that will hold the values
the user enters (see Figure 2). An element on the R/3 screen holds a link to an ABAP variable
with the same name, which means that it displays the current value and updates it whenever the
user enters something.

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

Table 2. ABAP Variable for bolding input

We should name the ABAP variables exactly like the BAPI parameter so that the R/3
Screenpainter will recognize the name as an ABAP Dictionary field and copy the attributes from
the Dictionary. Naming the variables this way has several advantages:

•The Screenpainter will place the item description from the ABAP Dictionary next to the entry
fields. If table controls are used, the item description will appear in the table header. Because the
ABAP Dictionary stores a translation of all item descriptions, you won’t have to translate the item
descriptions yourself; users logging on in English will see English descriptions, users logging on
in French will see French descriptions. You only have to display these descriptions on the HTML
page, which is very easy with ITS.

•The format description from the ABAP Dictionary will be used automatically. This means date
fields will be displayed and can only be entered with the date format that is set in the user
master—you will not have to program your input format checking and display formatting

•If the ABAP Dictionary stores a value table for the data field, users will be allowed to enter only
values that are also in the value table. This is helpful when entering a material number, because
the ABAP Dictionary will immediately check whether the material number the user entered is

Now let’s create the necessary ABAP variables in the program:

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

program     zzpocreate.

* BAPI structures
tables:        bapiekpoc,             " PO Item data
               bapieket,              " PO Schedule
               bapiekkoc,             " PO Header.

For the table control, we need two internal tables that will hold
the data entered by the user. Here’s how to create them and to
declare the table control:

* Table controls
controls po_item_ctrl type tableview using screen 1000.

•   BAPI call parameters

data: po_items like bapiekpoc occurs 0 with header line.
data: po_item_schedules like bapieket occurs 0 with header line.

If everything goes well, the BAPI will return the purchase order
number. If there is a problem, a detailed error log will be
contained in the variable BAPIRETURN. Let’s now create these two

* BAPI results
data: po_number          like bapiekkoc-po_number.
data: bapireturn         like bapireturn occurs 0 with header line.

We also need some helper variables:

* A few helper variables ...
data: po_item_pos type i. " Cursor for table control
data: app_initialized type i value 0.      " Flag if application
data: fcode like sy-ucomm. " Function code

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

Now we have to create screen 1000. In the end, it should look something like Figure 3.

To place the VENDOR input field on the screen, use the function Goto->Dict./Program
Fields in the Screenpainter menu. Then, enter the data field name into the text box; for
example, bapiekkoc. Use the function Get From Dict, select the field bapiekkoc-
vendor, and choose Copy. Make sure you select the long text radio box, which will
automatically create an item description next to the input field (see Figure 4).

To create the table control, use Edit->Create Element->Table Control and give it
the name PO_ITEM_CTRL. When you enter the control elements, set up the table columns as in
Figure 5.

Now let’s create the flow logic of screen 1000:

process before output.
   module initialize_app.
   loop at po_items with control po_item_ctrl cursor po_item_pos.
     module item_to_ctrl.

process after input.
   loop at po_items.
      module ctrl_to_item.
   module process_fcode.

The first module is simple: It only creates 40 records in the tables PO_ITEMS and
PO_ITEM_SCHEDULES. PO_ITEMS contains item data such as the material number, and
PO_ITEM_SCHEDULES contains information such as when the user would like to have the
material shipped. These 40 records will initially display 40 empty lines in the table control.

module initialize_app output.
  if app_initialized = 0.
    app_initialized = 1.
    do 40 times.
      po_items-po_item = sy-index.
      po_item_schedules-po_item = sy-index.
      append po_items.
      append po_item_schedules.

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

The next module, ITEM_TO_CTRL, moves the data from the internal tables that hold item and
schedule information into the table control. The data is moved line by line, so the module reads
the appropriate record from the internal tables and copies the data into the data structures
displayed by the table control. Here is the code:

module item_to_ctrl output.
  read table po_items          into bapiekpoc index po_item_pos.
  read table po_item_schedules into bapieket index po_item_pos.
endmodule.                             " ITEM_TO_CTRL OUTPUT

The Process After Input (PAI) modules process the data entered by the user. PAI module
CTRL_TO_ITEM is the reverse operation of ITEM_TO_CTRL; it copies the data the user
entered into the table control back to the internal tables. Again, the code is simple:
module ctrl_to_item input.

* ----------------- Update Item Table -------------------
  read table po_items       index po_item_ctrl-current_line.
  move bapiekpoc-unit       to po_items-unit.
  move bapiekpoc-pur_mat    to po_items-pur_mat.
  move bapiekpoc-net_price to po_items-net_price.
  move bapiekpoc-price_unit to po_items-price_unit.
  modify po_items           index po_item_ctrl-current_line.

* ----------------- Update Schedule Table ---------------
  read table po_item_schedules index po_item_ctrl-current_line.
  move bapieket-deliv_date to po_item_schedules-deliv_date.
  move bapieket-quantity    to po_item_schedules-quantity.
  modify po_item_schedules     index po_item_ctrl-current_line.
endmodule.                             " CTRL_TO_ITEM INPUT

Finally, here comes the real stuff: Let’s create a pushbutton on the screen with the function code
SAVE. Once that’s created, you need to put the variable FCODE into the screen field OK-CODE
so that the function code of the button is automatically copied into the FCODE variable. Listing 1
shows the code that processes the SAVE function code in the module PROCESS_FCODE.

This code contains a few items that require more explanation. First, notice that today’s date and
the user creating the purchase order are automatically determined from the ABAP variables SY-
DATUM and SY-UNAME. Furthermore, parameter IDs are retrieved from the R/3 user
management with the ABAP command GET PARAMETER ID. Also, we determine the company
code from plant based on the customizing table T001K.

I should also explain why the item and schedule tables are copied into two other internal tables.
The answer is simple: Remember that we had set up the item and schedule table with 40 empty
records? Because the user has not entered data into all these records, we filter out records where
data is present and copy only those records into the tables PO_ITEMS2 and
PO_ITEM_SCHEDULES2, which are then passed to the BAPI. You could have created the
purchase order from the original tables as well, but you would have received warnings for every
empty line item. To avoid this, filter out the empty records.

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

The last step is to create a transaction code ZZPO, then we are ready to test our application. We
start the transaction in SAPGUI and use the ABAP debugger if we discover any problems.

Figure 3. Screen 1000.

Figure 4. Creating the VENDOR input field.

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

Figure 5. Column setup for entering control elements.

 module process_fcode input.
   data: plant like t001w-werks.
 * BAPI call parameters
   data: po_items2           like bapiekpoc occurs 0 with header line.
   data: po_item_schedules2 like bapieket occurs 0 with header line.
   if fcode = 'SAVE'.
     bapiekkoc-doc_date    = sy-datum.
     bapiekkoc-created_by = sy-uname.
     get parameter id 'WRK' field plant.
     get parameter id 'BSA' field bapiekkoc-doc_type.
     get parameter id 'EKO' field bapiekkoc-purch_org.
     get parameter id 'EKG' field bapiekkoc-pur_group.
 * derive company code from plant; table t001k (customizing table)
     select         * from t001k       client specified
            where bwkey         = plant.
       move t001k-bukrs to bapiekkoc-co_code.
 *   Copy actual line items to call table
     refresh po_items2. refresh po_item_schedules2.
     refresh po_items2. refresh po_item_schedules2.
     loop at po_items.
       if po_items-pur_mat ne space.
         move po_items to po_items2.
         get parameter id 'LAG' field po_items2-store_loc.
         po_items2-plant = plant.
         append po_items2.
     loop at po_item_schedules.
       if po_item_schedules-quantity gt 0.
         move po_item_schedules to po_item_schedules2.
         append po_item_schedules2.
     call function 'BAPI_PO_CREATE'

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

                   po_header                  = bapiekkoc
                   purchaseorder              = po_number
                   purchaseorder              = po_number
                   po_items                   = po_items2
                   po_item_schedules          = po_item_schedules2
                   return                     = bapireturn
                   others                     = 1.
   clear fcode.
 endmodule.                                             " PROCESS_FCODE

Listing 1. Processing the SAVE function code in the module PROCESS_FCODE

If you don’t already have it, you can get SAP ITS either from your SAP CDs or by downloading
version 2.2 (which was shipped with R/3 release 4.5A) from the SAP Labs homepage, You don’t necessarily need R/3 4.0A to run the
application; however, if you use an R/3 3.1X release you must replace the table control with a
STEP LOOP because table controls are only supported from release 4.0 upward. The lowest R/3
release that ITS supports is 3.0D.

To install ITS, just execute the setup program on an NT server with an installed Web server (IIS
or Netscape), and follow all the steps. You will need to specify your Web server, the name of the
ITS instance (most system administrators give ITS the name of the R/3 instance), and R/3 system
information. You may also specify an R/3 user name and password, which will be the default
with which you log on to R/3. If you do not provide login information, ITS will prompt you for
the usual R/3 login information with client, username, password, and language. After the ITS
setup, install SAP@Web Studio.

Once you install ITS and SAP@Web Studio, you’ll need to create an ITS service that contains all
the information necessary for connecting to, logging on to, and starting a transaction on the R/3

After starting upSAP@Web Studio (entries in the Windows NT START menu are created
automatically), you’ll use wizards to create a project that will contain all the objects you are
currently working on (services, templates, graphics files, and so on).

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

Use the File->New menu to create a project; let’s call our example MyProject. Next, use
File->New again and go to the File Wizard tab. There, choose the Service Wizard
and follow all the steps. First, you are asked for a service name. Since the transaction is called
ZZPO, let’s also call our service ZZPO. Next, specify the R/3 system you want to connect to. You
can also use the global settings if you specified a specific R/3 system in the ITS setup. The same
rule applies to the R/3 login and password; you can either use the login that you specified in the
ITS setup or give a service-specific login. For this example, however, we won’t give a username
or password because we want users to log on interactively once they start our electronic
purchasing application (see Figure 6).

Figure 6. The SAP@WEb Studio Service Wizard.

Finally, specify a timeout (the period of inactivity after which ITS will log a user off the system)
and the transaction code ZZPO. Once confirmed, the service is created.

Now we have to create a template for screen 1000. A template is basically an HTML page into
which ITS merges the data fields from the R/3 screen. ITS makes it possible for a static HTML
page to contain live R/3 data. If the page contains an HTML form with input fields, ITS can also
update the R/3 screen values from the user input in the HTML page.

Use SAP@Web Studio’s File->New option again and choose the HTML Business
Template option under the Files tab. Pick the service name ZZPO; enter program name
ZZPOCREATE, screen number 1000, and theme 99—but no language. (The theme is an ITS
concept that lets you keep several HTML user interfaces for the same transaction; theme 99 is the
default.) SAP@Web Studio will create a file called ZZPOCREATE_ 1000.html, which is formed
by concatenating the program name and the screen number.

Merging live R/3 data into the page is simple: Suppose you have a field DATAFIELD on your
R/3 screen; all you have to do is enclose your field name in back apostrophe symbols. A very
simple HTML page would look like this:

Article From
SAP R/3 Document : SAP ITS Architecture – Part II



<TITLE> A very simple example </TITLE>



This is the value of datafield `DATAFIELD`



When you want to display as well as update an R/3 value, you must use HTML forms:



<TITLE> A very simple update example </TITLE>









The function wgateURL() creates a valid Web address (URL); you don’t have to worry about
the technical details. Also notice that the SUBMIT button sends the function code UPDA along
with the data back to R/3.

Displaying a table control can be more complicated. Suppose table control T has multiple lines, T
has a datafield X , and ITS needs to display every single line of T. Because we don’t know what
part of the data set is displayed by T while writing the HTML template, ITS makes this
information available to the HTML template at execution time. T.firstVisible contains the
first visible record number. T.lastVisible contains the last visible record number.

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

The value of the field X in line 5 is expressed by X[5]. It is of course easy to display a specific
line (X[5] for example) in an HTML template, but what about displaying the data from the first
visible to the last visible line? For this, we need the loop control structure that the ITS HTML
template concept provides. Consider the following example:



<TITLE> How to update a table </TITLE>




`repeat with i from T.firstVisible to T.lastVisible`









Listing 2 shows how to create a template for screen 1000. The template contains some elements
we haven’t talked about yet:

•The variable ~messageLine contains a value if the R/3 screen displays a message.

•The table navigation buttons work a little differently than buttons that only send a function code;
you need to specify the table control with the ~control parameter and the desired navigation in
the ~event parameter.

•The column headers of table control T are contained in the variables T-COLUMN[i].title.

•The number of columns contained in table control T is in the variable T.columnCount.

•The width of an entry field F on the SAP screen is contained in the variable F.maxsize.

Article From
SAP R/3 Document : SAP ITS Architecture – Part II



    <INPUT TYPE="SUBMIT" NAME="~OkCode(/0)" VALUE="Update">
    <INPUT TYPE="SUBMIT" NAME="~Control=PO_ITEM_CTRL,~Event=TopPage"
                         VALUE="Top Page">
    <INPUT TYPE="SUBMIT" NAME="~Control=PO_ITEM_CTRL,~Event=PrevPage"
                         VALUE="Previous Page">
    <INPUT TYPE="SUBMIT" NAME="~Control=PO_ITEM_CTRL,~Event=NextPage"
                         VALUE="Next Page">
    <INPUT TYPE="SUBMIT" NAME="~Control=PO_ITEM_CTRL,~Event=LastPage"
                         VALUE="Last Page">


    `repeat with i from 1 to PO_ITEM_CTRL.columnCount`

    `repeat with i from PO_ITEM_CTRL.firstVisible to

         <TD><INPUT TYPE="TEXT"
         <TD><INPUT TYPE="TEXT"

         <TD><INPUT TYPE="TEXT"
         <TD><INPUT TYPE="TEXT"
         <TD><INPUT TYPE="TEXT"


Article From
SAP R/3 Document : SAP ITS Architecture – Part II




 Listing 2. Creating a template for screen 1000.

OK, let’s review what we have now:

•A service file containing all necessary information to connect to, log on to, and start a
transaction in R/3

•A template for program ZZPOCREATE screen 1000.

Now we need to publish these objects—that is, copy the objects into the correct directory
locations on the ITS server (see Figure 7). To do this, create an ITS Site using the menu
command Project->Site Definition. Just hit the New button and answer all the
questions. Use the dropdown list in the upper left corner of the Studio window to set the active

Now when you select the ZZPO service name with the right mouse button, you will see the option
Publish. This option brings up a dialog box—if you confirm, SAP@Web Studio will copy all
objects to the proper location on your ITS server.

Figure 7. R/3 instance information.

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

That’s it! Start the service using the following address in your Web browser:
http://host/scripts/wgate/ZZPO/! This command will automatically establish an
R/3 connection and prompt you to log on (if you didn’t supply logon information in the ITS

After you log on, you should see the page shown in Figure 8 (page 36). It’s no work of art—a
professional designer could significantly improve the look. But this article focuses on developer-
oriented issues, so let’s go back and test our purchasing application. As I said before, the SAP
screen interface does a lot of input checking and data formatting for you. Try, for example, to
enter an invalid date, and the HTML page will display an error message that is contained in the
variable ~messageLine.

Figure 8. Viewing connection detail from the monitor page.

One of the side effects of entering an invalid date is that all other lines are blocked from input to
alert the user to correct the input error before entering further data. Although SAPGUI blocks the
data input automatically, the HTML page does not—all fields remain ready for input. You can
make the HTML page reflect the SAPGUI screen change in one simple step, though. For any
input field, the attribute .disabled signals whether or not an input field is ready.

With a little HTML template magic, we can also block the HTML input fields when the screen
input fields are blocked by putting an if statement around the HTML input fields:

Article From
SAP R/3 Document : SAP ITS Architecture – Part II

`if (BAPIEKET-DELIV_DATE[i].disabled )`

<!-- only display the value because

field is not ready for input -->



<!-- field is ready for input -->






Also, you may have noticed that the table control navigation buttons currently display only
English text. To make the purchasing application a multilanguage application, display the button
labels in the appropriate language. You can create buttons on the SAP screen and let SAP do the
translation, but this is a bit cumbersome.

ITS uses a concept called “language resources” for translating Internet applications. A language
resource (which you can create with SAP@Web Studio) is basically a short text that can be
identified with an abbreviation in the HTML template. Use the menu item File->New to bring
up the dialog for creating new objects, choose the File Wizards tab, then choose Resource
Wizard. SAP@Web Studio will bring up a dialog where you can enter your service ZZPO, theme
99, and the language key (for example, De). (See Figure 9.) Once you confirm the dialog,
SAP@Web Studio will create an empty language resource file that you can fill with the necessary
short texts.

Using language resources in the HTML template is easy; just refer to the text by prefixing the
identifier with a # mark:

Figure 9. Creating a language resource file.

Article From
SAP R/3 Document : SAP ITS Architecture – Part II





And that’s it! We’ve created a scalable multilingual intranet purchasing application that is ready
for use.

Michael Bechauf is development manager in the SAP ITS group. He has worked for SAP in
various development positions and as a specialist for R/3 performance since 1992. You can reach
him at

Note : This article appeared in the second issue on

          Please visit the above site for the original article

Article From

To top