SAP Help How to add checkboxes to a SAP BSP page and capture which have been selected by the user









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.
%>
<html>
  <head>
    <link rel="stylesheet" href="../../sap/public/bc/bsp/styles/sapbsp.css">
    <title>SAP checkbox bsp </title>
  </head>
  <body>
    <h1>BSP to display checkbox</h1>
    <p>
    <% select ebeln
       up to 10 rows
        from ekko
        into table it_ekko.
    %>
    <form method="post" name="form" id="form" >
    <table>
     <%
      loop at it_ekko into wa_ekko.
      ld_tabix = sy-tabix.
     %>
     <tr>
      <td>
       <%=wa_ekko-ebeln%>
      </td>
      <td>
       <input align="right" value="X" name="ekko_fields[<%=ld_tabix%>]-checkbox" type="checkbox">
      </td>
     </tr>
     <% endloop. %>
     <tr><td colspan="2">
     <input name="OnInputProcessing(submit)" type="submit"
            id="submit" value="Go">
    </td></tr>
    </table>
  </body>
</html>

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 ' '
      endif.
    endloop.
endcase.

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. 

Layout
<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">

<%endloop.%>

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

  CALL METHOD request->get_form_fields
      CHANGING
        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
      else.
*       Checkbox for this row is NOT checked
      endif.
    endloop.
  endloop.


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">
<%endloop.%>

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


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;
         }
      }
      </script>

-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