Get user entry into HTML input fields with SAP BSP
The following example shows you how to create a basic HTML based BSP application consisting of a single input field and save button.
It will show you how to create this input field, button and get any input made by the user.
Step 1 - Create new BSP Application
Using SE80 create BSP Application (I.e. ZUSERINPUT).
Step 2 - Create new page (index.htm)
Right click on BSP object name and select create->page (with flow logic).
Step 3 - Populate 'Layout' tab
Insert the following HTML code into the index.htm layout section. If you are using your own HTML code or want to
change this once you have tested it there are a few elements which are the essential to make this work. The first is
the <FORM> </FORM> statement which must wrap around the input field(s). The second is the <INPUT> statement which
also needs to be within the <FORM> </FORM> and must be used to trigger the OnInputProcessing event. If these rules
are not followed the contents of the input fields will not be transferred into the OnInputProcessing event for
processing using this method.
<%@page language="abap" %> <%@extension name="htmlb" prefix="htmlb" %> <html> <head> <title>Page title</title> </head> <body> <FORM NAME="formlist"> <label for="longtext">Long text:</label> <input type="text" name="longtext" id="longtext" /> <INPUT class="submit" type="submit" name="OnInputProcessing(save)" value="Save"> </FORM> </body> </html>
Step 4 - Insert OnInputProcessing code (Event Handler)
In-order to capture the user input when they click on the save button, simply create a page attribute with the same name as the name tag withing the
html <input> field.
i.e. For the code used in this example <input type="text" name="longtext" id="longtext" /> you need to create a page
attribute called "longtext". Then the value is automatically passed from the field into this page attribute when the user presses the
OnInputProcessing button.
Alternate method (may help understanding)
An alternate method would be to capture the value into a local variable instead of using a page attribute.
There is no benefit of using this method but might help you further understand the posibilities and how this all
hangs together. Simple place the following code in the OnInputProcessing event within the 'Event Handler' tab. After
this has executed the value entered into the input field would then be stored in variable ld_longtext.
data: ld_longtext type string. " gets value from page(layout) navigation->set_parameter( name = 'longtext' ). " stores value in local variable ld_longtext = navigation->get_parameter( name = 'longtext' ).
Step 5 - Activate and test
Save everything and press the activate button. If all is ok press the test button which should open up a
browser window and display your newly created BSP. Now place a break-point in the OnInputProcessing event and
check any values entered by the user are captured in the ld_longtext field when you press the save button.
Step 6 - Pass value to new page
The next step is to Pass value to another BSP page