You may not have given much thought to using Business Server Pages (BSP) in BW, but you should give them another look. Using BSP technology makes life much easier when it comes to developing Web pages. It also provides direct access to some of BW’s business functionality. To develop BW applications on the Web using BSP, you’ll need a basic understanding of HTML as well as a good grasp on ABAP. Being comfortable with JavaScript and object-oriented ABAP is also helpful when developing sophisticated Web applications with BSP. Let’s say your firm decides to deploy all its BW applications on the Web, and most users will access their BW data online. Your BW team is expected to provide users with a host of options via the Web such as the ability to maintain personalization values for query variables, maintain user favorites, initiate master data loads via event triggers, and perform common trouble shooting tasks. You can provide these options by following five basic steps:

1. Create the actual BSP application comprising of a page or more.
2. Determine what data needs to be displayed when the user initially calls the application and write the ABAP code that gathers the data.
3. Select the format and page design to display the data and perform the necessary coding in HTML or provide the appropriate BSP extensions.
4. Associate each possible user action (mouse click, keystroke, etc.) on the page with a user event and write ABAP code for each.
5. Repeat steps 2 to 4 for each page in the BSP application.

Create the BSP Application

To illustrate these five steps, let’s develop a simple BSP application that allows users to maintain personalization values for query variables. Start by entering transaction code SE80, which provides access to the ABAP Development Workbench. You can also use SE80 to develop BSP Extension elements, which in turn are used to create HTMLB tags. In the ABAP Development Workbench (Figure 1), click on Repository Browser and select BSP Application from the drop-down box. Type in a name for your BSP application and click on the display icon. Click on Yes when asked if you want to create a new application and type zpersonalize as the application name.  

Build the BSP Functionality

At this point you have created a top- level BSP application, but you still need to create the layer that links it to the Web AS infrastructure and enables the page’s functionality. SAP provides two options for retrieving data in a BSP application — ABAP or JavaScript. JavaScript can also be used in the body of the BSP application regardless of which language option is employed for retrieving data. I used ABAP as the programming language for my application. You can access the code for this application by clicking this link. In the Object Name window, locate the name of the BSP application you just created and click on the file. Select the option to create a page (Figure 2) and name the page zselvar.htm. You are now presented with a new screen in the Web Application Builder where you enter additional information including the application’s name and description. In the Page Type section, select Page with Flow Logic. Entering this information in the Web Application Builder opens the development environment for the BSP page (Figure 3).     You define the underlying pages that make up the application using various tabs in the development environment and providing them with any additional coding. Page zselvar.htm allows users to choose from a list of variables that they can personalize and provides an option to modify or delete a user’s existing personalization. Enter the variables in the Page Attribute tab of zselvar.htm. The Layout tab in Figure 3 contains the code for displaying the page in the Web browser and makes use of BPS HTML elements for presenting the data. This will be employed in the presentation layer of the page. I’d like to point out a few features of the code I used, which can be seen in Figure 3. Remember, the complete code for this tab along with the rest of the coding required for this application is available at this link. The first line of code, <%@page language=”abap”%>, establishes that ABAP is being used as the scripting language. Again, BSP applications can also support JavaScript as well as ABAP, and JavaScript can be used anywhere in the Layout tab of a BSP page. The second line, <%@extension name=”htmlb” prefix=”htmlb”%>, establishes that the application uses BSP extensions — or HTMLB tags. BSP extensions are supplied by SAP and can be used to significantly to reduce your coding time. Developers can also create their own custom BSP extensions. Using HTMLB tags eliminates the need to specify the traditional and tags. The code contains a number of tags that I have used in the Layout tab, including one to create the HTML page title () and others to define the drop-down boxes (). HTMLB tags are employed in this application to create the list in the drop-down box used to select a variable to personalize, establish to which InfoObject the variable belongs, display all the personalized values for a variable, and identify the three different buttons on the page. Code the Event Handler tab to define the different types of user events for the page. The predefined event handlers available in the SAP system include:

• OnCreate performs data initialization (or object creation) and is called once when the page is created.
• OnRequest is called whenever a request is made for a particular page and restores the internal data structures.
• OnInititalization can execute any program and retrieve data as well as read display data from the database.
• OnManipulation manipulates the HTTP data stream.
• OnInputProcessing checks and processes user input and defines navigation to determine what page a user is taken to when the BSP is called.
• OnDestroy is available for special functions.

For a full description of when these events are triggered, consult the SAP BSP documentation at help.sap.com under NetWeaver>SAP Web Application Server>Web Applications and Business Server Pages>Programming Model>BSP Components>Event Handler. I coded an OnInititalization event for zselvar.htm that populates the drop-down box with a list of query variables that can be personalized. The variables should be defined as a user-entry type during variable creation. I also have coded for an OnInput Processing event to process input if a user chooses to insert, modify, or delete personalization values. When a variable is selected, all personalized values set by the user for that variable will be displayed in a list. Figure 4 on the next page shows the onscreen display zselvar.htm, which is used to select variables for personalization. The drop-down window indicates the variable selected (ZCUNOTFC). An output field shows to which InfoObject it belongs (0NOTIFICATN) as well as a table listing the values personalized for that variable (Personalized List).  

Add Another Page to the Application

When executing zselvar.htm, if a user selects a personalized value in the table and clicks on the Insert or Modify buttons, a new page opens to support the function. Following the same process used to create page zselvar.htm, you need to create a new page (ZProcess.htm) in the same BSP application (zpersonalize) to allow for the additional options. This is this done following a procedure similar to that used for creating zselvar.htm. It starts with selecting Create and Page shown in Figure 2, then naming it ZProcess.htm. Once again, you must define the variables for the new page in the Page Attribute tab. I have supplied code on the BW Expert Web site to add to the Layout tab that lets users modify personalization values, or insert values depending on their selection. After users have made their changes, they must click on Save or Exit. Based on the users’ personalization option to Insert or Modify a variable, the values for the users are updated in the ODS that store personalization data. Coding for an OnInputProcessing event in the Event Handler tab must be added along with Initialization code to determine the values needed for presentation. The output of page ZProcess.htm is shown in Figure 5.   When creating ZProcess.htm, a step must be added to provide for navigation between it and page zselvar.htm. Double-clicking on the application zpersonalize provides access to the Navigation tab (Figure 6). Specify the pages and define the navigation request required to open and move between them. In my sample code, I have defined two navigation requests — TOPROCESS and TOSELVAR.   Now it’s time to activate all the BSP pages and the entire application. Every BSP application has a URL, or URLs, associated with it. These are available in the Properties tab. A link to access the BSP application can be provided from the BW Web application and should be determined by the BW team. This link should be in a location where users access most of their BW data.