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
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
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
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
