Thursday, February 3, 2011

BSP Application using Tabstrip

Requirement: To display header and item details for sales order using tab strip, tray with OTR text.

Steps to be followed:

1) Go to transaction SE80, select ‘BSP application’ from the dropdown list.

2) Create a BSP application with the name ZMVC_TABSTRIP.

3) Creating a Model Class:

Go to transaction SE24 and enter the name of the class as shown below.

Class name: ZCL_MODEL_SALES1

In the pop up window that appears, enter the description and then click on the ‘save’ button.

In the class, go to the properties tab and then specify the superclass for the new model class so that all the methods and attributes will be inherited to the model class.

You can uncheck the checkbox ‘Final’.

Add attributes to the new model class. Here, you can see that I have used the table types to refer to the attributes of our class.

Add a method to the new model class to get the header and item details

Double-click on the GETVBAK method.

Write the following code.

Double click on the GETVBAP method.

Save, check and activate the class.


1) Create view: In transaction SE80, Right-click on the BSP application name and navigate to CreateàPage.

As shown below, enter the name and description of the view that you want to create. Select the radio button ‘View’, and then click on the ‘Continue’ button.

Give the page attributes of the view. The attribute of the view is an object reference of the model class that we created previously.

Modify layout code for the search view (input.htm) as shown below.

Code : 
<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>

     <%= otr($TMP/MYALIAS) %>


isCollapsed = "true" >
                     bodyHeight = "300"
width = "400">
                   index    = "1"
onSelect = "TabStripheader"
title = "header data"
tooltip = "header data" >

index = "2"
onSelect = "TabStripItem"
title = "item data"
tooltip = "item data" >


method DO_INIT.
* .
SELECT ?= me->create_model(
class_name = 'ZCL_MODEL_SALES1'

model_id = 'SELECT' ).

Follows the same procedure for the ‘do_request’, ‘do_handle_event’.

CODE: method DO_REQUEST. *CALL METHOD SUPER->DO_REQUEST * . data view type ref to if_bsp_page. **data : selection type string. me->dispatch_input( ). if me->view_name is initial. me->view_name = 'inpu.htm'. endif. view = me->create_view( view_name = me->view_name ). if view is bound. view->set_attribute( name = 'SELECT' value = me->SELECT ). me->call_view( view ). endif. endmethod.


CODE: method DO_HANDLE_EVENT. *CALL METHOD SUPER->DO_HANDLE_EVENT * EXPORTING * EVENT = * HTMLB_EVENT = ** HTMLB_EVENT_EX = * GLOBAL_MESSAGES = * RECEIVING * GLOBAL_EVENT = * . if htmlb_event is bound and htmlb_event->server_event = 'TabStripheader'. me->select->getvbak( ). if not me->select->i_vbak[] is initial. me->view_name = 'inpu.htm'. endif. endif. if htmlb_event is bound and htmlb_event->server_event = 'TabStripItem'. me->select->getvbap( ). * Flights have been found, new target is the hit list display if not me->select->i_vbap[] is initial. me->view_name = 'inpu.htm'. endif. endif. endmethod.

Save, check and activate the application.

Testing the application.

Provide the user name and password. Then click on ‘OK’ button.

The View is displayed in the browser window as shown below.

Provide the sales document.

Then expand the tray.

Click on header data.

Then expand the tray. Display the header data.

Then again click on the item data.

Create a controller for the application as shown below. Right click on the application name à Create à Controller.

Input the description of the controller and click on the continue button.

The screen appears as shown below.

Enter the name of the controller class that you want to create as shown in the above screen.

Double click on the controller class to enter into it. Give the attributes of the class as shown.

To use our model and views in controller class zcl_controller_sales1, we have to redefine some of the methods inherited from base class cl_bsp_controller2 using the class builder’s redefine function( ). The redefinition steps automatically add commented coding (shown in bold in the do_init example below):

method do_init .

* call method super->do_init.

* .


If you uncomment those lines, you would execute the method implementation of the parent class. This is helpful when you want to carry out the parent logic and some additional custom logic. we don’t want to reuse functionality of the parent class in the example, however, so be sure to delete the commented code before adding the new code.

Redefine the methods i.e. do_init, do_request, do_handle_event.

After that double click on the method do_init to implement it (write the code in the method).

No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)


Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive