Interacting with the Ebase Form
from a Panel
Position
of the HTML <form> tag
Supplied
JavaScript functions for form interaction
See also:
Working with
Java Server Pages
This document describes how an included HTML or JSP file can be used to
interact with the Ebase form. For example, this technique could be used to set
up a panel of form control buttons which is presented to the end-user in an
included HTML or JSP panel. When the end-user clicks on a button, the
information is transferred into the form which can then react accordingly. The
techniques described here could be used to create end-user navigation panels.
The following examples illustrate the process using a 'go to page'
button. When the end-user clicks this button, the form should display the
requested page. This process could also be adapted to other types of end-user
interaction such as links.
The $USERVAR1 system variable is used to contain the end-user request
and pass this to the Ebase form. An event field is then used in the form to
check the system variable and take appropriate action. An event field is used
for this purpose because events are always executed each time end-user input
from a page is processed.
The examples shown below assume
that the HTML form tag includes the contents of all included JSP and HTML
panels. This option is selected globally for the entire system by setting
property Ufs.globalHtmlForm=true in UFSSetup.properties.
This setting can be overridden for each form by selecting an HTML Form tag
position option in the General tab of the form properties dialog.
If the HTML form tag does not
include all JSP and HTML panels, then the <input> tags shown below must be
included within a <form> </form> construct. In this case, onSubmit="return
false;"should be
addedto prevent submission of the form.
For general information on the use of JSP and HTML includes
see Working with Java Server Pages
Set up an HTML include panel containing the buttons, where each button
is similar to the one shown here:
<input type='submit' value='Go to page 2'
onClick= 'com.ebasetech.ufs.Api.setFieldValueExternal("$USERVAR1",
"Page_2"); com.ebasetech.ufs.Api.externalSubmit(); return false;'
onKeyPress= 'com.ebasetech.ufs.Api.setFieldValueExternal("$USERVAR1",
"Page_2");com.ebasetech.ufs.Api.externalSubmit(); return false;'>
Notes:
·
The
externalSubmit()
JavaScript function is used to submit the form with normal client-side
validation of numerical and date types, mandatory fields etc.
·
The
JavaScript calls have been added both to the onClick and onKeyPress events to
ensure that the event can be activated by both mouse and keyboard in all
browsers.
Javascript
can be disabled in any of the following circumstances:
The HTML
for the same button will look like this:
<input type='submit' value='Page_2' name='$USERVAR1'>
Notes:
·
Normal
validation of numerical and date types, mandatory fields etc will be performed.
·
In this case, the text displayed in the button
and the value returned are the same, ‘Page_2’.
·
This option cannot be used when the Ebase form
tag position does not include all JSP and HTML panels, as its execution depends
on submission of the Ebase form.
Options 1a) and 1b)
can be combined into a single JSP that supports JavaScript enabled or disabled:
<%@ page language="java" import="com.ebasetech.ufs.kernel.*" %>
<% UFSFormInterface form =
(UFSFormInterface) session.getAttribute("FormInterface"); %>
<% String js = form.getFieldValue( "$PRESENTATION_USE_JAVASCRIPT" );
if ( js.equals("Y") ) { %>
<input type='submit' value= 'Page_2'
onClick= 'com.ebasetech.ufs.Api.setFieldValueExternal("$USERVAR1",
"Page_2"); com.ebasetech.ufs.Api.externalSubmit(); return false;'
onKeyPress= 'com.ebasetech.ufs.Api.setFieldValueExternal("$USERVAR1",
"Page_2");com.ebasetech.ufs.Api.externalSubmit(); return false;'>
<% }
else { %>
<input type='submit' value='Page_2' name='$USERVAR1'>
<% } %>
Create an event field at the
appropriate place on the page – typically this would be as the first field on
the page so the end-user request could be honoured immediately without first
validating the remaining fields on the page, or it could be as the last field
if you need to perform validation first.
Note: Event
fields are a special type of Ebase field - they are not displayed to the
end-user and do not have a value; they are used purely as a mechanism to
trigger an event.
Attach the script
below to the event field's validation event. It will then be executed each time
input is received from the end-user on this page.
|
FPL: |
API based language
(Javascript): |
|
if [ $USERVAR1 = 'Page_2' ] goto page PAGE_2; endif
|
if (system.variables.$USERVAR1.value == "Page_2") { form.gotoPage(pages.PAGE_2); } |
The following
JavaScript functions are supplied to enable interaction with the Ebase form
from an included panel:
com.ebasetech.ufs.Api.setFieldValueExternal( fieldName, fieldValue )
Sets the
field fieldName with the value of fieldValue. Note that only the
system variable fields $USERVAR1, $USERVAR2 and $USERVAR3 should be used.
com.ebasetech.ufs.Api.externalSubmit()
Submits
the Ebase form. All normal validation will be performed before the
form is submitted.
com.ebasetech.ufs.Api.externalSubmitPageBack()
Submits
the Ebase form. Validation of field types
e.g. numeric, date, will be performed, but validation of mandatory fields is
skipped. This function could be used to implement a custom go-back facility.
com.ebasetech.ufs.Api.gotoNextPage()
Goto the next page,
if there is one. All normal validation
will be performed before the form is submitted.
com.ebasetech.ufs.Api.gotoPrevPage()
Goto the previous
page, if there is one. Validation of
field types e.g. numeric, date, will be performed, but
validation of mandatory fields is skipped.
com.ebasetech.ufs.Api.commit()
Commit the form, if
this is the last page. All normal
validation will be performed before the form is submitted.
com.ebasetech.ufs.Api.isFirstPage()
See if this is the
first page. If true, can't do gotoPrevPage().
com.ebasetech.ufs.Api.isLastPage()
See if this is the
final page. If true, can do commit, but
can't do gotoNextPage().