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

Ebase Startup Parameters
 

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 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. A control field is then used in the form to check the system variable and take appropriate action. A control field is used for this purpose because control field events are always executed each time end-user input from a page is processed.

 

Position of the HTML <form> tag

 

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.

 

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= 'setFieldValueExternal("$USERVAR1", "Page_2"); externalSubmit(); return false;'

onKeyPress= 'setFieldValueExternal("$USERVAR1", "Page_2");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 Ebase 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= 'setFieldValueExternal("$USERVAR1", "Page_2"); externalSubmit(); return false;'

onKeyPress= 'setFieldValueExternal("$USERVAR1", "Page_2");externalSubmit(); return false;'>

<% }

   else { %>

      <input type='submit' value='Page_2' name='$USERVAR1'>

<% } %>                                                                                                               

 

Step 2 - receiving and processing the request

Create a control 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: Control 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 control field's validation event. It will then be executed each time input is received from the end-user on this page.

 

if [ $USERVAR1 = 'Page_2' ]

   goto page PAGE_2;

endif

 

Supplied JavaScript functions for form interaction

 

The following JavaScript functions are supplied to enable interaction with the Ebase form from an included panel:

 

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.

 

externalSubmit()

Submits the Ebase form. All normal validation will be performed before the form is submitted.

 

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.