Temenos UXP Widget Developers Guide

Widget Developer Guide
Information in this document is subject to change without notice.
No part of this document may be reproduced or transmitted in any form or by any means,
for any purpose, without the express written permission of TEMENOS HEADQUARTERS SA.
© 2010 Temenos Headquarters SA - all rights reserved.

Table of Contents
Document History 4
About this Guide 5
Online Help 5
Licensing and Technical Support 5
Overview 6
Widget Types 6
Using Widgets 6
Answer widgets 6
Layout Grid Row widgets 6
Row Widget HTML 8
Customisable Features 8
Adding a Widget 9
Widget Framework 9
Steps to Using a Widget 10
Widget Editor 11
Adding a Widget 12
Widget Types 14
Widget attributes 14
Widget Templates 15
Adding a Header Template 15
Editing a Widget Template 16
Customization 16
Custom attribute specifications 18
Using Customization Values 19
Customization Example 19
Widget Functionality 21
Source Template Content 21
Data Capture Widget 21
Layout Widgets 22
Navigation Widget 23
Handling Hidden Conditions 23
Row Widgets 23
Header Template Content 24
Customization in Template files 25
Dollar Replacement 25
ITEM 26
Datastore 26
General 26
Validation 27
Lists 27
Tables 27
Grid Row (i.e. question, heading, button, table) 28
Standard Common Attributes 28
Styles in Templates 28
2
Widget API 30
eval() function 30
Widget Structure 30
Using the Widget API 31
Slider Widget Example 31
Source Template 31
Model 31
View 32
Header Template 32
Converting existing widgets to Widget API structure 32
widget API Commands 33
Callback Widgets 34
Callback Control Flow 34
Callback Class 34
Example 35
Market Place Widgets 36
What is the Market Place? 36
Market Place Widget Structure 36
Adding a Widget to the Market Place 36
Using a Market Place Widget 36
Widget Layout at Runtime 37
Data Capture Widgets 37
Layout Widgets 37
Sections 37
Columns 37
Tab Panes 38
Example - adding a menu widget 39
3
Document History
Author Version Date
C Chavasse 5.2 27/11/2013
5.3 20/04/2015
5.4 05/05/2015
1404574 - question row widget 23/09/2015
1576261 - row widget 28/09/2016
1891628 - text corrections 14/11/2016
3008953 - custom replacement

26/02/2019
removed
C om m ents:
4
About this Guide

This guide will explain the use of widgets within an edgeConnect solution. It will explain how to use
the Widget Editor to create and modify widgets and include them in your project. It is intended for
edgeConnect developers who are familiar with the edgeConnect IDE and edgeConnect Script (see
edgeConnect Script Guide for more information). Knowledge of javascript, jquery and css would
also be useful.
Online Help
The online help provides a full reference guide for all the features of the tool and can be used in
conjunction with this guide. It is accessed via the Help item on the standard IDE toolbar or by
clicking on the standard button bar. The contents provide a list of all the major sections within
the help. The index provides an alphabetical list of all the topics in the help, which is searchable.
The search facility can be used to search for all topics related to a keyword you have entered.
Licensing and Technical Support

Prior to starting any development work described in this guide, it is assumed that the
edgeConnect development tool has been set up correctly for your environment. Product installa-
tion, setup and registration are described in the Installation Guide.
For technical support, please contact Temenos Product Support Portal at:
http://www.temenos.com/contact-us
For more information about Temenos Customer support, please see:
http://www.temenos.com/services/temenos-customer-support.
5
Overview
edgeConnect Widgets are complex, customisable UI controls you can use in your solution. Some commonly
used widgets are provided with the edgeConnect installation. However, you can also create your own widgets,
use third party widgets or customise existing widgets. They are built using the Widget Editor provided in the
edgeConnect IDE. You can modify them to be configured by the user either at build or runtime. At runtime, the
widget source is used to generate HTML which is then inserted into the destination HTML.
Widget Types
There are three types of widget:
• Layout - act as containers for other elements in the page

• Data capture - enable input of information by user
• Navigation - control movement within the solution.
Each widget type has a different function and there are different considerations when creating each of these
types, although their general set up and use is similar.
Using Widgets
You use a widget by specifying it as the display type for the element you wish to apply it to. This can either be
an answer or the entire layout grid row. The display type is set in the Presentation Editor of the edgeConnect
IDE. You can only use widgets that have already been added to your project and it must be of a display type
that is the same as the element you wish to use it for e.g. a slider widget can only be used for data capture not
for layout.
Answer widgets
You specify an answer widget in the Answer tab of the Presentation Properties dialog. A drop down list of
available display types for an answer is shown below. It includes several widgets which must have already been
added to the solution.
Another example below shows a list of widgets available for a date element. One of the options available is
jquery Calendar, a date type widget which is included by default in the edgeConnect IDE as a Product Widget.
Layout Grid Row widgets

A Layout Grid Row widget is used to control the appearance of the entire layout grid row. They can be used for
the following display types:
• Question
• Heading
6
• Button
• Table
This allows the HTML that is generated for an entire row to be customised. The generated HTML can be smaller
in size and simpler than that generated by edgeConnect. It also allows the user to use javascript frameworks
for design purposes (like boostrap for responsive web sites).
This option is available in the Appearance tab of the Properties dialog. It is displayed in a drop down list of Row
Display types when Custom Design is chosen as an option. A row widget must already have been added to the
project for it to be available. The example shows a question row widget.
The grid layout varies depending on the widget used.
Question Row Widget

The question row layout grid layout consists of 5 cells:
Cell Name Cell Id
question p1_{question_id}
mandatory p2_{question_id}
prefix p3_{question_id}
answer p4_{question_id}
help p5_{question_id}
The widget needs to generate the code which defines the question row, including the:
• label
• postfix
• prefix
• mandatory indicator
• help icon
plus the error, warning and information messages.
Heading Row Widget

The heading row layout grid layout consists of 2 cells:
Cell Name Cell Id
label p1_{heading_id}
help p5_{heading_id}
The label contains the heading display text which must be generated by the widget.
7
Button Row Widget

