Interacting with the Ebase Form from a Panel

 

Documentation home

Overview. 1

Position of the HTML <form> tag. 1

Supplied JavaScript functions for form interaction. 3

 

See also: Working with Java Server Pages

 
 

Overview

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.

 

Position of the HTML <form> tag

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.

 

Step 1 - include the buttons in an HTML include

For general information on the use of JSP and HTML includes see Working with Java Server Pages

 

1a) With JavaScript enabled

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.

 

1b) With JavaScript disabled

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.

 

JavaScript enabled and disabled combination

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'>

<% } %>                                                                                                               

 

Step 2 - receiving and processing the request

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);

}

 

 

Supplied JavaScript functions for form interaction

 

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().