A Simple BSP Application Using HTMLB components on TableView, group by Radiobutton and Dropdown list box

By Vakada Raghava, Mouri Tech Solutions

STEPS:

Create a BSP application by the name zradiodropdown and create a page named ‘dropdown.bsp’. 

Save check and activate the application.

In the layout tab of the BSP page, write the following code as shown below: 

<%@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: radioButtonGroup & radioButton">
    <htmlb:form>

    <htmlb:radioButtonGroup id = "myRadioButtonGroup1" >
    <htmlb:radioButton id = "activate"  text = "activate = onClick" onClick="myClick"  />
    <htmlb:radioButton id = "deactivate" text = "deactivate = onClick" onClick="myClick" />

      </htmlb:radioButtonGroup>

      <br>
      <br>

        <htmlb:dropdownListBox    id          = "mydropdownListBox1" >
        <htmlb:listBoxItem      key         = "key_vbak" value = "vbak" />
        <htmlb:listBoxItem      key         = "key_vbap"  value = "vbap"  />

      </htmlb:dropdownListBox>
<%  if it_vbak is not initial.%>

<htmlb:tableView id="tv_vbak" table="<%= it_vbak%>">
</htmlb:tableView>
<%endif.%>

<%  if it_vbap is not initial.%>

<htmlb:tableView id="tv_vbap" table="<%= it_vbap%>">
</htmlb:tableView>
<%endif.%>

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

In the page attributes tab of the page, create the attributes as shown in the image below. 

In the Event handler tab of the BSP page, write the following code as shown below. 

* event handler for checking and processing user input and
* for defining navigation

 DATA: radioButtongroup TYPE REF TO CL_HTMLB_RADIOBUTTONGROUP.

     radioButtonGroup ?= CL_HTMLB_MANAGER=>GET_DATA(
                         request      = runtime->server->request
                         name         = 'radioButtonGroup'
                         id           = 'myRadioButtonGroup1' ).

 DATA: data1 TYPE REF TO CL_HTMLB_DROPDOWNLISTBOX.
data1 ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request
                                      name    = 'dropdownlistbox'
                                      id      = 'mydropdownListBox1').
   selection1 = radioButtongroup->selection.
   case selection1.
   when 'activate'.

**   IF data1 IS NOT INITIAL.
  selection2 = data1->selection.

  case selection2 .

  when 'key_vbak'.

  select * from vbak into table it_vbak.

 when 'key_vbap'.

  select * from vbap into table it_vbap.

  endcase.
**  ENDIF.
  when 'deactivate'.

  data1->disabled = 'TRUE'.
  endcase.

ENDIF.

Save, check, activate and execute the application. Click the execute icon to execute the application. 

Input the username and password to complete the authentication. 

CLICK ON OK BUTTON. 

Click on the activate button and select a drop down list box element. i.e VBAK 

The below screen is the output of the VBAK table. 

Click on the activate button and select the drop down list box. i.e. VBAP

The below shown screen is the output of the VBAP table.