Adding JavaScript to SAP BSP's

Below is an example a BSP page which also has a Java Script to re-direct the user to an alternative page based on there screen resolution. Here is some more example Java script code. As you will notice this is all very basic javascript which I have managed to pickup along the way. I dont really intend to go into it in any more detail with regards to the more advance functions of javascript, this is just to show you that standard javascript code readily available on the internet can be inserted into you SAP BSP in the same way it is added to other webpages outside of SAP.



<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>

<script language="Javascript"><!--

if (screen.width <= 640) {
alert("We are sending you to the appropriate page.");
document.location = "small.htm";
}
else {
alert("Based on your screen res, we are sending you to the appropriate page.");
document.location = "large.htm";
}

//-->
</script>


  <htmlb:content design="design2003">
  <htmlb:page>
  <htmlb:form>
   <xhtmlb:tabStrip id = "ts" renderSingleTabAsHeading = "TRUE">

    <xhtmlb:tabStripItem title = "Handling HTMLB Events"
                         name  = "tsi1" >
     <xhtmlb:toolbar id="tb1" >
      <xhtmlb:toolbarItem placement="LEFT" >

       <xhtmlb:buttonGroup   id      = "btngrp"
                             onClick = "TablePager">
        <xhtmlb:buttonGroupItem key      = "prev_page"
                                text     = "Previous Page"
                                design   = "PREVIOUS"
                                disabled = "<%=vIndex_prev_disabled%>" />
        <xhtmlb:buttonGroupItem key      = "next_page"
                                text     = "Next Page"
                                design   = "NEXT"
                                disabled = "<%=vIndex_next_disabled%>" />
       </xhtmlb:buttonGroup>

       </xhtmlb:toolbarItem>
      <xhtmlb:toolbarItem placement="RIGHT" >
       <xhtmlb:pager id     = "pager"
                     text   = "Line [$vIndex$] of $vMax$"
                     vIndex = "<%=vIndex%>"
                     vMax   = "<%=lines( sflight )%>"
                     design = "VERTICAL_SIMPLE+INDICATOR" />
      </xhtmlb:toolbarItem>
     </xhtmlb:toolbar>

     <htmlb:tableView id              = "sflight1"
                      footerVisible   = "false"
                      filter          = "NONE"
                      selectionMode   = "MULTILINEEDIT"
                      selectedRowIndex ="<%=gd_row%>"
                      table           = "<%=sflight%>"
                      visibleFirstRow = "<%=vIndex%>"
                      visibleRowCount = "<%=vSize%>"
                      width           = "100%" />
    </xhtmlb:tabStripItem>
   </xhtmlb:tabStrip>
    <table width="80%" cellspacing="0" cellpadding="0" border="0">
          <tr>
        <td>T Code </td>
        <td>Program</td>
        <td>Screen No</td>
      </tr>

      <% DATA: wa_flight like line of sflight.
      Loop at sflightsel into wa_flight. %>
      <tr>
          <td><%=wa_flight-carrid%></td>
          <td><%=wa_flight-connid%></td>
      </tr>
      <% Endloop. %>
    </table>


   </htmlb:form>
  </htmlb:page>
  </htmlb:content>

Adding JavaScript to BSP (HTML) pages - Shows how to add javascript to your BSP pages