Widgets List

SmartUI¶

Include SmartUI Widget¶

A widget that can be used to include a Smart View tile in a form view.

Configuration

Bootstrap¶

Progress Bar¶

A widget based on the bootstrap progress bar component. It can be used to provide users with information regarding the level of completeness of any sort of operation

Configuration

Example

Buttons¶

Custom Action Button¶

A button that can be associated to a custom action (for example: 'print' or 'download as pdf') in the form lifecycle. Action behavior is typically implemented in the view's OnLoad script.

Configuration

Example

In the example the button is used to set at once two form fields with predefined values.

Example Configuration

1
2

form.text.value = users.current.displayName 
form.date.value = "today".toDate() 

Display Attachments¶

A button that will open a popup window showing the attachments of the current workflow. Designed to be used with a workflow step form.

Configuration

Modal Action Button¶

A button that will open an overlay panel. Should be used in combination with a "Modal Container" object, which it controls, and which may contain additional buttons or other components. A typical possible usage is to implement actions that require user confirmation.

Configuration

Redirect to URL¶

A hyperlink button. When clicked, the user will be redirected to the configured target location.

Configuration

Example

In the example two Redirect to URL button are used. The first one trigger an immediate redirection towards the form's parent folder content. The second one is used to trigger a redirection towards an external website upon submission. There is no need for displaying the latter in the form. It can be hidden using it's showIf property (e.g. using a custom expression equal to: false).

Example Configuration

Standard Action Button¶

A button associated to one of the standard actions available in the form lifecycle, such as 'reload', 'exit', 'switch view', etc. These actions are automatically handled by the framework and do not require implementation.

Configuration

Example

A few usage example of the widget.

Example Configuration

Submit Button¶

A button that will submit the current form. Clicking the button will trigger form validation: submission will be interrupted if the form content causes validation errors.

Configuration

Submit Button With Param¶

A Submit Button with the possibility to specify ad additional parameter to be submitted with the form. This can be used, for example, to identify which of multiple buttons in the same form view has been clicked by the user. A possible usage is to emulate dispositions (accept and submit, refuse and submit).

Configuration

Example

Submit Button with Param used to set the value of a form's field before and upon submission.

Conditional¶

Conditional¶

A special container that is only visible under specific conditions (i.e. when the associated visibility rule evaluates to a boolean 'true' value). The rule is evaluated when the form is first rendered: re-evaluation can be triggered by any action (for example, a 'reload' action) - typically a dynamic behaviour is implemented using OnChange Action components associated to the components to be monitored.

Configuration

Example

Example Configuration

Property	Value
Basics
Condition

Conditional Else¶

A special component used to alterate the behaviour of a "Conditional" component. Must be placed inside a "Conditional" component: in this case, it will split the "Conditional" area in two sections. The section before the "Conditional Else" will continue to be visible if the rule associated to the "Conditional" evaluates to true. The section after the else will be visible if the rule evaluates to "false". Typically used to present two alternative sets of components based on a single rule. Only one "Conditional Else" is allowed inside a single "Conditional" component.

Conditional ElseIf¶

A special component used to alterate the behaviour of a "Conditional" component. Must be placed inside a "Conditional" component, but before any "Conditional Else" component. It allows to split the area in two sections, and to specify an alternative boolean visibility rule on the second section. This rule will be evaluated if the one on the enclosing "Conditional" evaluates to false. It is allowed to have more than one "Elseif" component inside a single "Conditional" component: in this case, the rules will be evaluated sequentially, until one evaluates to "true".

Configuration

Conditional Users¶

The 'Conditional Users' widget is a container object, variant of the "Conditional" component, in which the visibility rule considers the user accessing the form. Typically used to keep portions of a form visible only to a limited number of users.

Configuration

Inline conditional¶

A special variant of the 'Conditional' container component, that allows to control visibility of components within a same 'row' of the form view.

Configuration

PlaceHolder¶

A special variant of the 'Empty' component to be used in combination with the 'Inline conditional' component. This component can be used to fine tune the row and columns positioning for alternative inline blocks.

Js Conditional Container¶

A container that is only visible if the value of a specific form field satisfies a given rule, evaluated via Javascript in the user's browser. This component allows for a client side dynamic behaviour: any change in the value of the observed field will cause the rule to be re-evaluated.

Configuration

Containers¶

Box Container¶

A container object that will enclose any components added within it in a "box". A few styling options are available in configuration, while extended styling can be applied using custom css rules and classes.

Configuration

Bravo Container¶

A container object that will enclose any components added within it in a "grid". The grid layout is often used for very dense forms that require optimizing the page space, as well as for sets of input fields to be visualized as tables.

Configuration

Example

Example Configuration

Datatable¶

The 'Datatable' allows you to present the user a set of searchable and paginated data leveraging the well known Datatable (https://datatables.net/) javascript library. The widget allows the end user to perform a multi-items selection among the rendered data and use it to pass parameters to a custom CLEH action.

Configuration

If 'Index only' is set to true, the CLEH actions can rely on implementation as simple as:

if(params.am_Action == "am_select"){
  def actionsParameters = params.am_ActionParams
  Eval.me(actionsParameters)
}

otherwise the usage of JsonSlurper might be required

if(params.am_Action == "am_select"){
  def actionsParameters = params.am_ActionParams
  def slurper = new JsonSlurper()
  def actualParams = slurper.parseText(actionsParameters)
}

Handsontable¶

A component that creates a tabular representation of data, editable as a spreadsheet. Based on the Handsontable plugin (http://handsontable.com). Must be bound to a Set Field in the Form Template.

Configuration

Example

Example Configuration

Property	Value
Basics
Table column
Reload entire table through ajax	true
Totals
Show totals	true
Totals columns
Totals' HTML
Columns resize	[10%,50%,20%,20%]
Appearance
columns	12
Label Text	Items
Label Position	top
Grid height	200
Additional configuration for columns	1 2 3 4 5 6 7 8 9 10 columns[0].type = "numeric" columns[1].type = "autocomplete" columns[1].source = ["Apples","Oranges","Strawberries"] columns[2].type = "numeric" columns[2].format ='0,0.00 $' columns[2].readOnly = true columns[3].type = "numeric" columns[3].readOnly = true columns[3].format ='0,0.00 $'