creating a bsp application - purchase order details display_v1

8/2/2019 Creating a BSP Application - Purchase Order Details Display_v1

1/13

1

Creating a BSP Application Leveraging In-

Built Internet Capabilities of SAP Web AS(Purchase Order Details Display Application)

Contents

1. Scenario Description ........................................................................................................................... 2

1.1. Creating a BSP Application ............................................................................................................ 2

1.2. Creating a Page: .............................................................................................................................. 3

1.3. Testing the Application ................................................................................................................. 11


2/13

2

1. Scenario Description

This scenario is a demonstration of the BSP application capabilities. BSP offers a way to enable applicationsfor internet. BSP leverages the capabilities of the Internet Communication Manager (ICM) and offers flexible,web based look and feel. This application will demonstrate a purchase order display program, which will takea SAP PO number as input and will provide the details of the PO items as output.

1.1. Creating a BSP Application

Access transaction SE80:

Fig. 1a: Transaction SE80

Choose type BSP Application and enter a Suitable name for the application:

Fig. 1b: BSP Application Naming

Choose Enter and confirm the new application creation dialog. System displays the new application creationbox.

Fig. 1c: BSP Application Properties


3/13

3

Enter a suitable description and choose to create the application.

Fig. 1d: Creating the application

Once the application is saved, activate ( ) the application.

1.2. Creating a Page:

Right-click on the application name and choose Create -> Page

Fig. 2a: New Page Creation

Provide the name of the file and a description for it:


4/13

4

Fig. 2b: Properties of Page

System creates the page with some default components.Move to tab Properties and scroll down to display the external URL of the page, which will be used for callingthe application from a web browser.

Fig. 2c: URL of the Page

Save and activate the page.Now we need to create the UI elements in the page. To do so, use the Tag Browser library from SE80 toaccess the legitimate tags.


5/13

5

Fig. 2d: Tag Browser Library

Choose BSP Extensions-> Transportable -> htmlb to display the legitimate tags.

Fig. 2e: Tags

We will need a Label, an Input field and a button for the first page, for capturing and submitting the user input.Drag and Drop the related tags onto the page:


6/13

6

Fig. 2f: Tags inserted in the Page

Enter the necessary attributes for the tags. For example, the for attribute is used to link a label to an inputfield, and the id attribute uniquely identifies a screen element within a page.

Here, we will use the id for input field as p_ebeln, and the id for the submit button as p_button1. Theelements will have their respective texts, wherever applicable.

Fig. 2g: Tags with Attributes


7/13

7

Observe that the label element is attached to the input field, by the common id.The input in the input field is stored in the attribute variable p_ebeln. We define this variable under tab PageAttributes:

Fig. 2h: Page Attributes Definition

Also, on the click of the button, the event module OnInputProcessing will be executed. This event modulecan be created under Event Handler tab.

Fig. 2i: Event Handler

Save and activate the page.

Similarly, we create the second page, which will display the data in a tabular format.

The only change from the earlier page creation procedure is the use of different tags, namely, tableView andtableViewColumn. tableView tag defines the table format, and tableViewColumn defines the column namesof the table.


8/13

8

Fig. 2j: Second Page Tags Definition

Observe that, some script logic has been embedded in the page to check the value of variable itab. Thisvariable is again a Page attribute:

Fig. 2k: Page Attribute of Second Page

Also notice that how the columns names are embedded in the tableViewColumn attribute.

Save and activate the page. Now the page structure looks as follows:

Script Logic


9/13

9

Fig. 2l: Object Hierarchy

We now have two disintegrated pages, which need to be joined by means of flow logic.

Double-click on the Application name (ZDISPLAY_PO_BSP), and move to Navigation tab:

Fig. 2m: Navigation Display

Enter first1.htm as the Start, and second.htm as Target, and a variable NEXT as Navigation Request.

Fig. 2n: Navigation Configuration

We will use this navigation request to connect the PBI of the first page (viz. the OnInputProcessing handlermethod) to the PBO of the second page (viz. the OnInitialization handler method).

Navigate to the Event Handler tab of the first page, and write the following code under OnInputProcessingmethod:


10/13

10

data: cl_htmlb_manager TYPEREFTO CL_HTMLB_MANAGER.

DATA: P_EVENT TYPEREFTO CL_HTMLB_EVENT.

create OBJECT cl_htmlb_manager.

CALLMETHOD CL_HTMLB_MANAGER=>GET_EVENT

EXPORTING

REQUEST = RUNTIME->SERVER->REQUEST

RECEIVINGEVENT = P_EVENT.

if p_event->id eq'p_button1'.

navigation->set_parameter( 'p_ebeln' ).

navigation->next_page( 'NEXT' ).

ENDIF.

This code will set the value of the input field p_ebeln, on clicking the Submit button. This way, we have setthe navigation property and its value. Now, in the PBO of the second page, we will use this parametervalue, and select the details from table EKPO. Also observe, how the reference to the next page has been setusing navigation variable NEXT.

Navigate to the Event Handler tab of the second page, and write the following code under OnInitializationmethod:

DATA : P_OBJ TYPEREFTO OBJECT ,

P_EBELNINPUT TYPEREFTO CL_HTMLB_INPUTFIELD ,

P_EBELNVALUE TYPE STRING ,

P_EBELN TYPE EKPO-EBELN.

DATA: CL_HTMLB_MANAGER TYPEREFTO CL_HTMLB_MANAGER.

CREATE OBJECT CL_HTMLB_MANAGER.

CALLMETHOD CL_HTMLB_MANAGER=>GET_DATA

EXPORTING

REQUEST = RUNTIME->SERVER->REQUESTNAME = 'inputfield'

ID = 'p_ebeln'

RECEIVING

DATA = P_OBJ.

P_EBELNINPUT ?= P_OBJ .

P_EBELNVALUE = P_EBELNINPUT->VALUE .

P_EBELN = P_EBELNVALUE .

CALLFUNCTION'CONVERSION_EXIT_ALPHA_INPUT'

EXPORTING

INPUT = P_EBELN

IMPORTING

OUTPUT = P_EBELN.

SELECT *

FROM EKPO

INTOTABLE ITAB

WHERE EBELN EQ P_EBELN.

Here, we are first obtaining the object reference to the input field parameter p_ebeln, and then getting itsvalue. Using the value, we are selecting the details from table EKPO into internal table itab, which becomesour basis for data display.


11/13

11

Save and activate the pages. After processing, the object hierarchy looks as follows:

Fig. 2o: Object Hierarchy

The application is ready for testing.

1.3. Testing the Application

Right-Click on the first page and choose Test:

Fig. 3a: Testing the BSP Application


12/13

12

A browser window opens, with the first page. If the window prompts for a user name and password, providethe SAP user id and password.

Fig. 3b: First Page

Enter a PO number in the input field and hit the Get Details button:

Fig. 3c: Providing Input

The second page is displayed, with the details of the PO items, and the selected columns:


13/13

13

Fig. 3d: Second Page With Output

creating a bsp application - purchase order details display_v1

Documents