Web Development with ABAP: Business Server Page (BSP) SAP BASIS

As we already explained in Chapter, with the appearance of the SAP Web Application Server 6.10 back in 2001, SAP replaced the SAP Basis System as the underlying platform for SAP Solutions. The SAP Web Application Server, commonly referred to as SAP WAS, is the technological foundation and platform for the SAP R/3 Enterprise, as well as most of the other SAP Solutions within mySAP Business Suite and the SAP NetWeaver integration platform.

The main difference between the SAP WAS and SAP Basis is that the SAP Web Application Server supports natively Web protocols such as HTTP(s), SMTP, SOAP, and others, which allows users to avoid using the traditional Internet gateway used in SAP installations, namely the Internet Transaction Server (ITS). Another big difference is that the system includes a new development model, known as Business Server Pages (BSPs). With BSPs you can know build Web applications to for access to data and information on the SAP systems.

BSP application is made up of a set of HTML pages that contain server scripts and ABAP code. They can include, for example, SELECT statements that access the system database, BAPI calls to run processes, or interfaces with any SAP component, such as R/3 systems, BW, and others. In order to code server side scripts, we can use two development languages: ABAP and JavaScript. We can also use JavaScript to create client side scripts. Compatibility with the browser is the only limit to including code that runs on the client. For instance, if the Web browser that we use includes the plug-in of Macromedia Flash, we could include flash animations within our pages.
Once you decide which server side language to use (ABAP or JavaScript), you will have to add special tags in order to combine the code with HTML (Hypertext Markup) or WML (Wireless Markup Language).

Developing a BSP

Web applications developed using the BSP model are built using the Web Application Builder, which is a transaction integrated within the ABAP Workbench. For this reason, traditional ABAP developers will be able to adapt quickly to the look and feel of this new transaction. The way to develop these Web applications is quite similar to the traditional programming model for some of the ABAP applications on SAP systems. Often, even the same transactions are used, like the Class Builder (transaction code SE24). We can access the development environment of BSPs from transaction SE80 (Object Navigator). From this screen we will be able to access also other tools needed for the development, such as the ABAP Editor or the Debugger.

The system does not impose limitations for developing Web applications with the ABAP Editor. We can also use some more specific editors for this type of applications, as long as they meet the Web DAV standard, which allows for the exchanging information between different systems. SAP follows this standard, and you could, for instance, develop Web pages with external editors such as Macromedia Dream Weaver MX, Microsoft FrontPage, and others, and automatically transfer those pages to the SAP Web Application Server.

In transaction SE80, select the option BSP Application, and enter the name of the BSP to me created or maintained.

BSP option within the Object Navigator

BSP option within the Object Navigator

In this small practical example, we are going to develop step by step a BSP application with flow logic. This was the only option in the initial SAP WAS release 6.10, but it had a lot of limitations. With the introduction of 6.20 and later 6.40, there are other development and enhanced development options such as the Model-View-Controller (MVC) and the BSP Extensions, well known in other programming environments that include the tab libraries.
As a brief summary, we can describe a BSP application as follows:

  • It contains one or several HTML, pages.
  • Each page can include any HTML or WML tag.
  • You can dynamically include SAP data or data from non-SAP systems.
  • The business logic can be entered using tags and scripts in the HTML pages.

These server side scripts are used to generate static pages which are then passed to the client.

  • SAP and non-SAP data are retrieved, processed, and formatted.

We can find many similarities between the BSP development in SAP systems and the Web development of the Java environment (JSPs) or in the Microsoft environment (ASPs). We consider a first practical example in the next section.

Your First BSP: Hello World!!!

In order to show in a simple way how to create BSP applications, we will show a very simple BSP that will display the message Hello world!!! in a HTML page using different font sizes. The static HTML code will contain the dynamic ABAP code on the server side.

Step 1: Create the BSP Application

From transaction SE80, enter the name of the BSP in the corresponding field. In our example we will use "ZSAMPLE1."