The button row layout grid layout consists of 5 cells, the same as that of the question row:
Cell Name Cell Id
question p1_{button_id}
mandatory p2_{button_id}
prefix p3_{button_id}
answer p4_{button_id}
help p5_{button_id}
However, the question, mandatory and prefix cells are not populated. The answer cell always contains the
button and the help cell could be populated if there is help text associated with the button.
Table Row Widget

The table row grid layout only defines 1 cell:
Cell Name Cell Id
question p1_{table_id}
The question cell always contains the table.
Row Widget HTML

Row Widgets allow customisation of the HTML code that is generated for the presentation items that use the
grid layout. It is possible for the generated HTML to be smaller in size and simpler. In addition, using a widget
allows the user to use javascript frameworks for design purposes (like boostrap for responsive web pages).
The content that is wrapped by the row (the answer for question items, the text for heading items, the button for
button items and the table for table items) can be generated by the question row widget or standard
edgeConnect code can be generated by edge using $$ITEM.ANSWER_EC_GENERATE$.
If the question answer is generated by edge, the full functionality for the answer field is available: validation,
apply styles, use widget for the answer field. If the widget generates its own custom code for the answer, it
must include its own code for validation and for applying styles. For styles to be applied, the widget must use
the standard tag ids for the cells of the row (row, question, mandatory character, prefix, help, line below and
above), available using ITEM properties.For mandatory questions, there must be a tag with id in the form
MM_{item_id} to trigger mandatory validation.
Customisable Features
If the widget has any customisable features, a new tab will appear once you have chosen it as the display type
for your control. This new tab will allow you to enter values for the customisable parameters. The example
below shows the additional tab displayed if you choose a slider control to enter a numerical value.
Customisation allows you to control the size, orientation, step size, etc of the control.
8
Adding a Widget
You add a widget to your project by using the Widget Editor tool which is provided as part of the edgeConnect
IDE. This allows you to specify the widget files that are required for a widget. It can be a widget you have
created or a third party widget you are using.
The widget editor is also used to add or modify the widget content and add any customisable features to it.
Widget Framework
The details of all widgets used by a project are contained in a single xml file held at the root of the project. This
file is called widgets.xml. An empty widget.xml file is created by default for each project. The Widget Editor is
used to make changes to this file. When you add a widget to a project it is added to this file.
A widget has a number of attributes which describe what it does, how it will appear in the IDE and any related
files it uses e.g. help files, jars. Only two attributes are mandatory, name and type.
The functionality of a widget is defined in template files which contain content that will be included in the page
of HTML output at runtime. Each widget has one source file and optionally one or many header files. The
source template contains the content and any logic required for the widget. The source template files may refer
to script files or css files which are held in the web context. These are included in the header template files.
These will be included in the header part of the page when it is generated.
A widget may also have user configurable parameters which can be set in the IDE. The xml describes what
parameters are available and how they are displayed in the IDE.
An example of the structure of the file is shown below. You can edit widgets.xml directly, however, to avoid
errors it is recommended that you use the Widget Editor to make your changes.
9
Steps to Using a Widget

Creating a widget is carried out as a series of steps These are shown in the diagram below and described later
in this guide. Not all the steps are mandatory and once the widget is created it can be amended at any time to
alter the functionality.
10
Widget Editor
The Widget Editor is a tool available within the edgeConnect IDE which is used to create and add widgets to
your Project. This must be done before you can use a widget in your project. It enables you to make changes
to the widgets.xml file which contains the specification for each widget used in the project.
An empty widgets.xml file is created when you open a new project. You can edit this file directly, but it is
recommended that you use the Widget Editor to avoid errors.
Using the Widget Editor

1 On the edgeConnect IDE Menu bar, click Tools, click Edit Widgets for Project
The Widget Editor will open. Any widgets already added to the project will be displayed below the widget root in
the left hand pane.
2 Click Widget to display widget details in right hand pane
11
Edit the attribute details by typing or selecting the appropriate value in the right hand column of the attribute
details pane.
3 Expand the widget to show any templates it uses
4 Click the widget template to display the template details in the right hand pane
5 Click Save to save and changes or Cancel
The widget editor window will close.
Adding a Widget
To Add a Widget to a Project
1 Open the Widget Editor
2 Right click on the widget root icon
3 Click Add, click Widget
A new widget is added to the bottom of the list of existing widgets in the Project.
An empty list of attributes is added to the right hand pane.
12
4 Enter widget Name
The widget name is used in the drop down list of display types in the Presentation Editor when you select a
display type for an element.
5 Double click Type field. Select type from drop down list
The type specifies the type of element the widget can be applied to.
Name and Type attributes are mandatory. The other optional attributes will be described later in the document.
6 Add any other attributes
7 Expand widget and click on Source Template
8 Click elipsis for Value attribute
The Template file chooser is displayed.
9 Select the template widget (.wgt) file if it already exists.
If the widget template file does not exist, go to the location you wish to create the file in and type the file name.
Click Select to create a new file.
10 Click Save
A new widget will be added to the Project.
13
If you wish, you can see the new widget has been added to the widgets.xml file in the Project root.
Widget Types
The type of the widget roughly corresponds to the types available for data input , layout and navigation within
edgeConnect. They define the types that the widget can be used with. The type must be from the lists shown
below depending on whether it is a data input, layout or navigation widget.
Data Input Layout Navigation
Text Format Button
Number Column Menu
Decimal Tab Progress Bar
Date Breadcrumb
List
MultiSelect List
Question Row
The type is used to determine if the widget can be used as a display type for an element in the solution. The
display type is specified in the Presentation editor. It is possible to have more than one type for a widget. In
this case a comma separated list of types should be used e.g. type=”Number, Decimal”
A question row widget can only be used in conjuction with the whole question row and is specified as a
display type for the row. It cannot be selected with any other widget types.
Widget attributes
Other widget attributes can be specified when adding a widget, but only Name and Type are mandatory. A list of
attributes available and what they are used for is shown below.
W idget A ttribute D escription Possible Values
N ame N a me o f the w idget String values
Ca llback Indicates w hether w idget True o r fa lse

