Once you get started, there really is no way back... This article highlights a few commonly used topics getting data to and from the html.
Let's assume you want to display a field on some html which should hold a value from your ABAP. This can be done in 2 ways, as information or as actual input field. To do this, first create your ABAP variabele on the "Page Attributes" tab. Call it MYABAPVAR of type CHAR80, make sure the "Auto" checkbox is ticked on. Then fill in the Layout as follows:
<html> <body bgcolor=#F7E7F7> <form method="POST"> <br>Field value: <%= MYABAPVAR%> <br>As input field: <input name="MYABAPVAR" value="<%= MYABAPVAR%>"> <br><Input type="submit" name="OnInputProcessing(QUIT)" value="Quit"> </form> </body> </html>
>Note that the name="MYABAPVAR" which is necessary to ensure the html form knows what the field is...Then fill in the event handler OnCreate and simply put in:
* Switch to STATEFULL mode... RUNTIME->KEEP_CONTEXT = 1. MYABAPVAR = 'OnCreate'.
Activate your BSP application and test it. Overtype the "OnCreate" with "Hello world"...
To be able to quit the application, you'll need to put in the following bit of code in the OnInputProcessing handler - which will allow closing down the BAP application:
case EVENT_ID.
when 'QUIT'.
* Switch back to stateless
RUNTIME->KEEP_CONTEXT = 0.
NAVIGATION->EXIT( ).
endcase.
And there you go: the full cycle of presenting and interpreting an ABAP variabele in BSP html.
Taking it a little further...
There's also room for ABAP coding in the actual BSP layout - e.g. the debugging information reporter, which will show the debuggin information only if such info is available:
<% if general-debuginfo ne space. %> <br>Debuginfo: <%= general-debuginfo %> <% endif. %>
Where would your layout be without a loop ? Which would look something like
Example: A Loop in a BSP layout:
The following is a representation of a Layout in which a loop is incorporated. ABAP Internal table COSTCENTERLIST with a table header COSTCENTER is looped over...
<table cellpadding=1 cellspacing=1>
<% loop at COSTCENTERLIST into COSTCENTER. %>
<tr onclick=javascript:costcenterclick("<%= COSTCENTER-COSTCENTER %>");
<% if COSTCENTER-COSTCENTER eq IN_FOCUS-COSTCENTER-COSTCENTER. %>
class=highlight
<% else. %>
class=clickable
<% endif. %>>
<td>
<%= COSTCENTER-COSTCENTER+1(9) %>
<td>
<% if COSTCENTER-DATA_MAINTAINED eq SPACE. %>
<img src="/imo_s_s_ledr.gif">
<% else. %>
<img src="/imo_s_s_ledg.gif">
<% endif. %>
<td class=description><%= COSTCENTER-DESCRIPTION %>
<% endloop.
if sy-subrc ne 0. %>
<font style="font-size:24pt">Sorry!</font>
<br>The system could not find cost centers which
can be maintained by you.
<% endif. %>
</table>
The costcenter table itself is picked up in the OnCreate event handler.
And taking it a bit further: a full blown Layout:
Example: A full blown example of a layout with JavaScript functionality