You are on page 1of 12

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

By Amuktha Naraparaju, YASH Technologies
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. .

Now go to the object right click on it.htm) and give some short description.4. 5. . Say Create->Page. Then a pop up window appears. we have to give the name of the page we are creating (here First.

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

Activate the page and the application as well. This hierarchy of application and pages are from the ‘Repository Browser’. Then we will see a hierarchy of the application and pages.htm’ of what we have created. we need 2 input fields. For our purpose on the first page we need. So we drag and drop the required TAGS from the Tag Browser. • Since we need to enter a range of Sales Document Numbers. • One Button. 11. 12. buttons and labels will be like this. . 10. After going to the Tag Browser. • One label to indicate the input field.7. from where we have to select the tags. there are many tags. Once we click open the HTMLB. Now go to the page ‘First. 9. 8. Go to BSP Extensions -> Transportable -> HTMLB. which on clicking will get us the required data. Our Coding with all the Input fields. On the layout of the page to include any input fields or buttons or tabular structures we have to go to the ‘Tag Browser’.

13. We also have to write the Page Navigation logic here because we are Navigating from the first page to the second page. Since we are using the class CL_HTMLB_MANAGER we have to call this class and have to create an Instance according to it. 16. 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. Create the Second Page and name it as ‘Second. 15.htm’. Now. . we have to write our main code in the event ‘OnInputProcessing’. 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. For that purpose we have to go to the ‘Event Handler’ tab and select ‘OnInputProcessing’ event there.

This is the navigation logic.   Double Click on the application. . On the last line navigation->next_page( 'NEXT' ). ‘NEXT’ here is defined like this. Here the values in the braces of ‘SET_PARAMETER ‘ are the IDs of the input fields.The coding on the page is like this. The following screen will appear.

So. 18.17. in our layout we have to define table view like this. Our output on the second page should be in tabular form. Now Designing the ‘SECOND PAGE’. .

20. Because this event triggers when ever a new page is called. Now we have to write the code in the ‘INITIALIZATION’ event. Here on the Second Page also we have to define the page attributes like this. .19.

* event handler for data retrieval data : w_event type ref to cl_htmlb_event . * 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 . * 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 . " now the value from w_vbeln is passed to " w_vbelnval w_vbeln2 = w_vbelnval . w_eventid type string . w_obj1 type ref to object . " now the value from w_vbeln is passed to " w_vbelnval w_vbeln1 = w_vbelnval . " Passing the object vale to w_vbeln w_vbelnval = w_vbeln->value . . CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT' EXPORTING input = w_vbeln1 IMPORTING OUTPUT = w_vbeln1.21. w_obj type ref to object . " Now value from w_vbelnva is passed to " w_vbeln2 CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT' EXPORTING input = w_vbeln2 IMPORTING OUTPUT = w_vbeln2 . w_vbeln ?= w_obj . " 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. w_vbeln2 type vbap-vbeln . The code is as follows. w_vbelnval type string . w_vbeln1 type vbap-vbeln . w_vbeln type ref to cl_htmlb_inputfield . " Passing the object vale to w_vbeln w_vbelnval = w_vbeln->value .

Save and activate the application. Now when we execute the application. The output would be like this.* Function to change external format to the internal format select * from vbap into table t_vbap where vbeln between w_vbeln1 and w_vbeln2. The Screen will be like this. 22. On Clicking the button ‘Get Data’. .