is a callback w idget
Type W idget type Choose from drop

dow n list o f types
Ico n T he ico n displayed in the Ico n filename

ID E w hen the w idget is
used
Dialog handler Dialog handler name
Help file Help file to display fo r the Help filename

w idget
Jars Jar required fo r the w idget Jar file name
Roo t type T he name of the roo t type

14 if you w a nt to extend an
existing type
Widget Templates
There are two types of widget template files:
• Source - mandatory
• Header - optional
Source template files contain the content which will be used to generate the HTML for the widget which is, in
turn, added to the page at runtime. An empty Source template is added to a widget by default when it is cre-
ated. Adding content to the Source template is required for the widget to function correctly. The type of content
required is described later in this document.
Source template files may refer to other script or css files held in the web context. These files are added to the
widget as Header templates, their content is included in the header part of the page at runtime. If you use the
same widget multiple times on a page, the header template will only be included in the header section of the
page once. If you use script in your widget, you should aim to put as much as possible in a header template to
reduce the size of the page at runtime.
Adding a Header Template

If a header template is required, it must be explicitly added to the widget as they are optional and not added by
default.
To Add a Header Template to a Widget

2 Right click on the widget
3 Click Add, click Template
An empty header template will be added to the widget.
4 Click the arrow for the Value attribute
5 Click Select file if template already exists.Click Select to choose the file.
If the widget template file does not exist type the file name.
7 Click Save
The header template is added to the widget.
You can add multiple header templates if required.

15
Editing a Widget Template

The Widget Editor allows you to add or amend the content of a widget file.
To Add Widget File Content

2 Expand the Widget
3 Click on the Template you wish to edit
4 Click on the arrow icon to the right of the Template value attribute
5 Click Edit file
The File Content Editor is displayed allowing you to edit the Template file.
5 Make any changes required
Use the elipsis button to add any System words, Widget commands, Data store names, etc to the template.
6 Click Save
Any changes made are saved to the widgets.xml file. If you do not wish to save the changes, click Cancel.
Customization
Customization allows some features of the widget to be specified by the User when they use it in their project.
When the user chooses a widget display type for their element, if there is any customization available, a new
tab will be displayed enabling them to customise the widget.
16
For example, if you choose a display type of Accordion for your section in the Presentation editor,
then a new tab called Accordion details will be displayed.
This tab allows you to specify various colours and images which are used for parts of the accordion widget.
Other types of customization are available depending on what is appropriate for the type of widget you are
using. You can add as many customization features as you like to the widget, but there is a payoff in the build
and test time for the widget.
The values of the customisation attributes are updated in the templates at runtime if they are specified, other-
wise default values are used.
Custom attributes are contained within <custom> tags within the widget.xml file.
To Add Customization Attributes

The customization attributes are used to build up a panel of questions for the user to fill in. They allow you to
make features of the widget available to customize via the IDE. They also make the widget more reusable. For
these values to be effective, you must then use them in the widget source template.
2 Right click on the Widget
3 Click Add, click Custom Attributes
A new Custom Attributes node is added to the widget structure. Any custom attributes are added to this node.
An empty Attribute node is created when the Custom Attributes tab is first created.
17
4 Expand Custom Attributes and click on Attribute
A blank Custom attribute is displayed.
5 Enter a value for Name
Name is the only mandatory attribute. It is used to refer to the attribute in the widget template.
6 Enter any other attributes required
7 Click Save
The widget.xml file is updated with the customization specified.
If you wish to specify additional customization, right click on the Customization Attribute node, click Add and
click Attribute. This will add another blank attribute. As many customization attributes as required can be
added in this way. These values can then be used in the widget template file to affect the widget behaviour.
Be aware that the amount of flexibility afforded by adding customization comes at the expense of development
time for implementing and testing the customizable parameters for the widget.
Custom attribute specifications

All the possible values for specifying and displaying a custom attribute within the IDE are given below.
Attribute Description Function Possible Values Mandatory
name The name of the attribute. Used as a reference to attribute Alpha characters only 
within RTE (i.e. a-z and A-Z)
prompt The customization question Appears in the Widget Customization Any text 
text tab in the edgeConnect IDE
type The customization answer Specific input field for the Drop down list of possible values e.g. 
field type e.g. Colour customization value displayed on the PropertyChooser, Textfield, ComboBox
chooser, textfield, etc customization tab in the IDE
typeValue The values associated with Specifies the types of values which can Possible examples: 
the answer type be entered in the answer field NUMERIC|2 - 2 digit textfield
A|B|C - values for a combo box
mand Is the answer required true or false (default if not specified) 
defaultValue The default value for the Used at runtime if no value is specified Any text 
attribute in IDE
tab The name of the tab to Will default to "Widget Details" if not specified 
display the attribute on
usage How the attribute should Useful for language map Drop down list of possible values 
be used
layout How the attribute should Drop down list of possible values e.g. display on 
be displayed in the IDE tab new line
dialogHandler The name of any dialog 

handler class to be used
when dialog is displayed
18
Using Customization Values

The customization values which are entered by the user in the IDE when the solutions is built can be used in
the Source template file for the widget. At runtime, the reference to the attribute is substituted for the user
entered value.
Customization Example
The basic data capture widget that we have used previously in this document has a yellow background. We
could customize the background colour by allowing the user to specify it in the IDE. This is done by adding a
background colour custom attribute to the widget. We use the custom attribute in the source template and the
value entered by the user for this attribute is substituted at runtime.
To Add the Customization Attribute

2 Right click on MyFirstWidget
3 Click Add, click Custom Attributes
4 Expand Custom Attributes and click on Attribute
5 Enter the attributes as shown below
6 Click Save
To Use the Custom Attribute in the Source Template

