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 user in an
included HTML or JSP panel. When the 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 user navigation panels.
The following examples illustrate the process using a 'go to page'
button. When the user clicks this button, the form should display the requested
page. This process could also be adapted to other types of user interaction
such as links.
The $USERVAR1 system variable is used to contain the 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 user input from a
page is processed.
The examples shown below assume
that the HTML form tag position
property for a form has been set to include the contents of all included JSP
and HTML panels. The default value for this property is configured on the Form Tab of Designer Preferences and this can
be overridden for each form by selecting an HTML Form Tag Position
option in the General tab of the Form
Properties.
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 added to 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 HTML 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 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 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 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().