Entering the BSP name

Entering the BSP name

When pressing ENTER, the system will detect that the BSP application does not exist and will pop up a dialog box proposing its creation.

Creating an object dialog box

Creating an object dialog box

Click on Yes. The system will request to enter a short description in a new dialog box. Enter some descriptive test and click on the Create button. As with other repository objects, we have to enter the package. In this example (which will be different in real development) we will define the object as local by clicking on the Local Object button of the Create Object Directory entry dialog box. For the moment, we have created the BSP object.

Step 2: Create the BSP Page

We should carefully differentiate between BSP application and BSP page. The application is a set of pages with some logic, whereas a BSP page is just one of the pages within a BSP application. To create a BSP page, right-click on the BSP application, and from the function menu, select Create | Page.

Creating a BSP page

Creating a BSP page

The system shows a new dialog screen, where you should enter the name of the page to be created, for example, default.htm. We also have to enter a short description and the type of page, which by default is Page with flow logic. We will leave the default option in the example. The system will add the page in the hierarchical structure of the BSP application and shows on the right side of the screen the layout editor for the page.It also has generated automatically some HTML code.

Creating a BSP page

Creating a BSP page

On the layout editor, we are going to make some changes to include a script in ABAP that will perform the objective of this example, and also remove some elements that we don't need at this time.

BSP code

BSP code

The code in the figure shows some new elements that need some description:

  • Scripts are displayed in the editor in a blue color, whereas the HTML code is in black.
  • Observe that the script code used has been ABAP as indicated in the first sentence.
  • In order to include ABAP within the layout you have to use directives, as with other programming languages. The following table shows the directives that can be used.
  • Basically, the program modifies the font size of the shown text.

Directive Comments

We will not go into detail in this example about the meaning of the HTML elements. Please refer to diverse HTML and Web manuals or the SAP online help. Remember to save the page.

Step 3: Running the BSP

In order to run the BSP, the first thing we have to do is to activate it. The activation concept is the same as for the other repository objects. Refer to initial sections of this chapter. First, leave the editor screen of the BSP page; otherwise the activation will fail. Then, place your cursor on the name of the BSP application, and click on the Activate button (you could also use CTRL-F3) to activate the BSP application and the created BSP. To run the application, click the Direct Processing button, or, alternatively, press F8. Because we have not defined the page as public, the system will request the SAP username and password. Enter the information requested and click OK. We could have alternatively defined the page as public. Look up the SAP online help the description of transaction SICF (service maintenance).

Entering username and password for BSP

Entering username and password for BSP

Next the system will display the generated HTML page in the browser.

Result from our first BSP application

Result from our first BSP application

If you look up the source code from the browser (with Microsoft Internet Explorer, select View | Source), you can actually see that the whole code is static, and the font text "Hello world ..." changes from 1 to 7.

HTML source code

HTML source code

After this first success, let's have a closer look to each of the elements that make up a BSP application.

Overview of BSP Concepts

The elements that make up a BSP application are the following:

  • Properties.
  • Navigation.
  • Navigation modeler. This model allows for designing different browsing models between HTML pages. We will not deal with further details about this element.
  • BSP pages.

You can see this option in the tabstrips in the right-hand side of the screen of a BSP application.

BSP Properties

In the section for the properties, the system shows the administrative data for the application. These include the user, creation and modification dates, and package. You can enter the following information:

  • Initial BSP page. This is useful for the system to know which is the first page to run when the application is executed.
  • Application class. For professional BSP application, you should use an application class to implement all the business logic.
  • Theme. With the theme you can personalize the output for an application without the need of modifying the code.
  • Type of state. In contrast to other Web development environments, with SAP we can decide whether the application keeps the state (all the variable information of an application) between the execution of the pages. The usual way is to make stateless applications.
  • Portal support. With this check box you can indicate that the application could be used for execution within the SAP Enterprise Portal.