2 Expand the widget and click on the Source template
3 Click the down arrow on the template value attribute to edit the source template
4 Click Edit File
5 Replace the hardcoded background colour (yellow) with the custom attribute
(ITEM.BACKGROUND_COLOUR)
It is important to spell the attribute name in exactly the same way as it was specified in the custom attribute,
otherwise it will not be recognised by the interpreter and the value will appear as blank in the generated HTML.
6 Click Save to save the attribute changes
7 Click Save to close the Widget Editor
When you run the project, you will notice that the background colour of the widget will be the one which you
have specified in the IDE. This is becuase the value is substituted at runtime.
19
The above example is a simple illustration of how values can be replaced at runtime by user specified values
thereby adding complexity to your widget.
20
Widget Functionality
The actual Widget functionality is contained in Widget template files. They contain the HTML which will be
included in the page when it is displayed at runtime. They may also contain some logic, specified in scripting
language, or refer to script or css files. When the edgeConnect RTE encounters a widget while processing the
Presentation tree at runtime, any scripting and replacement is carried out by the edgeConnect interpreter and
the resulting HTML is then inserted into the page which is being generated. The edgeConnect RTE then moves
onto the next item in the Presentation tree. This functionality can be used to add complexity to the basic
widget.
Source Template Content

Each different type of widget has a different type of function and interacts in a different way with the page of
HTML in which it exists.Therefore each different type of widget template file has a slightly different structure.
In addition, the edgeConnect RTE (Runtime environment) needs to be able to identify the widget. You can do
this by giving all widgets an ID. To do this you use the keyword ITEM and the function ID(). ITEM refers to the
current item in the presentation tree which is being processed. The interpreter will replace ITEM.ID() with the
unique ID of the current item being processed in the Presentation tree.
Data Capture Widget

A data capture widget exists within an <input> tag, therefore any Source template must contain this tag. An
example of a basic widget is shown below.
Data capture attributes
Attribute Description Value
id Unique id of the widget ITEM.ID()
name Name of the widget used to ITEM.DATAITEM()

pass the value back to the RTE
value Value of the widget passed back ITEM.DATAITEM().VALUE()

to the RTE
HTML generated at runtime

The attributes of the data capture widget are used by the RTE to pass the value of the widget back to the server
for further processing once the user moves off the page.
The widget generated and its corresponding HTML is shown below.
You can see that ID and name have been replaced by the corresponding run time values. The Value attribute
will remain empty until a value is entered in the field by the user. However, if the field is prepopulated, for exam-
ple by using a pre-phase rule, as in the example below, the value attribute is substituted and the data capture
widget displays the value.
21
Layout Widgets
<div> tag
Layout widgets are typically contained within a <div> tag. The value of the id attribute of the tag is
$$ITEM.ID()$. The interpreter will replace this value at runtime in order to uniquely identify the widget.
$$FORMCONTENT$
Layout widgets act as containers for other elements in the page. Once the HTML for the widget is inserted in
the page, the RTE needs to know where to insert the HTML for any children it contains. This is done by includ-
ing $$FORMCONTENT$ to instruct the edgeConnect RTE to add children at this point once it has finished
processing the widget.
HTML generated at runtime

This widget will generate the following HTML at runtime which produces a section with a yellow border contain-
ing child elements below the text “children about to arrive..”.
22
Navigation Widget
A navigation widget enables a user to move to other parts of the solution. It may be a:
• button
• menu
• tree
$$ITEM.NAVIGATION()$"
The $$ITEM.NAVIGATION()$ function must be included for any navigation widget.
This will be replaced at runtime with the correct code required to handle the navigation as shown below.
Handling Hidden Conditions

To test is a widget is hidden or not, you can use the ITEM.IS_HIDDEN() test. This returns "true" or "false". E.g
$%IF ITEM.IS_HIDDEN() == "true"$ the item is hidden.
It is important that any hidden data capture widgets are disabled so that the value is not sent back to the
server. This will result in an error. In order to do this, you need to include the following:
<input ...
$%IF ITEM.IS_HIDDEN() == "true"$
disabled="disabled"
$%ENDIF$
....>
Row Widgets
A row widget generates the HTML/script which defines the entire layout grid row i.e some or all of the following:
• label
• prefix
• mandatory
• answer
• postfix
• help button.
Layout grid widgets can be used for:

• questions
• buttons
23
• headings
• tables
The properties used for a layout grid row are obtained from the ITEM keyword and row specific properties.
These are listed in the ITEM section below. Note that if they refer attributes that are not defined for a particular
presentation item (like mandatory character or image, which only applies to questions), nothing is returned.
<div> tag
Row widgets are typically contained within a <div> tag. The value of the id attribute of the tag is
$$ITEM.ROW_ID()$. The interpreter will replace this value at runtime in order to uniquely identify the widget.
The question and table presentation objects can have a line above and a line below. For these presentation
objects, the standard row renders the lines as divs before and after the item row with ids having the form
row_p0_{item_id}_Above and row_p6_{item_id}_Below.
Generating the row parts

The row widgets can access all the attributes defined in the designs. Usually for each cell defined by the grid
layout there is a style. There are exceptions e.g. for table row, the question cell does not have a style defined.
These styles are set as classes for the p{x}_{item_id} tags. To correctly apply the styles, in the row widgets the
cell ids should be kept as described above because the javascript functions that set the styles rely on these
ids. Also the tags for row cells (those that have ids like p{x}_{item_id}) must be div tags.
Each part of the layout grid row (label, mandatory character, answer prefix, answer, answer postfix, help) must
be identified by the appropriate ID function of the ITEM widget command. For example, the mandatory part of
the question row should be identified using id=”$$ITEM.MANDATORY_COL_ID()$”.
To apply styles to the layout cell ids, use the appropriate style property of the ITEM.STYLES() function. For
example the mandatory column style would be class=”$$ITEM.STYLES().MandatoryStyle$”. The available
styles are:
• RowStyle
• QuestionStyle
• MandatoryStyle
• PrefixStyle
• AnswerStyle
• PostfixStyle
• HelpStyle
Each one of these styles has a variant for the following conditions:
• Error
• Warning
• Info
in which case the style is prefixed by the condition. For example,

class=”$$ITEM.STYLES().ErrorMandatoryStyle$”.
Header Template Content

You need to include any external javascript libraries/files e.g. jquery and external css files in the header tem-
plate. You should also add javascipt/css used by the widget. You should try to include any script required by
the widget in the header file if possible as each header is only included once in the page regardless of how
many times the widget is used in the page.
24
Customization in Template files

