SAP BSP Training course booking - Creating an example training course booking form using BSP
Below is the code required to create an example training course booking form which allows the user to imput values and then retrive those values within the 'OnInputProcessing' event ready to be passed to the next page. Code for 'Layout' tab Insert the following code into page layout section.
<%@page language="abap"%> <%@extension name="htmlb" prefix="htmlb"%> <html> <head> <title>Course Booking Form</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_validateForm() { //v4.0 var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments; for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]); if (val) { nm=val.name; if ((val=val.value)!="") { if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@'); if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n'; } else if (test!='R') { num = parseFloat(val); if (isNaN(val)) errors+='- '+nm+' must contain a number.\n'; if (test.indexOf('inRange') != -1) { p=test.indexOf(':'); min=test.substring(8,p); max=test.substring(p+1); if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n'; } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; } } if (errors) alert('The following error(s) occurred:\n'+errors); document.MM_returnValue = (errors == ''); } function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script> <link rel="StyleSheet" href="style.css" type="text/css" /> <script type="text/javascript" src="script.js"></script> </head> <body bgcolor="#FFFFFF" text="#000000" link="#FFFFFF" vlink="#000000" alink="#000000"> <%*action="mailstaff.asp"%> <form method="post" name="form" id="form" onSubmit="MM_validateForm('familyname','','R','confirmunderstood','','R'); return document.MM_returnValue"> <input type="hidden" name="emailcontact" value="m.j.lyall@adm.leeds.ac.uk" > <table width="89%" border="0" cellpadding="5"> <tr> <td colspan="2"><p><font face="Arial, Helvetica, sans-serif"><font color="#006600"><strong>Training Course and Workshop Booking Form</strong></font></font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong><font size="3">For all Staff </font>(support staff: please also complete the attached form below)</strong></font></p></td> </tr> <tr> <td width="47%" valign="top"><FONT FACE="Helvetica, Arial" size=-1><br> Title and date of workshop(s) you wish to attend:</font></td> <td width="53%"><p> <textarea name="titlefield" cols="30" rows="2" id="textarea"><%=gd_title%></textarea> </p> <table width="74%" border="0"> <tr> <td width="20%"><strong><font size="2">Date:</font></strong></td> <td width="80%"><font size="2" face="Arial, Helvetica, sans-serif"><strong> <input name="datefield" type="text" id="datefield234" value="26/04/2005"> </strong></font></td> </tr> <tr> <td><strong><font size="2">Start:</font></strong></td> <td><font size="2" face="Arial, Helvetica, sans-serif"><strong> <input name="startfield" type="text" id="startfield234" value="26/04/2005 09:30:00"> </strong></font></td> </tr> <tr> <td><strong><font size="2">End:</font></strong></td> <td><input name="endfield" type="text" id="endfield234" value="26/04/2005 12:30:00"></td> </tr> </table> <p> </p></td> </tr> <tr> <td valign="top"> <p><FONT FACE="Helvetica, Arial" size=-1>Your name (title, first name, surname):</font></p></td> <td><input name="familyname" type="text" id="familyname" size="30"></td> </tr> <tr> <td valign="top"><FONT FACE="Helvetica, Arial" size=-1> Your Job Title:</font></td> <td><input name="jobtitle" type="text" id="jobtitle" size="30"></td> </tr> <tr> <td valign="top"><FONT FACE="Helvetica, Arial" size=-1> Your Employee ID: <br></font></td> <td><input name="employeeid" type="text" id="familyname3" size="30"></td> </tr> <tr> <td valign="top"><FONT FACE="Helvetica, Arial" size=-1> School/Dept (and its address if off-campus). Confirmation that a place has been reserved for you will be sent to your school/dept. Please supply an alternative contact address if you spend a large proportion of time away from your school/dept:</font></td> <td><textarea name="contactaddress" cols="30" rows="4" id="familyname4"></textarea></td> </tr> <tr> <td valign="top"><FONT FACE="Helvetica, Arial" size=-1> Your Tel No:</font></td> <td><input name="telephone" type="text" id="familyname5" size="30"></td> </tr> <tr> <td valign="top"><FONT FACE="Helvetica, Arial" size=-1> Your E-mail address:</font></td> <td><input name="email" type="text" id="familyname6" size="30"></td> </tr> <tr> <td valign="top"><FONT FACE="Helvetica, Arial" size=-1> Special Needs (eg access, disability, diet):</font></td> <td><input name="specialneeds" type="text" id="familyname7" size="30"></td> </tr> <tr> <td valign="top"><FONT FACE="Helvetica, Arial" size=-1> Funded by:</font></td> <td><input name="fundedby" type="text" id="familyname8" size="30"></td> </tr> <tr> <td valign="top"><FONT FACE="Helvetica, Arial" size=-1> Please confirm that you understand that you may be charged if you have a confirmed place and fail to attend:</font></td> <td><input name="confirmunderstood" type="text" id="confirmunderstood" size="15"></td> </tr> <tr> <td colspan="2"><font size="-1" face="Helvetica, Arial">All applications should state an account number. This will be charged if at least 5 working days' notice of cancellation is not given (illness and family emergencies excepted).<br> <br> Indicate the account number to be charged: <input name="accountnumber" size="30"> <br> <br> <br> </font> <center> <p><font size="-1" face="Helvetica, Arial"><b>Before you confirm your booking, please double-check your details, then press the button below</b></font></p> <font size="-1" face="Helvetica, Arial"> <input name="OnInputProcessing(submit)" type="submit" id="submit2" value=" Book me on this Course "> <br> </font> <p><font size="-1" face="Helvetica, Arial">We reserve the right to change the dates and times of courses and to cancel them if appropriate.</font></p> <p><FONT FACE="Helvetica, Arial" SIZE=2>This will automatically send you a confirmation email - copied to </font><font size="-1" face="Helvetica, Arial"> webmaster@SAP Development</font></p> </center></td> </tr> </table> </form> <p> </p> <p> </p> </td> </tr></table> </body> </html>
Setup 'Page Attributes' (Data declarations)
event_id TYPE STRING gd_accountnumber TYPE STRING gd_confirmunderstood TYPE STRING gd_contactaddress TYPE STRING gd_datefield TYPE STRING gd_email TYPE STRING gd_employeeid TYPE STRING gd_endfield TYPE STRING gd_familyname TYPE STRING gd_fundedby TYPE STRING gd_jobtitle TYPE STRING gd_specialneeds TYPE STRING gd_startfield TYPE STRING gd_telephone TYPE STRING gd_title TYPE STRING gd_titlefield TYPE STRING
Code for OnInputProcessing Event
* event handler for checking and processing user input and * for defining navigation case event_id. "declared in page attributes as type STRING when 'submit'. navigation->set_parameter( name = 'titlefield' ). gd_titlefield = navigation->get_parameter( name = 'titlefield' ). navigation->set_parameter( name = 'datefield' ). gd_datefield = navigation->get_parameter( name = 'datefield' ). navigation->set_parameter( name = 'startfield' ). gd_datefield = navigation->get_parameter( name = 'startfield' ). navigation->set_parameter( name = 'endfield' ). gd_endfield = navigation->get_parameter( name = 'endfield' ). navigation->set_parameter( name = 'familyname' ). gd_familyname = navigation->get_parameter( name = 'familyname ' ). navigation->set_parameter( name = 'jobtitle' ). gd_jobtitle = navigation->get_parameter( name = 'jobtitle' ). navigation->set_parameter( name = 'employeeid' ). gd_employeeid = navigation->get_parameter( name = 'employeeid' ). navigation->set_parameter( name = 'contactaddress' ). gd_contactaddress = navigation->get_parameter( name = 'contactaddress' ). navigation->set_parameter( name = 'telephone' ). gd_telephone = navigation->get_parameter( name = 'telephone' ). navigation->set_parameter( name = 'email' ). gd_email = navigation->get_parameter( name = 'email' ). navigation->set_parameter( name = 'specialneeds' ). gd_specialneeds = navigation->get_parameter( name = 'specialneeds' ). navigation->set_parameter( name = 'fundedby' ). gd_fundedby = navigation->get_parameter( name = 'fundedby' ). navigation->set_parameter( name = 'confirmunderstood' ). gd_confirmunderstood = navigation->get_parameter( name = 'confirmunderstood' ). navigation->set_parameter( name = 'accountnumber' ). gd_accountnumber = navigation->get_parameter( name = 'accountnumber' ). endcase. * if you declate page attributes within the page courses(called below) * with the same names as above (i.e. titlefield, familyname etc) and * with the auto option checked the values will be passed to thorough navigation->goto_page('courses.htm').
Step 7 - 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.
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
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
