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
Related Articles
Using AJAX functionality within our SAP BSP
Close BSP Session (type 'Pluggin HTTP') including when in SAP portal
SAP BSP to auto select region when user selects country using HTML and Javascript
HTML and Javascript code to force enter key to perform tab
JavaScrip command getElementById useful examples
MVC BSP input field - Demonstrate how to retrieve a value entered into text input field
Allowing multiple instances of a BSP application to be run by a user
Execute Standard SAP Transaction from BSP using dynamically created shortcut
Uplaod file within SAP BSP application using HTML and ABAP coding
UUseful SAP BSP application code - ABAP, HTML, HTMLB, Javascript, CSS
Creating a BSP Application class to help store and pass data betwenn your BSP pages
Training Course and Workshop Booking Form
BSP checkboxes using HTML and the OnInputProcessing BSP Event
Check HTML checkbox is checked using Javascript within your SAP BSP
BSP Dropdown List - create a BSP dropdown list which allows user selection!!
ABAP BSP to allow user to select from SAP HR org structure - CSS file
Java script to display tree structure on your SAP BSP web page
Create a Simple BSP - Simple BSP to display text and call section BSP page using HTML
SAP BSP Training course booking - Creating an example training course booking form using BSP
Creating an SAP BSP which executes an ABAP report to retrieve data for use within BSP application
org selection BSP - detials.htm page
Display page of the SAP BSP example application to store favourite tcodes as a cookie
Execute.htm page of the SAP BSP example application to store favourite tcodes as a cookie
Favourites cookie bsp - initial page to display input fields and retrieve user input
BSP using cookies - Demonstrate use of cookies within a BSP to store user favourits
ABAP Export data to memory - Demonstrate use of ABAP program to retrieve data for use in BSP
MVC BSP HTMLB input field - Demonstrate how to retrieve a value entered into text input field
BSP development using standard HTML code instead of Business HTML (HTMLB)
Business HTML (HTMLB) - List of business HTML tags you can use within your BSP
Adding JavaScript to BSP (HTML) pages - Shows how to add javascript to your BSP pages
Example JavaScript code which can be added to your BSP application
BSP MIME Objects for Org. search application
Call onInputProcessing event from SAP BSP page via href or button
Organisation selection BSP - close internet window using javascript
Organisation selection BSP - get server side cookie ( get_server_cookie )
orgaisation selection BSP - set and get server side cookie ( set_server_cookie )
Display orgaisation selection BSP
BSP which allows HR Organisation Structure search and selection using javascript
Organisation update program - get server side cookie ( get_server_cookie )
BSP to capture user entry into HTML input fields
Capture BSP radiobutton selection using HTML and the OnInputProcessing BSP Event
BSP checkboxes using HTML and the OnInputProcessing BSP Event
Stateful and stateless BSP applications
Get user entry into HTML input fields with SAP BSP
Javascript to capture when a user closes or leaves sap bsp html page
Creating a BSP using the Model View Controller ( MVC ) technique
Using SAP Model View Controller (MVC) development techniques to develop BSPs
Adding a JavaScript date selection field to a BSP
Creating a BSP using the Model View Controller ( MVC ) technique
Creating a BSP using the Model View Controller(MVC) technique
Creating a BSP using the Model View Controller ( MVC ) technique
Retrieve value from input text field within a model view controller ( MVC) BSP
Web Application Development - Example code and information on development using BSP
SAP BSP / Business Server Pages combine ABAP and other web technologies such as HTML, CSS
BSP development screen - developing application using business server pages
Standard Program created in SE38 or SE80
