SAP BSP Example booking form

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@sapdev.co.uk</font></p>
        </center></td>
    </tr>
  </table>
</form>
  <p> </p>
  <p> </p>

</td>
</tr></table>

</body>
</html>


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

SAP BSP Training course booking - Creating an example training course booking form using BSP