BSP checkboxes using HTML and the OnInputProcessing BSP Event
In-order to implement shopping basket functionality into an SAP BSP I have decided to use an application class to store the actual
data tables. This is the easiest method of allowing tables populated in one page to be accessed by other pages. The below steps will
take you though the steps required to implement the shopping cart functionality into a SAP BSP application.
Step 1 - create basic BSP with application class
Create a basic BSP containing one page(with flow logic) as well as implementing an application class.
Step 2 - Create data table to store your rows of data within Application Class
This will be used so we can display each row of data with an 'add to basket' or 'remove from basket' along side it.
First create a table type via se11, i.e. enter ZTT_EKKO into data type field
Now press create and choose table type from next window
Give it line type containing the structure of your required table. I am just going to use table
EKKO example purposes as this is available to everyone but you would probably create your own depending on what you want to store
in your basket table.
Now use this table type to create 2 tables within the attributes of the application class(one to store all displayed rows and one to store those in your basket),
ensure they are both set to public visibility.
Step 3 - ABAP code to retrieve data and display it along with add/remove button
Return to your BSP page and insert the following code into the 'Layout' tab.
<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<%
* Data declarations used in layout section
data: ld_tabix type sy-tabix,
ld_index type sy-index,
ld_basketid type string,
ld_basketname type string,
ld_count type i,
ld_basketcount(3) type n.
data: wa_ekko like line of application->it_ekko,
wa_basket like line of application->IT_BASKET.
%>
<html>
<head>
<link rel="stylesheet" href="../../sap/public/bc/bsp/styles/sapbsp.css">
<title>SAP shopping basket bsp </title>
</head>
<body>
<h1>SAP BSP Shopping basket</h1>
<p>
<% select *
up to 10 rows
from ekko
into table application->it_ekko.
%>
<table>
<%
loop at application->it_ekko into wa_ekko.
%>
<tr><td>
<%=wa_ekko-ebeln%>
</td>
<td>
<form method="post" name="form" id="form" >
<p>
<%
ld_basketcount = ld_basketcount + 1.
ld_count = ld_count + 1.
CONCATENATE 'basketid' ld_basketcount into ld_basketid.
CONCATENATE 'basketname' ld_basketcount into ld_basketname.
read table application->it_basket into wa_basket with key ebeln = wa_ekko-ebeln.
if sy-subrc eq 0.
ld_basketname = ld_count.
CONCATENATE 'OnInputProcessing(del' ld_basketname ')' into ld_basketname.
%>
<input align="right" name="<%=ld_basketname%>" type="submit" id="delete" value="Remove from basket">
<%
else.
ld_basketname = ld_count.
CONCATENATE 'OnInputProcessing(add' ld_basketname ')' into ld_basketname.
%>
<input align="right" name="<%=ld_basketname%>" type="submit" id="add" value="Add to basket">
<%
endif.
ld_basketname = ld_count.
CONCATENATE 'OnInputProcessing(now' ld_basketname ')' into ld_basketname.
%>
</p>
</td></tr>
<%
endloop.
%>
</table>
</form>
</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
Within 'Event Handler' tab add the following code the OnInputProcessing event
data: ld_basketname type string,
ld_basketcount(3) type n,
ld_tabix type i,
wa_ekko like line of it_ekko.
case event_id.
when others.
if event_id(3) eq 'add'.
read table application->it_ekko into wa_ekko index event_id+3.
append wa_ekko to application->it_basket.
elseif event_id(3) eq 'del'.
read table application->it_ekko into wa_ekko index event_id+3.
delete application->it_basket where ebeln eq wa_ekko-ebeln.
endif.
endcase.
Step 6 - test functionality
Now if you execute the application you should be able to see it working, with the ability to
click on the 'Add to basket' button which will then be replaced with the 'Remove from basket' button
and vice versa as and when the item is added to the basket.
Step 7 - Display basket
All the basket entries are now stored within the application class table it_basket which is access
using the abap statement 'application->it_ekko'. Therefor you can now add a view basket button
to your application and simply display this table on the BSP page.