Using replacement and scripting within the widget template file allows more powerful widget customization to
be achieved. This uses runtime values to affect the way the widget works.
The $$...$ syntax available within edgeConnect, which allows parameters within the dollars to be replaced with
the runtime value, can be used in the template. This is known as “dollar replacement”. Customization, using
user entered values, can be achieved by replacing the reference to the value at runtime with the actual value.
Further complexity can be added by using scripting commands. These are built-in functions which allow logical
processing to be carried out at runtime.
Dollar Replacement
If you edit the widget source template within the Widget Editor tool, you will notice that there is an elipsis
button to the right of the edit pane.
Clicking this button will open the value chooser.
This displays all the system words which are available for you to use in the template file. These will be replaced
with the actual values at runtime. If you choose a value which has additional functions associated with it, these
will be displayed in the dropdown list below the options. For example, if you choose a number type data item,
you can opt to format the number using the format() function.
25
ITEM
One of the key concepts to understand when using the replacement values is that of ITEM. The ITEM keyword
refers to the current item in the presentation tree which is being processed. All the attributes defined for that
item are available along with attributes of the corresponding item in the Process. It is also possible to use the
data item (if applicable) for questions.
The tables below show the attributes available for the ITEM keyword. These will be replaced with the current
value at runtime. The attributes are divided into functional categories.
Datastore
Attribute Description
$$ITEM.DATAITEM()$ The data item for a question
$$ITEM. DATAITEM().VALUE()$ The run time value for a data item
$$ITEM.DATAGROUP()$ The processed data group name
$$ITEM.DATAGROUP().LASTINSTANCE()$ The last populated instance for the

current item's data group.
$$ITEM.DISPLAY_VALUE()$ Formatted version of data item value
General
$$ITEM.ID()$ The edgeConnect generated unique id for the item - this gets used
quite a lot, and should be used in any script where a unique
reference is required, e.g. a javascript variable that may be used by
more than one occurrence of a widget should use this id in its
name to avoid clashes.
$$ITEM.READONLY()$ A boolean indicator identifying if the question is marked as read

only. Returns true if it is read only.
$$ITEM.READONLYSTYLE()$ The style of the read only question. Read only questions can be
displayed as just text, or as a disabled component. This returns
'Text' for text and '???' for a disabled component.
$$ITEM.STYLES().xxx$ The current style for the item. xxx must be one of the available
styles for the item, and is case sensitive - e.g. ErrorStyle. So to get
26 the error style, it would be $$ITEM.STYLES().ErrorStyle$. Other
available style names can be found in the .ect file for the project.
Validation
$$ITEM.MINVALUE()$ The min/max value for a numeric/decimal item (taken from

$$ITEM.MAXVALUE()$ process, if data store validation has been overridden,
otheriwse from data item or its custom data type)
$$ITEM.MINLENGTH()$ The min/max lenth for a text item (taken from process, if
$$ITEM.MAXLENGTH()$ data store validation has been overridden, otheriwse from
data item or its custom data type)
$$ITEM.VALIDATION()$ This is the onchange script that edgeConnect would have

inserted for a standard question. Therefore widget values
can be validated by edgeConnect methods
$$ITEM.CHECKHIDDEN()$ This inserts the check hidden trigger code into the widget
Lists
$$ITEM.LISTLENGTH()$ The number of items in the list
$$ITEM.DATAITEM().LISTITEM().VALUE()$ When iterating through the list of items,

returns the display value for the current list
item
$$ITEM.DATAITEM().LISTITEM().KEY()$ When iterating through the list of items,

returns the key for the current list item
$$ITEM.DATAITEM().LISTITEM().GROUPVALUE()$ When iterating through the list of items,

returns the group value for the current list item
$$ITEM.DATAITEM().LISTITEM().SELECTEDINDEX()$ The integer index of the currently selected

value from the list
Tables
$$ITEM.NUMBER_OF_ROWS()$ If the current item is a table, this returns the total number of rows
in the table
$$ITEM.NUMBER_OF_CHILDREN()$ If the current item is a table, this returns the number of child items
within the table.
$$TABLE_CHILD.xxx$ An attribute from a child item within a table. This is used in

conjunction with the FOREACH syntax - see section 3.
$$TABLE_CHILD.IS_LAST()$ A Boolean to indicate if the child item is the last child in the table.
Returns "Y" if child is last. Used in conjunction with FOREACH
syntax.
27
Grid Row (i.e. question, heading, button, table)

These commands are available for all row widgets, but if they refer attributes that are not defined for a particular
presentation item (like mandatory character or image that is defined only for questions), nothing is returned.
$$ITEM.ANSWER_EC_GENERATE()$ The HTML generated for the answer

cell if the presentation item is a
question or button or for the
question cell if the presentation is
heading or table. More generally, it
generates the content wrapped by
the row
$$ITEM. MAND_CHR_IMG$ The mandatory character or image
$$ITEM.HELP_IMG()$ The help image
$$ITEM.GROUP_WITH_PREVIOUS()$ Whether the current question is

grouped with the previous one
$$ITEM.HIDE_QUESTION_PART()$ Whether the question part is hidden
$$ITEM.LINE_ABOVE_CELL_ID ()$ The line above the cell ID
$$ITEM.QUESTION_COL_ID ()$ The question column ID
$$ITEM.MANDATORY_COL_ID ()$ The mandatory column ID
$$ITEM.PREFIX_COL_ID ()$ The prefix column ID
$$ITEM.ANSWER_COL_ID ()$ The answer column ID
$ITEM.HELP_COL_ID ()$ The help column ID
$ITEM.LINE_BELOW_CELL_ID () The line below the cell ID
$ITEM.SPACING_CELL_ID()$$ The spacing cell ID
Standard Common Attributes

Note that there are no brackets after the attributes.
$$ITEM.QuestionText$ The question text for a question
$$ITEM.TabName$ The name of the tab - this is the text that is

