sapdev logo background
sapdev logo sapdev logo

Adding a JavaScript date selection field to a BSP

Step 1 - Add JAVAScript code to view Insert the following code in BOLD into the htmlb header area of the BSP View, also demonstrates code for creating simple styles (CSS).

<%@page language="abap"%> <%@extension name="htmlb" prefix="htmlb"%> <htmlb:content design="design2003"> <htmlb:page title = " "> <htmlb:documentHead title = "My Title"> <!-- CSS styles --> <style type="text/css"> .textTOP{vertical-align:top} .grey {FONT-SIZE: 14px;color: #666;} </style> <!-- Removes 'dd/mm/yyyy' string from date field when user clicks to enter data --> <SCRIPT TYPE="text/javascript"> <!-- function setinput( field ) { if ( field.value == 'dd/mm/yyyy' ){ field.value = ''; field.className = 'black'; } } //--> </SCRIPT> <!-- Declare Scripts for controlling the date selection, actual code for functions will be contained in the script.htm page fragment (not created yet!!) --> <SCRIPT TYPE="text/javascript"> <!-- <%@ include file = "script.htm" %> //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> var cal = new CalendarPopup(); </SCRIPT> </htmlb:documentHead> <htmlb:form>

Step 2 - Create page fragment Use SE80 and create new page within BSP application, call it script and create it as a page fragment. Step 3 - Populate Page fagment Now download the following code (Right click->Save Target As..) and insert it into the page fragment. Save and activate it! Step 4 - Insert date field onto View Now return to the View (i.e. main1.htm) and insert the code with displays the date field onto the view. This can be found below in BOLD, the other code is there to ensure it is inserted into the correct place. Please note: your final View coding should look somthing like this this.

<htmlb:form id="formlist"> <htmlb:textView text = "Purchase order" design = "EMPHASIZED" /> <htmlb:inputField id = "pord" invalid = "false" value = "<%=p_ord->retvalue%>" required = "true"/><BR> <INPUT class="grey" TYPE="text" NAME="date1" VALUE="dd/mm/yyyy" SIZE=25 onFocus="setinput( this )"> <A HREF="#" onClick="['formlist'].date1,'anchor1', 'dd/MM/yyyy'); return false;" NAME="anchor1" ID="anchor1"><img src="calimg.gif" border=0></A><BR> <htmlb:button text = "Press Me" onClick = "myClickHandler" /> </htmlb:form> </htmlb:page> </htmlb:content>

Step 5 - Upload image for date dropdown Save the following image to your computer (Right click->Save picture as..). Now upload it into your BSP by Right clicking the BSP name->create->MINE Object->Import. Ensure it is saved as 'calimg.gif' Step 6 - Execute Ensure the BSP is all active and test it. This is done by using the test function on the Controller object (i.e. Creating a simple BSP using MVC techniques

comments powered by Disqus