BSP Application using a Tree

Go to transaction SE80. Select BSP application and input the name of the BSP application that you want to create. Press Enter or click on the display icon.

Enter the name and short description of the application and click on the save icon.

Now the window looks as shown below.

Save and activate the application.

Right click on the application name and go to 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 ‘treepage.htm’ that I am creating.

Enter the name, description of the page, select the ‘Page with Flow Logic’ radio button and click on ‘continue’. Create three pages in the same way and name them as per your requirement or convenience.

Now we are done with creating the pages.

Your screen should look as shown below.

We proceed with providing the layout, attributes and the Event handling of the respective pages.

Go to treepage.htm, delete the existing code and write the following code in the layout tab of the page.

Code in the layout Tab.

<%@page language="abap"%>
<%@page language="abap" forceEncode="html"%>
<%@extension name="htmlb" prefix="htmlb" %>
<%@extension name="bsp" prefix="bsp" %>
              design = "classic+design2002+design2003"
              controlRendering = "sap"
              rtlAutoSwitch    = "true">
 

       " />

  " />

                    title   = "materialtree"
                   tooltip = "material information"
                   toggle  = "X" >
                                  text    = "material"
                         isOpen  = "true"
                         tooltip = "material">
                                      text   = "mara"
                           onNodeClick = "mara"/>

                                           text = "mard"
                             onNodeClick = "mard"/>

                           title   = "sap information"
                   tooltip = "sap information"
                   toggle  = "X" >
                              link   = "https://www.sdn.sap.com"
                           text   = "sdn.sap.com"
                           isOpen = "true" />
                                   link   = "http://www.saptechnical.com"
                           text   = "sap technical"
                           isOpen = "true" />

         <% if it_mara is not initial.%>

       ">

       <% endif.%>

        <% if it_mard is not initial.%>

       ">

       <% endif.%>

In the ‘Page Attributes, of treepage.htm, enter the attributes as shown below.

We need our application to display the data by giving the input in the inputbox and when the treenode is clicked.

So we write the code in the ‘OnInputProcessing’ event.

In the ‘Event Handler’ tab of treepage.htm, under ‘OnInputProcessing’ event, write the following code.

Code: * event handler for checking and processing user input and * for defining navigation DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). DATA: MATNO_low TYPE REF TO CL_HTMLB_INPUTFIELD. MATNO_low ?= CL_HTMLB_MANAGER=>GET_DATA( REQUEST = RUNTIME->SERVER->REQUEST NAME = 'inputField' ID = 'p_MATNR_low' ). DATA: MATNO_high TYPE REF TO CL_HTMLB_INPUTFIELD. MATNO_high ?= CL_HTMLB_MANAGER=>GET_DATA( REQUEST = RUNTIME->SERVER->REQUEST NAME = 'inputField' ID = 'p_MATNR_high' ). DATA: tree_event TYPE REF TO CL_HTMLB_EVENT_TREE. tree_event ?= event. node = tree_event->node. if matno_low is not initial and matno_high is not initial. matnr_low = matno_low->value. matnr_high = matno_high->value. case node. when 'mara'. select * from mara into table it_mara where matnr between matnr_low and matnr_high. WHEN 'mard'. select * from mard into table it_mard where matnr between matnr_low and matnr_high. endcase. endif.

Save, Check and activate the treepage.htm. Save, check and activate the application.

Enter the login details in the window to continue executing the application.

The screen looks as shown below. Input the values as shown below and click on the treenode named ‘mara’.

The output looks as follows.

Now click on the treenode ‘mard’ for the storage location data of the materials.

Now we are done with displaying the table contents using ‘tree’ on the BSP Application pages.