Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata

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'.



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.(bsp11)

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.      Now 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. 



Thus when we enter a range of Sales Document Numbers we get the respective data on the next page.

2 Comments

  1. here t_vbap not declare so got error ....i think u also post same in http://www.saptechnical.com

    that code is perfetc

  2. Guest

    Great beginners article. I would like to add a couple of things here for the benefit of others who might like to walk through this as a first step in BSP:

    1. Regarding step 13, you have to go to the Page Attributes tab on first.htm (as article explains). Then declare your variables thus:

    Attribute

    TypingMethod

    Associated Type

    w_vbeln1

    TYPE

    vbeln

    w_vbeln2

    TYPE

    vbeln

    2. Step 19 - declaring t_vbap is a little trickier. First go to Type Definitions on page second.htm. Then type in the code below (or the equivalent in your own coding standards):

    types: begin of type_vbap,
    vbeln type vbap-vbeln,
    posnr type vbap-posnr,
    matnr type vbap-matnr,
    end of type_vbap.

    types: type_t_vbap type table of type_vbap.

    The last piece is easy. Just go to Page Attributes and maintain t_vbap thus:

    Attribute

    TypingMethod

    Associated Type

    t_vbap

    TYPE

    TYPE_T_VBAP


    3. Lastly, and I am not sure this is mandatory, but at least it is a good practice: double-click on your application node (Z_ONE in the article above) and in the Properties tab, in the field Initial BSP, enter the value First.htm