displayed in tab
Note that it is possible to access any standard edgeConnect attribute if you use the syntax ITEM.AttrName.
This is case sensitive. Attribute names can be found in the .ifp file.
Styles in Templates
You can define styles that your widget will use within the template. The advantage of this is that you can make
these styles dynamic by incorporating customization attributes which the user has specified using the IDE.
Any styles defined must be contained within style tags as shown below.
<style type=”text/css”>
styles definitions
</style>
28
Styles are written in CSS. You can use them to overwrite styles that are provided with a third party widget. The
example below is from the Slider widget supplied with edgeConnect. It overrides styles that are supplied with
the jquery-ui slider widget which is used. You can see that scripting is also contained within the style defini-
tions to use a slider image if one has been specified in the IDE.
<style type=”text/css”>
#$$ITEM.ID()$.ui-widget {font-family: inherit;}
</style>
29
Widget API
The Widget API is an architecture pattern for use when developing widgets for edgeConnect solutions. It has
been developed to avoid the use of the eval() function and consequently improve security and efficiency when
using edgeConnect widgets.
eval() function
The eval() javascript function takes a string and executes it. If the argument is an expression, eval() evaluates
the expression. If the argument is one or more JavaScript statements, eval() executes the statements. These
are executed with the privileges of the caller. Consequently, this is a powerful and potentially dangerous func-
tion. Its use is discouraged for the following reasons:
• Security: your string can be injected with other commands by third-party scripts or user input. Improper
use of eval opens up your code for injection attacks
• Debugging: it’s difficult to debug errors — you have no line numbers or obvious points of failure.
• Optimization: the JavaScript interpreter cannot necessarily pre-compile the code because it could
change. Whilst interpreters have become increasingly efficient, it will almost certainly run slower than
native code.
Although still supported by browsers, its usage is discouraged in new projects and alternative constructs
should be used.
Using the widget API negates the use of the eval() function within the edgeConnect interpreter and is strongly
recommended. The eval() function remains within the edgeConnect interpreter for compatibility with older
widgets
Widget Structure
The widget API is based on the model–view–controller architectural pattern. The model describes the character-
istics of the widget. The view describes how the model data is presented i.e. how the widget appears. The
controller contains the widget logic required typically to handle events.
These three architectural structures are contained within the source and header templates of the edgeConnect
widget architecture. The model and view are contained in the source template. The controller, containing
30
javascript, is contained within the header.
Using the Widget API

Basic Steps to Create a Widget Using the Widget API
1 Create a javascript object which represents the model (name-value pairs)
2 Create the View: contains the HTML used to renderi the widget referencing any model values required
3 Include the model and view in the Source template for the widget
4 Create the controller: contains any javascript required for the widget controller to manage the widget
lifecycle
5 Include the controller in the widget header file
Slider Widget Example

A slider allows you to select a value from a range between a maximum and minimum by using a slider handle.
An example is shown below for selecting your salary from a range of values.
By moving the drag handle you can select a range of values between 1000 and 100000 incrememnting by steps
of a thousand. These characteristics of the slider can be varied by the user as well as, for example, displaying
the selected value, the colour of the selected and unselected amount, the size of the drag handle.
Source Template
The source template needs to contain the code for the model and the view.
Model
The Model is a javascript object which must:
• contain all the dynamic values i.e. $$ values
• set type attribute to “application/json” i.e. <script type="application/json">
• have an id attribute using “$$ITEM_ID()$_model” to uniquely identify the model i.e. <script
type="application/json" id=“$$ITEM_ID()$_model” >
• contain the name of the controller
The model for the slider describes the characteristics of the slider that can be varied either at input or by the
slider attributes specified in the edgeConnect IDE.
The controller must have a unique name to avoid being overwritten by an object of the same name or itself
overwiting a pre-existing object.
In the header template, an object of the same name must be created. This must define a function for the last
part of the name, in this case “controller”. This will be called by the widgetAPI and will allow the controller
access to the model data.
31
View
• contains the HTML which will display the widget
• can contain $$ values
• can use edgeConnect script
• should not contain javascript except the model script and the registering.
You will also need to register the model with the widget API using widgetAPI.add() command passing in the id
of the element. This is shown for the slider example below.
Header Template
The header template contains the code for the controller. This contains any <script> which carries out rendering
logic and any event handling. This is only required if the widget uses javascript for this purpose.
The header template must:

• create a namespace for the controller using the name specified in the object.
• define a function corresponding to the last part of the controller property defined in the model
• set type attribute to “text/javascript” i.e. <script type="text/javascript">
When the controller is called by the widgetAPI, the keyword “this” refers to the model. Any values required by
the controller need to be obtained from the model. In the example below, the variable model_data is being used
to refer to “this”. The values for the minimum value, maximum value and step size are obtained from the the
model and set on the slider options, which are passed into the constructor of the slider.
Converting existing widgets to Widget API structure

Although the edgeConnect widget framework is backwardly compatible with existing widgets, there may be a
reason (e.g. security) to update existing widgets to use the new widget API in some cases. The steps below
outline how to do this.
32
To Convert an existing widget to the Widget API structure

1 Create a javascript object which represents the model
• move any $$ values used by javascript within the source template into a model object
• add a controller property which points to the controller function in the header to the
model object
2 Create the View from the source template

• contains the HTML rendering the widget
• $$ values can still be used within the HTML strucuture (or css)
3 Register the widget with the widget API in the source template using the element’s id
• use widgetAPI.add(“$$ITEM.ID()$”)
• there shouldn’t be any other script in the template (only the model and the call to
register widget).
4 Create the controller

• move any javascript contained in the source template to the controller
• name of controller function must match that defined in the model
5 Include the controller in the header template
widget API Commands

Below is a table of widget API commands, a description of their function and any arguments they take.
Attribute Description Argument(s)
namespace() create the controller object path to controller object
add() register model with the widgetAPI element id
getScript() load a javascript resource asynchronously path to script,

callback function
addEvent() create custom events event name,

callback function
removeEvent() remove the event event name,

callback function
triggerEvent() used in callback from getScript() to notify type of event to trigger e.g. "LibrariesLoaded"
widgetAPI when resources are loaded
docReady() function similar to jquery document ready callback function,

