Using Tabstrips in BSP

...Previous

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

Code : 

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

<htmlb:content design="design2003">
  <htmlb:page title = "create input fields ">
    <htmlb:form>

     <%= otr($TMP/MYALIAS) %>
   <h2> <htmlb:label for="//SELECT/P_VBELN"/>

       <htmlb:inputField value="//SELECT/P_VBELN"/></h2>

 <br>
 <br>

 <otr>TO DISPLAY HEADER AND ITEM DETAILS</otr>
 <htmlb:tray id          = "traybox"
             isCollapsed = "true" >

      <htmlb:tabStrip id   = "TabStrip"
                bodyHeight = "300"
                     width = "400">

<htmlb:tabStripItem id       = "headerdata"
                    index    = "1"
                    onSelect = "TabStripheader"
                    title    = "header data"
                    tooltip  = "header data" >

  <htmlb:tableView id="TV_VBAK" table="//SELECT/I_VBAK">
<htmlb:tableViewColumn columnName="vbeln"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ERDAT"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ERZET"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ERNAM"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ANGDT"></htmlb:tableViewColumn>

     </htmlb:tableView>

          </htmlb:tabStripItem>
          <htmlb:tabStripItem id       = "itemdata"
                              index    = "2"
                              onSelect = "TabStripItem"
                              title    = "item data"
                              tooltip  = "item data" >

 <htmlb:tableView id="TV_VBAP" table="//SELECT/I_VBAP">

<htmlb:tableViewColumn columnName="vbeln"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="posnr"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="matnr"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="matkl"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="arktx"></htmlb:tableViewColumn>

        </htmlb:tableView>

          </htmlb:tabStripItem>
        </htmlb:tabStrip>

</htmlb:tray>
    </htmlb:form>
  </htmlb:page>
</htmlb:content>

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.

* .

endmethod. 

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

Click here to continue...