Navigation allows for defining calling routes between HTML pages. In this way, if a page is called from several other pages and we have the need to modify the name of the page, we would only have to perform the change in one single place. The column Start is used to enter the name of the source page. In the column Navigation Request we enter the alias used in the page, and the column Target is used to enter the name of the target page. As can be seen, this is a procedure for indirect calls.

BSP Pages

The BSP pages are the main components of the BSP applications. BSP pages are also made of the following elements:

  • Properties
  • Layout
  • Event handler
  • Page attributes
  • Type definitions
  • Preview

Let's take a closer look at each of these elements.

Page Properties

As in the BSP applications, there is a tabstrip in the application to enter the main properties or attributes of the BSP pages. The most important properties are as follows:

  • Description. Field used to enter a brief description of the page.
  • MIME type. Generally, the type of the pages are text/html.
  • Compression type. Normally, pages do not use any type of compression, but you could decide whether you want trailing spaces removed.
  • With or without server scripting. By using the W/O Server Code check box, you can decide whether to allow scripting on the server side. This check is verified at runtime
  • Page type. The different type of pages that we can create are as follows:
    • View. This type is used when developing an application following the Model-View-Controller.
    • Page with flow logic. This is the example of the page we have created in the previous example. This type is a page that will have a set of events associated, which will be executed before and after the execution of the page.
    • Page fragment. These fragments can be used like "includes" for other pages. This is a utility that can be useful for building page modules. For instance, you can create one page of this type with the foot page that you want to show in every page of the application.
  • Error handling and error page. You can assign here a page that the system will show in case of error at runtime.
  • Status. This section is to describe the status characteristics (stateless or statefull) of the page.
  • Caching. You can decide the duration or time of residence of the pages in the server and/or browser caches.
  • Transfer options. In this section you can define some of the options for compression and security, for example, deciding on HTTPS (HTML over SSL).
  • Additional administrative information. In this section you can see username and the creation and modification dates of the BSP page.

Event Handler

This option only appears in pages with flow logic. This section can be used to code the actions to be performed for each of the system events. In this case, the only valid language is ABAP. When selecting an event in the first input field, the system will show the editor for the code corresponding to that event. Possible events are as follows:

  • OnCreate. This event is run the first time when the page is generated, just in applications that keep the status (statefull). It's used to initialize once the data objects.
  • OnRequest. This event is run when there is a request of the page by an user. This event is run before other events such as OnInitialization or OnInputProcessing. It is used to restore internal data in application which do not keep the state (stateless).
  • OnInitialization. This event is executed when a page is processed. If this action is necessary, then it is used to restore data.
  • OnManipulation. This event is used for postprocessing of an http data stream.
  • OnInputProcessing. This event is activated when a dialog with a user is established. This event can be used to implement verifications of input fields and activate the navigation according to the user entries.
  • OnDestroy. This event is run immediately before the instance of the page is destroyed. It is used to perform some "cleaning" actions so that no obsolete data are kept in the system memory.

Page Attributes

This tabstrip is used to enter any "data object" that we need to share for the layout and the events. To create a page attribute, we have to enter the following information:

  • Attribute name. This first column is used to specify the name for the attribute.
  • Typing method. You can either set TYPE for regular data objects or TYPE REF TO for the creation of object instances.
  • Associated type. This is the ABAP reference type for the page attribute. The reference type must be either a global type of the dictionary, a global object type, a predefined ABAP type, or a type defined in the Type Definition tabstrip of the BSP page.
    Description. Brief description of the attribute.
    Auto. If you check this flat, the system will automatically update the value of the attribute if the system already has an attribute with the same name.

Type Definitions

In this tabstrip, the system shows an editor that can be used to enter type definitions (like the ones used with the TYPES sentence). We have the option to create any type likewise a traditional ABAP program.


The preview tabstrip can be used to display approximately how the page layout will appear when the HTML page is called, but only of the static code. The scripts for dynamic content are not run in preview mode.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status