BSP Application on using a tree

By Vakada Raghava, Mouri Tech Solutions

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" %>
<htmlb:content id     = "content"
               design = "classic+design2002+design2003"
               controlRendering = "sap"
               rtlAutoSwitch    = "true">
  <htmlb:page title="BSP Extension: HTMLB / Element: Tree" >
<htmlb:form>

<h2><htmlb:label for="p_matnr" text="MATERIAL NUMBER" />

       <htmlb:inputField  id="p_matnr_low" value="<%= matnr_low %>" />

       <htmlb:label for="p_matnr" text="TO" />

  <htmlb:inputField  id="p_matnr_high" value="<%= matnr_high %>" /></h2>

 <htmlb:tree id      = "materialtree"
                    title   = "materialtree"
                    tooltip = "material information"
                    toggle  = "X" >
          <htmlb:treeNode id      = "material"
                          text    = "material"
                          isOpen  = "true"
                          tooltip = "material">
            <htmlb:treeNode id     = "mara"
                            text   = "mara"
                            onNodeClick = "mara"/>

              <htmlb:treeNode id   = "mard"
                              text = "mard"
                              onNodeClick = "mard"/>

            </htmlb:treeNode>
        </htmlb:tree>

         <br>
        <br>

        <htmlb:tree id      = "sapinformation"
                    title   = "sap information"
                    tooltip = "sap information"
                    toggle  = "X" >
        <htmlb:treeNode id     = "sdn.sap"
                        link   = "https://www.sdn.sap.com"
                            text   = "sdn.sap.com"
                            isOpen = "true" />
         <htmlb:treeNode id     = "saptech"
                            link   = "http://www.saptechnical.com"
                            text   = "sap technical"
                            isOpen = "true" />

        </htmlb:tree>

        <br>
        <br>

         <% if it_mara is not initial.%>

       <htmlb:tableView id="tv_mara" table="<%= it_mara %>">
<htmlb:tableViewColumn columnName="MATNR"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ERSDA"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ERNAM"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="LAEDA"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="AENAM"></htmlb:tableViewColumn>

     </htmlb:tableView>

       <% endif.%>

        <% if it_mard is not initial.%>

       <htmlb:tableView id="tv_mard" table="<%= it_mard %>">
<htmlb:tableViewColumn columnName="MATNR"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="WERKS"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="LGORT"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="PSTAT"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="LVORM"></htmlb:tableViewColumn>

     </htmlb:tableView>

       <% endif.%>

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

Click here to continue...