Server-Side Javascript Quick Start Guide
API variables added to Javascript
Using code-assist (Intellisense)
Issuing Error and Warning Messages
See also: Javscript Scripting Menu, Javascript Developer’s Guide, Javascript Editor, API Javadoc
This
document provides a quick introduction to server-side programming with
Javascript and describes how to work with the Ebase API to access form elements
such as fields, tables, controls etc. It does not contain any specific
information on Javascript as a programming language or Javascript syntax – see
any good Javascript reference for this. Also see the Javascript Developer’s Guide which
provides more detailed information.
Server-side
programming is achieved by associating scripts
with events. Ebase forms have an
event model (see Ebase events) that
support a number of different events e.g. click on a button.
This API
provides access to all elements within an executing Ebase form, integration
service or workflow job: this includes fields, tables, pages, controls,
external resources etc. In addition, it also provides access to browser client
and session data plus many additional programming facilities e.g. transactions,
security, files, Velocity templates etc.
Click here for the API javadoc.
The API is
provided to Javascript scripts via a number of variables which are added
automatically to each script:
Variable Name |
Description |
form |
This acts as the core object for the form API and provides methods to access all other form elements. It also provides a number of methods to perform user actions such as: go to page, call form, call URL, generate PDF, upload file etc. |
event |
Access to the controlling event e.g. Button Control on-click event, before page event |
fields |
Access to all fields in the form or integration service, or process attributes in a workflow process |
tables |
Access to all tables in the form, integration service or workflow process |
pages |
Access to all pages (only applies to forms) |
controls |
Access to all controls on all pages (only applies to forms) |
resources |
Access to all resources within the business view of the form, integration service or workflow process |
components |
Access to all elements for a deployed component – this supports changing the context so that elements are accessed as if from a specific deployed component e.g. to load data from a table defined within a component. |
system |
Access to many additional system services: includes system variables, transactions, sequences, security etc |
client |
Access to information and methods pertaining to the browser client and session |
Access to
individual fields, tables, controls, resources, pages is via the individual
element name (see examples below).
Each script
is linked to a form and this linkage is shown on the toolbar at the top of the
editor. The linked form determines the list of available fields, tables,
controls etc shown using code-assist features. Usually, this will show the
correct form, but occasionally it may need to be changed.
Code-assist
is activated in the Javascript Editor via Ctrl+Space. It will also display
automatically when a period (.) is entered after a variable or method call.
The
code-assist feature is extremely useful for showing lists of form fields,
tables, controls etc and showing available methods and properties. However,
Javascript is a language that supports dynamic types and it isn’t always possible
to know accurately which type a variable or expression resolves to. For this
reason, the methods and properties shown by the code-assist feature should not
be interpreted as the limit of what is available. As a programmer, you may know
that a certain variable is of a certain type and therefore you can invoke any
methods applicable for that type.
Getting a field value:
// get the value of the REQUESTOR field
var val = fields.REQUESTOR.value;
// computation based on value of the GROSS and NET
fields
var margin = fields.GROSS.value –
fields.NET.value;
Setting a field value:
fields.DEPARTMENT.value = "Finance";
fields.N1.value = 123.5;
fields.REQUEST_ID = system.sequenceManager.sequence("REQUESTS");
The value property returns a (Java) Object when read, and accepts a variety of different Object
types when set. The object types vary according to the field type – see the
Field getValue() and setValue()
method documentation for details. For character and numeric types, any type
conversions usually occur automatically and work as expected. Fields of type DATE,
TIME and DATETIME are a bit different and can be used in conjunction with the
Javascript Date object as shown below:
fields.TODAYS_DATE.value = new Date();
fields.CURRENT_TIME.value = new Date();
// add a day to a date
var d1 = new Date(fields.D1.value);
d1.setDate(d1.getDate() + 1);
fields.D1.value = d1;
Click here for
more details on how different form field types can be manipulated with
Javascript.
Fields also have a displayValue property. This can be useful for fields of type DATE, TIME and DATETIME where the
Java object returned with the value
property is not something that can be displayed e.g.
var d1 = fields.ORDER_DATE.value; // returns the date as the number of
milliseconds since 1st Jan 1970
var d2 =
fields.ORDER_DATE.displayValue; //
returns a displayable date with local formatting e.g. 25/12/2012, 12/25/2012,
25.12.2012 etc
There is
also a stringValue property which
should be used when passing a field value to a called form, a called
Integration Service or to a workflow job. The value of all form field types can
be passed using this property including fields of type Object.
//
calling a form passing an object field
var parms = {};
parms.OBJPARM1
= fields.OBJ1.stringValue;
form.callForm("FORM1",
parms);
//
opening a workflow job passing an object field
var parms = {};
parms.OBJPARM1
= fields.OBJ1.stringValue;
system.workflow.openJob("TEST_PROCESS",
parms);
Loading a table via its backing resource:
tables.REQUESTS.fetchTable();
Getting and setting column values:
Each table
holds a current row number
internally. When a reference is made to a column, this always means the column
on the current row. Click here for more info on the table current row
concept.
Columns are
referred to using the column name (minus the table prefix), and values are
get/set in the same way as for fields (TableColumn extends Field):
tables.ORDER_ITEMS.ITEM_ID.value = ++itemNo;
tables.ORDER_ITEMS.ITEM_AMOUNT.value =
fields.AMOUNT.value;
var d1 =
tables.REQUESTS.REQUEST_DATE.value;
Looping through table rows:
var rows = tables.REQUESTS.rows;
// rows.next() iterates
through all table rows, changing the table’s current row as it goes
while ( rows.next() )
{
fields.TOTAL.value += tables.REQUESTS.AMOUNT.value;
}
If the iteration through all rows completes, the
current row is reset to the value it held when the row iterator was created.
This is because the current row may have been set by a user action e.g. the
user has clicked on a button or link on a certain table row within a Table
Control. If the iteration through the rows does not complete (i.e. a break or return statement is used), the current row remains set with its
value at the break point.
Inserting data into a table:
// insertRow() sets the
current row to the inserted row
tables.EXPENSE_ITEMS.insertRow();
tables.EXPENSE_ITEMS.ITEM_ID.value = ++itemNo;
tables.EXPENSE_ITEMS.TYPE.value = "Travel";
These
examples illustrate using the table’s current row to manipulate table data.
Note that this can also be done by using explicit row numbers.
Almost all
of the properties that can be configured for a control can be changed
dynamically using the appropriate property name. For information on the
available properties, see the documentation displayed with the code-assist
using the Javascript Editor; or in the Form Editor click on the Help icon in
the Properties View when a control’s properties are displayed. For some
controls (e.g. Table Control, second example below), the properties are
organised into sub-groups. As well as properties, controls also have a number
of methods such as show(), hide(), requestFocus() etc.
controls.BUTTON1.backgroundColor = "Yellow";
controls.TABLE1.columnHeaderStyleProperties.borderWidth
= "3px";
controls.PANEL5.hide();
fields.NAME.fieldControl.requestFocus();
Controls can also be found using their Modifiers property:
for each (var ctrl in
pages.PAGE1.getControlsByModifier("FIN")
{
if (!system.securityManager.hasRole("AUDIT"))
{
ctrl.hide();
}
}
Note the for each in syntax used
above. This syntax (not commonly implemented with client-side Javascript) is
very useful for iterating through arrays returned using the Ebase API and for
iterating through Javascript native arrays and objects.
Accessing control text properties
All control
text properties are represented by a Text
object, which has properties including a text
property.
e.g. to
set a text property:
controls.BUTTON1.buttonText.text = "New
text";
controls.TEXT1.text.text = "Hello";
This
represents a difference from the FPL programming language which does not have
this additional Text object.
All
resources in the Business View associated with a form can be accessed using the
resources variable:
resources.REQUESTS.update();
resources.EMAIL1.sendmail();
resources.HR_GET_EMPLOYEE_DETAILS_WS.call();
Error and
warning messages can be added directly to a specific control or page (page
messages are shown at the bottom of a page):
pages.PAGE1.addErrorMessage("Mandatory
fields are required..");
controls.FIELDCONTROL1.addWarningMessage("This
is a warning message..");
Alternatively,
it is often more convenient to refer to the event owner (the event owner is the
control or a page to which the script is attached e.g. a Button Control for a
button click event):
event.owner.addErrorMessage("Your
input is invalid..");
event.owner.addWarningMessage("Additional
charges apply for this service..");
You can
also choose whether processing should stop immediately so that the message can
be displayed to the user. By default processing stops for error messages and continues
for warning messages, but this behaviour can be overridden:
event.owner.addErrorMessage("First
error message..", false);
event.owner.addErrorMessage("Second
error message..", false);
If multiple
error messages are accumulated in this way, processing can be explicitly
stopped a some later point using:
event.stopExecution();
For example
this might be necessary in the scenario where the user has clicked on a commit
button and error messages have been issued. Then the requirement is to display
the messages to the user, but not to continue with the rest of the commit
processing.