Building a simple BSP Application

This document describes the how to create and execute the BSP Application.

Step1: SE80 is the transaction where you can build the BSP Application.

Select BSP Application as shown below and provide the name of the BSP Application name and press enter.

Step2: Provide the description of the BSP Application and click create button.

Activate the BSP Application.

Step3: Create the page as shown below.

Step4: You will get the following screen there you provide name page and its description.

Step5: Application automatically generates the some code as shown below.

Step6: To execute the BSP Application, we use URL (Uniform Resource Locator). We can find the URL of the BSP Application as shown below.

Step7: Now go to SAP Logon Pad and note down the application server.

Step8: Now go to C:\WINDOWS\system32\drivers\etc\hosts.txt, Open this hosts.txt file and provide the application server and URL of the BSP Application as below.

Step9: Now you can execute the BSP Application in web browser.

Building a simple BSP Application to retrieve Material information

Go to transaction SE80. Select BSP application and input the name of the BSP application that you want to create.

Save and activate the application.

Right click on the application name and click àcreateàpage.

The resultant window appears as follows.

Enter the name of the page that you want to create. In this case it is the ‘default.htm’ that I am creating.

Enter the description of the page and click on ‘continue’.

Click save.

You can observe the ‘pages with flow logic’ and under that you can find ‘default.htm’ page in the BSP application tree.

Change the code in the layout as shown in the image below or copy and paste the code given below in the layout window.

<%@ page language="abap" %>





  
  MATERIAL DETAILS  

 
  Material Number











 
 


   <% data: wa_mara type mara. %>

 <% if i_mara is not initial. %> 
   









 <% loop at i_mara into wa_mara. %> 











<% endloop.  %>  
 <% else. %> 
 



 
 <% loop at it_mara into S_mara. %>
 





 

<% endloop.  %>

<% endif. %> 
  
 
MATNR
      
ERSDA
      
LAEDA
      
VPSTA
 
 <%= wa_mara-matnr %>  
 
 <%= wa_mara-ersda  %> 
 
 <%= wa_mara-laeda  %> 
 
 <%= wa_mara-vpsta  %> 
 
 
MATNR
     
ERSDA
     
LAEDA
        
  
 
 <%= S_mara-matnr %>  
 
 <%= S_mara-ersda  %> 
 
 <%= S_mara-laeda  %> 
 

Create the page attributes as shown below.

Save, Check and activate the BSP application and execute. Enter the login name and password in the pop-up that appears.

The BSP page looks as shown below.

In the ‘Event Handler’ tab, under ‘OnInputProcessing’ tab, write the code as shown below or copy and paste the code that is given below.

Code under ‘OnInputProcessing’.

CASE EVENT_ID.

  WHEN 'select'.

    NAVIGATION->SET_PARAMETER( 'matnr' ).

SELECT * FROM MARA INTO TABLE I_MARA WHERE MATNR BETWEEN MATNR AND MATNR2.

  WHEN 'materials'.

SELECT * FROM MARA INTO TABLE I_MARA.

  WHEN OTHERS.

ENDCASE.

Click on the BSP application name and input as shown below.

Save, check and activate the BSP application and then execute the application. The page would be displayed as shown below.

Enter the material numbers in the textboxes and then click on ‘Get details’.

The output would be as follows.

The output is a result of the select query that we fired selecting the specified set of fields.

Click on the ‘Get all’ button to get the output as follows.

Remember, we have fired a select query selecting all the records from the database table ‘MARA’ and are displaying it.

A Simple BSP application to select a range of Sales Document and Display the result on the next Page

This Document explains about a simple BSP application where we can give a range of Sales Document Number and then the respective data related to that Sales Document Number is displayed.

The factors that have been considered while doing this BSP Application.

• First to create a BSP Application and execute it on the browser we have to include the IP address of the particular system and browser in the drivers program. We can do this by going to START->RUN->DRIVERS->ETC

• We can use HTML or HTMLB or any other coding to construct a BSP application. (Here we are using HTMLB)

• We have considered table VBAP

• We have use the class CL_HTMLB_MANAGER and CL_HTMLB_EVENT and created their instances.

Steps to create a BSP Application.

1. Go to Transaction SE80, select BSP Application and give the name of the Application you want to create. Press ‘ENTER’.

2. A pop-up window appears where we have to give a short description and press ‘Create’.

3. After creating the Application assign it to package.

4. Now go to the object right click on it. Say Create->Page.

5. Then a pop up window appears, we have to give the name of the page we are creating (here First.htm) and give some short description.

6. A page of layout tab will be created with some amount of coding on it. When we execute it we get a web page provide all the host address is mentioned correctly in drivers.

7. Activate the page and the application as well. Then we will see a hierarchy of the application and pages.

8. Now go to the page ‘First.htm’ of what we have created.

9. This hierarchy of application and pages are from the ‘Repository Browser’. On the layout of the page to include any input fields or buttons or tabular structures we have to go to the ‘Tag Browser’, from where we have to select the tags.

10. After going to the Tag Browser. Go to BSP Extensions -> Transportable -> HTMLB.

11. Once we click open the HTMLB, there are many tags. For our purpose on the first page we need.

• Since we need to enter a range of Sales Document Numbers, we need 2 input fields.

• One label to indicate the input field.

• One Button, which on clicking will get us the required data.

12. So we drag and drop the required TAGS from the Tag Browser. Our Coding with all the Input fields, buttons and labels will be like this.

13. Here in the above coding the variables ‘w_vbeln1’ and ‘w_vbeln2’ have to be declared in Page Attributes and the IDs given to each input field or button is of at most importance because they uniquely identify each Field or button.

14. Here in the above coding the variables ‘w_vbeln1’ and ‘w_vbeln2’ have to be declared in Page Attributes and the IDs given to each input field or button is of at most importance because they uniquely identify each Field or button.

15. Now, we have to write our main code in the event ‘OnInputProcessing’. For that purpose we have to go to the ‘Event Handler’ tab and select ‘OnInputProcessing’ event there.

16. Since we are using the class CL_HTMLB_MANAGER we have to call this class and have to create an Instance according to it.

We also have to write the Page Navigation logic here because we are Navigating from the first page to the second page. Create the Second Page and name it as ‘Second.htm’.

The coding on the page is like this.

Here the values in the braces of ‘SET_PARAMETER ‘ are the IDs of the input fields.

This is the navigation logic. On the last line navigation->next_page( 'NEXT' ).

‘NEXT’ here is defined like this.

Ø Double Click on the application.

Ø The following screen will appear.

17. Now Designing the ‘SECOND PAGE’.

18. Our output on the second page should be in tabular form. So, in our layout we have to define table view like this.

19. Here on the Second Page also we have to define the page attributes like this.

20. Now we have to write the code in the ‘INITIALIZATION’ event. Because this event triggers when ever a new page is called.

21. The code is as follows.

* event handler for data retrieval

data :
 w_event type ref to cl_htmlb_event ,
 w_eventid type string ,
 w_obj type ref to object ,
 w_obj1 type ref to object ,
 w_vbeln type ref to cl_htmlb_inputfield ,
 w_vbelnval type string ,
 w_vbeln1 type vbap-vbeln ,
 w_vbeln2 type vbap-vbeln .

* Calling Method for w_vbeln

CALL METHOD cl_htmlb_manager=>get_data
 EXPORTING
   request = runtime->server->request
   name    = 'inputfield'
   id      = 'i_vbeln'
 receiving
   data    = w_obj
   .
w_vbeln ?= w_obj .               " Passing the object vale to w_vbeln
w_vbelnval = w_vbeln->value .    " now the value from w_vbeln is passed to
                                " w_vbelnval
w_vbeln1 = w_vbelnval .          " Now value from w_vbelnva is passed to
                                " w_vbeln1

* Here we have called the class cl_htmlb_manager and an instance get_data has * * been created.

CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT'
 EXPORTING
   input         = w_vbeln1
IMPORTING
  OUTPUT        = w_vbeln1.

* Function to change external format to the internal format

* Calling Method for w_vbeln

CALL METHOD cl_htmlb_manager=>get_data
 EXPORTING
   request = runtime->server->request
   name    = 'inputfield'
   id      = 'i_vbeln1'
 receiving
   data    = w_obj .

w_vbeln ?= w_obj .               " Passing the object vale to w_vbeln
w_vbelnval = w_vbeln->value .    " now the value from w_vbeln is passed to
                                " w_vbelnval
w_vbeln2 = w_vbelnval .          " Now value from w_vbelnva is passed to
                                " w_vbeln2

CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT'
 EXPORTING
   input         = w_vbeln2
IMPORTING
  OUTPUT        = w_vbeln2          .

* Function to change external format to the internal format 

select * from vbap into table t_vbap where vbeln between w_vbeln1 and w_vbeln2.

22. Save and activate the application.

Now when we execute the application. The Screen will be like this.

On Clicking the button ‘Get Data’. The output would be like this.

Providing F4 help in the BSP Application

Step1: To provide f4 help for the input field, we have to add showHelp and onValueHelp attributes to the inputField tag. Provide the values to those attributes as shown below.

Step2: The attribute “onValueHelp” has to assign a function, which is to be defined. In this function, using the ‘document.open’ statement, we can open a page as a window to the input field as F4 help.

Step3: Create a page with the name specified in the function getCustomer (). And in the event onRequest event handler get the data for f4 help.

Step4: To transfer the selected value in the f4 help window to the input field, we need to write a function which is mentioned in button tag.

Here, we define the function transf containing value of the parameter to be transferred in to input field. Now, we have to catch this parameter value in the main page by providing this code.

function transf (fval)

{

document.getElementById("ip_kunnr").value = fval;

}

Here, we are assigning the parameter value to the id of input field.

Step5: The code is to be written in first.htm is

In Layout

The code in customer.htm is

In layout:

Here, we have to use the attribute onClientClick and a function name is to be assigned to this attribute. In this function, we have to write the code for transfer the selected value in to the input field after pressing the button.

In onInputProcess:

In onRequest:

Step6:

The output of the screen shots as shown below:

When press the button Press Me, then

Using controller in BSP Application

This document describes the how to create a controller in BSP Application.

1. Creating BSP Application

Create a BSP Application in SE80 e.g., YH1328_TEST_BSP and provide short description and create it.

2. Creating Controller on BSP Application –

Right click on the application and create-> controller and enter name as main.do along with description and press continue.

3. Populating Controller Class

Enter the name of your controller class i.e. yh1328_controller_main. We also need to create this class in SE24

(Double click on yh1328_controller_main to create the class and press YES)

4. Creating Controller Class

In the Properties Tab of the class yh1328_controller_main ensure its super class is CL_BSP_CONTROLLER2.

5. Redefining Methods of the Class

We need to redefine some methods inherited from the superclass i.e. DO_INIT and DO_REQUEST.

6. Redefine method DO_INIT, dbl click on the method in change mode.

The DO_INIT Method behaves just like initialization event wherein we provide the data declaration.

Here we can fetch the data form the database table SFLIGHT into internal table t_flight

The attributes have to be set in the Attributes Tab of the Class

7. Redefine Method DO_REQUEST

Select the method DO_REQUEST and press the Redefine button and open the method in change mode. In this method we would be calling Layout (View) we create a reference variable referencing the page and then call the methods CREATE VIEW and pass it the actual view (not yet created). We then call the view.

.

8. Create a BSP Page (View)

In SE80 right click on the BSP Application and select Create->Page->Page Type-> View

Provide the page as main1.htm and description.

9. Assigning attributes to the View.

10. Populate the view with data.

11. Save and Activate BSP Application

12. Execute the controller: Go to the controller index and double click. Use the test (execute) button to view the results.