sapdev logo background
sapdev logo sapdev logo

BSP checkboxes using HTML and the OnInputProcessing BSP Event

If you have not created a BSP before you might want to have a look at this example of creating a simple BSP application just to get an understanding of the basic components. The below steps will then take you though the steps required to implement a BSP web page containing multiple checkboxes and capturing which have been checked by the user.

Step 1
Create a basic BSP containing at least on page(with flow logic). Also ensure that it has been set to stateful within the 'Properties' tab.

Step 2 - Create data table to store your rows of data
Within the 'Type Definitions' tab add the following code

TYPES: begin of t_ekko,
  ebeln type ekko-ebeln,
  checkbox(1) type c,
 end of t_ekko.

TYPEs: tt_ekko type STANDARD TABLE OF t_ekko.

Next use this table type to create a table to store your rows of data within the 'Page Attributes' tab, ALso create a table which will be used to reference the HTML fields and capture the users input.

Step 3 - ABAP code to get data and display it along with checkbox
Insert the following code into the 'Layout' tab of your BSP.

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
* Data declarations used in layout section
data: ld_datetext type string,
      ld_tabix type string.
data wa_ekko like line of it_ekko.
    <link rel="stylesheet" href="../../sap/public/bc/bsp/styles/sapbsp.css">
    <title>SAP checkbox bsp </title>
    <h1>BSP to display checkbox</h1>
    <% select ebeln
       up to 10 rows
        from ekko
        into table it_ekko.
    <form method="post" name="form" id="form" >
      loop at it_ekko into wa_ekko.
      ld_tabix = sy-tabix.
       <input align="right" value="X" name="ekko_fields[<%=ld_tabix%>]-checkbox" type="checkbox">
     <% endloop. %>
     <tr><td colspan="2">
     <input name="OnInputProcessing(submit)" type="submit"
            id="submit" value="Go">

Step 4 - Test code as it stands
If you execute the application as it stands you should get the following result.

Step 5 - Add event handler (OnInitialization)
Within 'Event Handler' tab add the following code to the OnInitialization event. This will ensure the attribute is intialized each time it is used.
refresh ekko_fields.

Step 6 - Add event handler (OnInputProcessing)
Within 'Event Handler' tab add the following code the OnInputProcessing event

* event handler for checking and processing user input and
* for defining navigation
data: gd_check type string,
      ld_checkname type string,
      ld_checkcount(3)  type n,
      ld_tabix type i,
      wa_ekko like line of it_ekko.

case event_id.
  when 'submit'.
    clear: ld_checkcount.
* If it_ekko is empty at this point, ensure BSP is set to statefull, or
* alternatively re-select data.
    LOOP AT it_ekko INTO wa_ekko.
      ld_tabix = sy-tabix.
      ld_checkcount = ld_checkcount + 1.
      CONCATENATE 'checkname' ld_checkcount into ld_checkname.
      navigation->set_parameter( name  = ld_checkname ).
      gd_check  = navigation->get_parameter( name = ld_checkname ).
      if not gd_check is INITIAL.  "=  'on' or ' '

Step 7 - Demonstrate functionality
This tutorial is really just to show the checkbox functionality without getting into producing a full blown application. Hopefully you can then take this code an incorporate into your application or use this as a starting point.

In-order to see the above code working you simply need to set a break point with the OnInputProcessing ABAP code entered within step 5. This is done using the usual method (needs to be an external break point if you are using a version of SAP that does not do this automatically). Once the break point has been set execute the application and select checkboxes 1, 3 and 10 and press the go button.

Now if you look at the ekko_fields table you will see that an 'X' in contained in the corresponding row to which checkbox fields have been checked.

---Further Information---

See here for a slightly more complex way of implementing HTML Checkboxs into your BSP, I would not recommend using this alternate way but might give you ideas for future developments.

Creating individual 'name=' attributes for each checkbox field (based on sy-tabix)
Another way would be to populate the name attribute of each checkbox with a unique name i.e. sy-tabix you can then check the page variable list using the request->get_form_fields method within the OnInputProcessing. If the field exists in this list it has been checked.

<form method="post" name="form" id="form" >
<%  DATA: ld_tabix type string.
    loop at it_ekko into wa_ekko.
      ld_tabix = sy-tabix.
<input align="right" value="X" name="check<%=ld_tabix%>" type="checkbox">


<input name="OnInputProcessing(submit)" type="submit" id="submit" value="Go">
---Event (OnInputProcessing)
  DATA: it_fields TYPE tihttpnvp,
        wa_fields TYPE ihttpnvp,
        ld_tabix type string.

  CALL METHOD request->get_form_fields
        fields = it_fields.

  loop at it_ekko into wa_ekko.
      ld_tabix = sy-tabix.
    LOOP AT it_fields INTO wa_fields WHERE name CS 'check'.
      if wa_fields-name CS ld_tabix.
"       Checkbox for this row is checked
*       Checkbox for this row is NOT checked

Single Checkbox
If you only wanted a single checkbox on your page there is an even simpler way, which just involves adding similar code to that below within your layout tab and adding an attribute called 'ekko_checkbox'. Within your OnInputProcessing the attribute ekko_checkbox will then contain the value 'X' (or whatever you set in the 'value=' attribute of the html input field).

<form method="post" name="form" id="form" >
<%loop at it_ekko into wa_ekko.
  ld_tabix = sy-tabix. %>
  <input align="right" value="X" name="ekko_checkbox" type="checkbox">

<input name="OnInputProcessing(submit)" type="submit" id="submit" value="Go">

Add 'select all' checkboxes functionality
To add select all checkboxes functionality you simply need to add some standard javascript code to do this. Below is some i have put togther as an example but there are many sites on the web where you could get other ideas of how to implement this.

-Add the following JS code between the <head> </head> tags
	<script language="JavaScript">
         function processAll(source) {
           checkboxes = document.getElementsByTagName("input");
           for(var i=0, n=checkboxes.length;i<n;i++) {
           checkboxes[i].checked = source.checked;

-Add the following HTML code where you want the Select/Unselect button to appear (i.e. between the <body> </body> tags)
<input type="checkbox" onClick="processAll(this)" /> Select/Unselect All

comments powered by Disqus