optional context
33
Callback Widgets
A callback widget is one which exhibits callback behaviour. This enables the widget to alter the HTML content,
generated by the Presentation Engine, on the server. This allows you to alter the way the widget behaves by
making changes to the standard HTML generated for the widget. Any widget type, i.e. data input, layout or
navigation, can be a callback widget. Setting the callback attribute to true will enable the widget to exhibit
callback behaviour.
Callback Control Flow

The callback widget is specified as the display type for the element and its characteristics are defined in the
IDE. When this is passed to the Presentation Engine, the HTML for the widget is generated. If a callback
widget is encountered as the page is generated, control will immediately pass to the callback class for the
widget which will inject the required HTML into the page at the point the widget appears.
Once the callback class is completed, control is passed back to the Presentation Engine and the rest of the
HTML for the page is generated.
Callback Class
Every callback widget must have a corresponding callback class. This will specify what HTML will be generated
for the widget. A callback widget must:
34
• extend the interface IWidgetCallback

• implement the method updateContent
The class needs to exist somewhere on the classpath.
The update Content method contains the business logic for the widget. It is passed the following parameters:
• session
• presentation entity e.g. button, textfield, section, etc.
• result - the HTML page generated so far
• startLoc - the start point for the entity in the page
When you define a callback widget it only has one Template file. The name of the template file is the name of
the callback class. The type attribute is not used, so can be excluded or defined as source or header.
Example
This example changes the generated button html to use “onmousedown” rather than the generated “onclick”
event. It will replace all instances in the html generated for the button.
package com.edgeipk.widgets.callbacks.buttons;
import com.acquire.intelligentforms.FormSession;
import com.acquire.intelligentforms.presentation.engine.elements.IWidgetCallBack;
import com.acquire.intelligentforms.presentation.util.StringBufferAdapter;
import com.acquire.util.StringUtils;
public class MouseDownButton implements IWidgetCallBack
{
public void updateContent(FormSession p_formSession,
PresentationObject p_presObject,
StringBuilderAdapter p_result,
int p_startLocation)
{
while (p_result.indexOf(“onclick”, p_startLoc) > 0)

{
int start = p_result.indexOf(“onclick”, p_startLoc);
p_result.replace(start, start + “onclick”.length(), “onmousedown”);
p_startLoc = start + 1;
}
}
The xml for this example would appear in widgets.xml as shown below:
<widget name="MouseDownButton" type="Button" callback="true">

<template value="com.edgeipk.widgets.callbacks.buttons"/>
</widget>
35
Market Place Widgets

What is the Market Place?
The Market Place is a Temenos portal for sharing widgets, components, etc. You need to be a Temenos partner
to gain access to the Market Place.s
Market Place Widget Structure

In order for widgets to be available in the Market Place, their structure has been altered slightly to simplify
sharing. The main change is that the widgets.xml file is contained within the widget itself i.e. each widget has
its own widgets.xml file.
The example below shows a Market Place widget which has been included in a project. Note the widgets.xml
file contained within the folder.
Adding a Widget to the Market Place

Once you have built and tested your widget, you will need to zip it up in order to add it to the Market Place.
Requests to publish a widget on the Market Place will need to go through Temenos marketing.
Using a Market Place Widget

Market Place widgets will be available from the Temenos website if you are a subscriber. You will not need a
licence to obtain a widget. If a licence is required for the widget itself, it will be contained within the widget and
no extra steps will be needed to obtain it. If you have subscribed, Market Place widgets will be available free of
charge.
When you download a zipped widget from the market place, with the IDE running, it will automatically be
copied to the project, extracted and made available for use straight away.
You can have more than one widget in a MarketPlace widget zip file, for example, there are several facebook
features in the Facebook widget zip, but it contains one widgets.xml.
36
Widget Layout at Runtime

This section describes how widgets interact with the layout grid. The layout grid is described in more detail in
the Presentation Guide.
Data Capture Widgets

These types of widgets are used as answers for questions.
The example below shows a standard question, with the question text cell (with a div inside), the mandatory
cell (with a div inside), a prefix cell (with a div inside) and an answer cell (with an answer div inside).
If two answers are grouped together, the answers are in two separate divs inside a fieldset. The widget con-
tent is still placed within the answer div.
Layout Widgets
These are slightly more complex, in terms of layout, since Sections, Columns and Tabs all do slightly different
things.
• A Section is meant to completely decouple one section from another – there should be no interaction by
changing contents in one Section with the layout in another.
• Columns sit within Sections (NB all phases are a Section by default), and are essentially new cells
within one of the tables within the Section.
• Tabs create a tab header (the part you click) and a tab pane.
Sections
There are two DIVs for a section as shown below.
Note that when a widget has been added, all content is added directly to it.
Columns
37
Tab Panes
These are created in the same location as a new Section.
38
Example - adding a menu widget

The example we are using is a menu widget for a drop down horizontal menu as shown below.
A menu is a more complex example as it consists of three different parts:

• the menu itself - contains all the other parts
• menu branches - in this case “for him”, “for her”, etc. There may be more than one level of branches.
• menu leaf - the lowest level of the menu hierarchy e.g. towels as shown above
You will need to add a widget for each different part of the menu.
The steps for adding and setting up the widget are as follows:
• Add each Menu type widget to the project

• Add the widget
• Create the source template
• Add any header templates
• Add any customization attributes
• Use the widget in a project
• Specify any customization attributes
• Add the widget code to the source template
• Incorporate any customization to the source template
To Add Menu widget to the Project

2 Right click on the Widget root
3 Click Add, click Widget
4 Enter Name and Type
The name and type for each part of the menu is shown
39
5 Click Source Template
6 Click down arrow on value attribute
Navigate to widget source file location and select file or type in the name of a new file for the menu container
7 Click Select
In our example, the file name is menu.wgt.
8 Click down arrow on value attribute, click Edit File
Edit the source template to add the following content. This creates the top level menu container and any further
content will continue to be added to the page at the $$FORMCONTENT$ tag.
9 Click Save
10 Repeat steps 5 - 9 for the branch and leaf menu widgets. The content to be added for the source file for
the menu branch and leaf are shown below.
Note that the leaf item must not be shown if it is hidden, therefore a conditional must be added to handle this.
The widget processing is dependent on code supplied by jquery UI. This must be included in the header part of
the page and is therefore added as header templates.
11 Right click the widget, select Add, click Template
12 Right click the down arrow for value attribute, click Select file
Select the header file required for the Menu widget in their location on your machine or enter the name of a
new header file. You only need add a header file for the menu container widget as the other two will use the
same files.
The header template content should reference any javascript or css files that the menu widget needs to func-
tion.
If you would like to allow the user to customise the widgt using the IDE, you can add custom attributes at this
point. In this example we are going to allow the user to customise the background colour of the menu.
13 Right click the widget, select Add, click Custom Attributes
14 Expand Custom Attributes, click Attribute
Fill in the custom attribute as shown below.
15 Click Save
The Menu widget has now been added to the project and you are able to use it within your solution.
To Use the Menu widgets in a Project

The Menu widgets apply to menu, branch and leaf menu types repectively, therefore you need to add a menu to
your project where you would like it to appear. The menu example is a simple menu for clothes and home
items. Once the menu is set up, you will then be able to change the display type of each menu constituent to
the appropriate widget type in the Presentation editor. The display types are set at the menu level so that you
do not need to set a display type for each menu item. This makes it much more efficient to set up and
maintian.
1 Add a menu to the Process. This will contain all the other menu items.
2 Add a menu item to the menu for each branch of the menu - For Him, For Her, For Kids, For House
3 Add a menu item to the For Him branch for each leaf item - Trousers, Jackets, Shirts, Shoes, Gadgets
Note that in our example the Gadgets menu item is hidden.

4 Repeat Step 3 until all the remaining menu items have been added.
5 Open the Presentation Editor
6 Double click on the Menu
7 Click Appearance tab, select Display Type, Branch Widget and Leaf Widget to be the widgets you
would like to use for each part of the menu
Note that you can only select the menu display types here.
8 Click Widget Details tab
5 Enter a background colour if required
6 Click OK
To Add the Customization to the Source Template

In this case, the customization allows the user to specify the colour of the menu. The colour is specified by
changing the style applied to the menu item in the case of this widget. Therefore in order to use the
customization value entered by the user, we must use
it as a variable for the style. The style is specified in the source template.
2 Click on the Source template of the widget you wish to customise
3 Click the arrow to the right of the template file name, select Edit File
4 Edit the template to add the code shown below.
Alternatively, you can edit the template file in your preferred text editor.
• “backgroundcolour” is the name of the custom attribute for the widget
• The background colour is set in the IDE by the user
• A variable is used for the background colour and this is set if the background colour has been specified,
otherwise it is transparent. This is not essential, but makes the style setting less cluttered.
ITEM.backgroundcolor is the value of the colour set by the user for this widget.
• The colour set is used in the style for the menu item.
• Any styles must be contained within the <style> tag.
5 Click Save to save the code changes
6 Click Save to close the Widget Editor

An example of the effect of customisation on the menu is shown below when the user chooses a green colour
for the menu.
Temenos Headquarters SA
18 Place des Philosophes
CH-1205 Geneva
Switzerland
Tel: +41 22 708 1150
Fax: +41 22 708 1160
www.temenos.com
TEMENOS™, TEMENOS ™, TEMENOS T24™ and ™ are registered trademarks of Temenos Headquarters SA
The Triple’A Plus™ and WealthManager™ trademarks belong to the Temenos Group of Companies
Information in this document is subject to change without notice.
No part of this document may be reproduced or transmitted in any form or by any means,
for any purpose, without the express written permission of TEMENOS HEADQUARTERS SA.
© 2010 Temenos Headquarters SA - all rights reserved.

Temenos UXP Widget Developers Guide

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Temenos UXP Widget Developers Guide

Uploaded by

Copyright:

Available Formats

Widget Developer Guide

Information in this document is subject to change without notice.

© 2010 Temenos Headquarters SA - all rights reserved.

Author Version Date

C Chavasse 5.2 27/11/2013

1404574 - question row widget 23/09/2015

1576261 - row widget 28/09/2016

1891628 - text corrections 14/11/2016

3008953 - custom replacement

About this Guide

Licensing and Technical Support

For more information about Temenos Customer support, please see:

• Layout - act as containers for other elements in the page

Layout Grid Row widgets

The grid layout varies depending on the widget used.

Question Row Widget

Cell Name Cell Id

Heading Row Widget

Cell Name Cell Id

Button Row Widget

Cell Name Cell Id

Table Row Widget

Cell Name Cell Id

Row Widget HTML

Steps to Using a Widget

Using the Widget Editor

2 Click Widget to display widget details in right hand pane

3 Expand the widget to show any templates it uses

5 Click Save to save and changes or Cancel

The widget editor window will close.

2 Right click on the widget root icon

3 Click Add, click Widget

An empty list of attributes is added to the right hand pane.

4 Enter widget Name

6 Add any other attributes

7 Expand widget and click on Source Template

8 Click elipsis for Value attribute

The Template file chooser is displayed.

9 Select the template widget (.wgt) file if it already exists.

A new widget will be added to the Project.

Data Input Layout Navigation

Text Format Button

Number Column Menu

Decimal Tab Progress Bar

W idget A ttribute D escription Possible Values

N ame N a me o f the w idget String values

Ca llback Indicates w hether w idget True o r fa lse

Type W idget type Choose from drop

Ico n T he ico n displayed in the Ico n filename

Dialog handler Dialog handler name

Help file Help file to display fo r the Help filename

Jars Jar required fo r the w idget Jar file name

Roo t type T he name of the roo t type

Adding a Header Template

To Add a Header Template to a Widget

2 Right click on the widget

3 Click Add, click Template

An empty header template will be added to the widget.

4 Click the arrow for the Value attribute

The header template is added to the widget.

You can add multiple header templates if required.

Editing a Widget Template

To Add Widget File Content

2 Expand the Widget