Javascript API 7.1

From GeoMedia Smart Client
Jump to: navigation, search


The Workflow Javascript API is a Javascript library that allows you to manipulate your workflow forms "on the client side" (that is in the user's browser). This allows you to:

  • access items of the form and manipulate them (for example show/hide/remove)
  • serialize and submit the entire form or parts of it to the server
  • embed dynamic, user-driven form actions in your workflow

Typical use cases for this API include:

  • you want the workflow form to respond to user actions (for example hide the "Post Address" form group if the user clicked the "Notification: Email" checkbox)
  • you want to write custom form field rules, that validate user input on the fly (e.g. an advanced password validator that ensures the entered password consists of more than two uppercase letters)


Getting Started

JavaScript CookBook

<br\> <br\>

Form API Reference

Models of a form

We provide five types of form models for all form items.

  • The form its self (IG.FormModel)
  • The form tabs (IG.TabModel) which contains the form tab strips
  • The form tab strips (IG.TabStripModel) which contains the form groups
  • The form groups (IG.GroupModel) which contains the form singlerows and the form fields
  • The form singlerows (IG.SingleRowModel) which contains the form fields
  • The form fields (IG.FieldModels). The form fields are subdived into different form fieldmodels depending on its user interface widget (for example IG.FieldModels.TextField or IG.FieldModels.Grid)
  • Any type (e.g. actions for a field, actions for a group or actions for the form) of an action in a form (IG.ActionModel). All other models are containing a list of actions.


Base of all models

Depending on the type of the form item, the model provides deffirent methods and properties. The base methods and the base properties are available at any type of form model.

Base Methods

Base functionality of all form items
show() shows the item (and all its sub-items)

<br\>

hide() hides the item (and all its sub-items)

<br\>

toggle() toggles the item (and all its sub-items)

<br\>

disable() disables the item (and all its sub-items)

<br\>

enable() (re)-enables the item (and all its sub-items)

<br\>

serialize() serializes the value of the item into a JSONObject (e.g. <input type="text" name="FIELD_ID" value="foo"> --> { FIELD_ID: "foo" }).

<br\>

isValid() validates the item against the preconfigured validators (see section "Validators") and returns true in case of a successful validator, false otherwise

<br\>

getSettings() returns the JSONObject which was given to initialize the current form item

<br\>

<br\>

Base Properties

Base properties of all form items
id() the id of the current item

<br\>

kind kind of current form item (e.g. form, tab or field)

<br\>

_jqNode access to the jQuery Object representing the form item

<br\>

<br\> <br\> <br\>

FormModel

The FormModel contains the current form, the class is initialzed by formsettings as JSONObject. See section "Base of all models" to read about the base methods and properties of a form item. <br\>

Methods of a FormModel

Functionality of a form
getFields() returns all form fields of the form

<br\>

getItemsByAttr() returns a list of items with attributes matching the given list of criterias

<br\>

<br\>

(rest is coming soon)


getFields


returns all form fields of the form

getFields: function ()


Returns

{Array} An array of all form fields


getItemsByAttr


returns a list of items with attributes matching the given list of criteria

getItemsByAttr: function (filterObject)


Parameters

filterObject {Object} An object with attributes and functions to be matched. Structure of filterObject: { [ property: value]* }. <br\>property: {String} <br\>value: {Object \ Function}


Returns

{Array} An array of form items matching given filter object. An empty array is returned if no matches are found.


Usage

//Usage #1 --------------------------------------------------------------------------------
//Basic filtering of string and observable attributes
var visibleFormFields = IG.form.getItemsByAttr({kind: "field", isVisible: true});
visibleFormFields ; //an array of all visible form fields
 
 
 
//Usage #2 --------------------------------------------------------------------------------
//Filtering with match-function as given criteria
//filterObjectValue returns true or false if parameter is euqal to "grid", "tab" or "group
var filterObjectValue = function(kind) {
	return ( $.inArray(kind, ['grid','tab','group']) >= 0 ); 
};
 
var gridTabGroupFields = IG.form.getItemsByAttr({kind: filterObjectValue);
gridTabGroupFields ; //an array of all grid, tab and group FieldModels

Properties of a FormModel

(coming soon) <br\> <br\> <br\>

TabModel

The TabModel contains a list of form tabs (TabStripModel). See section "Base of all models" to read about the base methods and properties of a form item. <br\>

Methods of a TabModel

(coming soon) <br\>

Properties of a TabModel

(coming soon) <br\> <br\> <br\>

TabStripModel

The TabStripModel represents a form tab and it contains form groups and actions. See section "Base of all models" to read about the base methods and properties of a form item. <br\>

Methods of a TabStripModel

(coming soon) <br\>

Properties of a TabStripModel

(coming soon) <br\> <br\> <br\>

GroupModel

The GroupModel represents a form group and it contains form fields and actions. See section "Base of all models" to read about the base methods and properties of a form item. <br\>

Methods of a GroupModel

(coming soon) <br\>

Properties of a GroupModel

(coming soon) <br\> <br\> <br\>

FieldModels

The GroupModel represents a form group and it contains form fields and actions. See section "Base of all models" to read about the base methods and properties of a form item. <br\> See Javascript FieldModels API to read about all special kinds of FieldModels. <br\>

Methods of a FieldModel

(coming soon) <br\>

Properties of a FieldModel

(coming soon) <br\> <br\> <br\>

ActionModel

The ActionModel represents a action for any kind of form item (e.g. action for a form, action for a group or action for a field). See section "Base of all models" to read about the base methods and properties of a form item. <br\>

Methods of a ActionModel

(coming soon) <br\>

Properties of a ActionModel

(coming soon) <br\> <br\> <br\>


Client-Side Validation

number validators

Validator example description
required {required: true} Form field must not be empty or unchecked (checkboxes).
minlength {minlength: 3} form field has to contain at least n chars
maxlength {maxlength: 9} form field can only contain up to n chars
rangelength {rangelength: [3,9]} Formularfeld muss zwischen 3 und 9 Zeichen enthalten
min {min: 10} number in the form field must be greater than n
max {max: 200} number in the form field must be less than n
range {range: [9,99]} number in the form field must be in the range between n and m
email {email: true} form field must contain a valid email adress (the existence of the email-adress is not checked)
url {url: true} form field must contain a valid url (the existence of the url is not checked)
daterange {daterange: ['15.09.2008', '24.11.2008']} limits the accepted date input to the given range 'today' = date of today, 'lastyear' = range of last year
number {number: true} form field must contain a number, with the . as delimitor, e.g. 99.62
equalTo {equalTo: #password1} form field needs to have the same value than other form field (referenced as '#' + form field id)
filetypes {filetypes: ['.jpg', '.pdf']} allowed filetypes for uploads

date validators

date validator example description
gtDate gtDate('#OTHER_DATE_FIELD') date greater than the date in the form field with id OTHER_DATE_FIELD
gteDate gteDate('#OTHER_DATE_FIELD') date greater or equal than the date in OTHER_DATE_FIELD
eqDate eqDate('#OTHER_DATE_FIELD') date equal to the one in OTHER_DATE_FIELD
lteDate lteDate('#OTHER_DATE_FIELD') date less than or equal to the one in OTHER_DATE_FIELD
ltDate ltDate('#OTHER_DATE_FIELD') date less than the the one in OTHER_DATE_FIELD

number validators

number validator example description
gtNumber gtNumber('#OTHER_NUMBER_FIELD') number greater than the number in the form field with id OTHER_NUMBER_FIELD
gteNumber gteNumber('#OTHER_NUMBER_FIELD') number greater or equal than the number in OTHER_NUMBER_FIELD
eqNumber eqNumber('#OTHER_NUMBER_FIELD') number greater or equal than the number in OTHER_NUMBER_FIELD
lteNumber lteNumber('#OTHER_NUMBER_FIELD') number less than or equal to the number in OTHER_NUMBER_FIELD
ltNumber ltNumber('#OTHER_NUMBER_FIELD') number less than the number in OTHER_NUMBER_FIELD