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.
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.
<[email protected] language="abap"%> <[email protected] 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.
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.
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.
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