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 $'

Include Script Result¶

A component that will trigger the execution of an associated Content Script, and include the execution results in the form. The Content Script is expected to return html or plain text.

Configuration

Include SubTemplate¶

A component designed to include in the form a block of content generated from a generic HTML template. The specified template is evaluated within the form context. Additional context variables can be specified.

Configuration

Include SubView¶

A component designed to include in the form a block of content generated by a second Beautiful Form View in the same template. The subview is evaluated within the current form context, just as the main view. Typically, subviews are used to collect a set of fields and components that are common throughout multiple views, in order to reduce duplication and enhance maintainability.

Configuration

Iterator¶

A container object designed to create a replicated structure of components. The Iterator has to be bound in configuration to a variable list: all components placed within the Iterator will be replicated as many times as the number of objects in the list.

Configuration

Modal Container¶

A container object designed to create a popup "modal" panel. All components placed within the Modal Container will appear in the panel. Can be used in combination with the "Modal Action Button" component, which can trigger the visibility of the panel.

Configuration

Example

A Modal Container and a Modal Action Button used to ask the user to confirm his decision before to submit the form data.

Example Configuration

Modal Container

Modal Action Button

Panel Container¶

A container object that will enclose any components added within it in a "panel", including a header section, a footer section, and optional toggle open/close functionality.

Configuration

Remote Form content¶

A special variant of the 'Space Content' component, designed to work with the Remote Beautiful WebForms extension for Script Console. The component allow users accessing a form deployed on a Script Console runtime to access documents present in the form package.

Configuration

Space content¶

Space content s a component that shows the content of the specific "space" in Content Server to which is associated. A limited set of actions is avalaible to the user, and additional actions can be implemented. The target space can be any folder or other container accessible to the user. A typical usage is with the workflow attachments folder when using a workflow step form.

Configuration

Workflow Comments¶

A component that shows the list of comments associated to a workflow, with the possibility to set the comment for the current workflow step. Designed to be used with a workflow step form.

Configuration

Debug¶

DebugBox¶

DebugBox is a component to support the activity of form designers and administrators. Allows to visualize all the content of the data model of the form. Can be configured to show up only for specific users.

Configuration

Errors¶

Errors¶

A component designed to present all errors in the form within a single panel. It is not visible if no errors are present.

Configuration

Input¶

ADN Dropdown¶

The 'ADN Dropdown' widget an input field to be associated to an 'ADN table key lookup' form's attribute in order to expose within the form's view the same functionalities featured by the ADN module, in relation to such fields

Configuration

Example

Brief description

Example Configuration

CheckBox¶

An input field to collect a single boolean value (checked/unchecked) with a clickable checkbox. Must be associated to a Form Template field. The actual value that is submitted with the form can be specified in configuration.

Configuration

Datepicker¶

An input field to collect a date value, allowing the user to pick within a browsable calendar. Must be associated to a Form Template field.

Configuration

Datetimepicker¶

A variant of the 'Datepicker' field, that allows to collect time information in addition to the date. Must be associated to a Form Template field.

Configuration

Drop Area¶

A special variant of the "File Input" component. Creates a drag & drop enabled area within the form, in which the user can drop one or more files from his own desktop. The dropped files are automatically uploaded to Content Server, in the target space specified in configuration.

Configuration

File Input¶

A file select and upload component: allows the user to pick a file from his own desktop and to upload it to a target space on Content Server.

Configuration

eSign Signature¶

A widget that allow users to perform the eSign signature step action from within a webform.

The widget shall be used in form views associated to workflow form steps only.

The widget requires two CLEH snippets to be injected, the first one, in the OnLoad Script, is meant for adding the eSign nature to the associated form step, the second one,for managing the approval vs rejection of the documents signature.

Configuration

Input Hidden¶

The 'Input Hidden' widget is a input field that is not visible or modifiable by the user. Can be used as a support component to store values not directly set by the user. Can be either associated to a Form Template field, or alternatively the field ID and value can be provided in configuration.

Configuration

Item reference¶

An input field to select a single value representing an object within Content Server. The selection is restricted to a location in Content Server defined in the component's configuration. The component includes a filtering utility to narrow the search based on the name of the object. Must be associated to a Form Template field. The actual value saved in the target field is the DataID of the Content Server object.

Configuration

Item reference Popup¶

An input field to select an object within Content Server through a popup panel. The type of objects that the user is allowed to select can be restricted in configuration. Must be associated to a Form Template field. The actual value saved in the target field is the DataID of the Content Server object.

Configuration

Radio Basic¶

An input field to select a single value within a predefined list of possible values, with a "radio" selection style. Must be associated to a Form Template field. The values have to be specified as part of the component's configuration.

Configuration

Select Basic¶

An input field to select a single value within a predefined list of possible values, with a "dropdown" selection style. Must be associated to a Form Template field. The values have to be specified as part of the component's configuration.

Configuration

Select Date¶

An input field to select a single value within a predefined list of possible date values, with a "dropdown" selection style. Must be associated to a Form Template field. The values have to be specified as part of the component's configuration.

Configuration

Select From ViewParams¶

The 'Select From ViewParams' widget is a variant of the Select Basic component, to select a single value within a predefined list of possible values, with a "dropdown" selection style. This component has to be bound to a variable stored in the form's viewParams, containing the list of values to be presented for selection.

Configuration

Select From ViewParams and NewValues¶

A special variant of the "Select from ViewParams" component, with the additional possibility for the user to type in a free-text value to submit, in alternative to the proposed options.

Configuration

Switch¶

The 'Switch' widget is a variant of a checkbox or On/Off radio input field, displayed as a two-state switch. Must be associated to a Form Template field.

Configuration

Text area¶

A free text multiline input field. Must be associated to a Form Template field.

Configuration

Text input¶

A free text input field. Must be associated to a Form Template field.

Configuration

TKL Field¶

The 'TKL Field' widget is an input field to be associated to an 'table key lookup' form's attribute in order to expose within the form's view the same functionalities featured by the original attribute

Configuration

User by login¶

An input field to select a single value representing a Content Server user. The component includes a filtering utility to narrow the search based on the user last name or ID. Must be associated to a Form Template field. The actual value saved in the target field is the numeric identifier of the Content Server user.

Configuration

Users in Group¶

An input field to select a single value representing a Content Server user. The list of users presented includes all members of the group provided in configuration. Must be associated to a Form Template field. The actual value saved in the target field is the numeric identifier of the Content Server user.

Configuration

Wysiwyg Editor¶

A variant of a "Text Area" component, meant to collect rich text with special formatting. Must be associated to a Form Template field, typically a "Text Multiline" field.

Configuration

Scripted¶

Chart¶

The 'Chart' widget that displays a chart using the well known ChartJs javascript library. The information to be represented in the chart usually come from one ore more form's fields

Configuration

CountDown¶

The 'CountDown' widget is a component designed to trigger an action when countdown time is over.

Configuration

Countries¶

The 'Countries' widget is a variant of the 'Select Basic' component, to select a single value within a predefined list of countries, with a 'dropdown' selection style. Must be associated to a Form Template field.

Configuration

Open CS in popup¶

The 'Open CS in popup' widget is a button that will open a popup window showing a Content Server resource

Configuration

Signature Pad¶

The 'Signature Pad' widget is an input component that renders a freehand drawing area, designed to collect a sign-on-glass signature. The signature is saved as a based-64 encoded image. Can be associated to a Form Template field.

Configuration

Signature Pad with Area selector¶

The 'Signature Pad with Area selector' widget is a special variant of the "Signature Pad" component that provides additional functionality to position the signature over an existing image (typically a preview of a document to sign). The signature positioning information is saved in the form's viewParams map.

Configuration

Smart DropDown¶

The 'Smart DropDown' widget is a dropdown menu populated through a Content Script that returns a JSON. The Json result should be a list of objects with the following properties: id, text, desc, image (opt).

Configuration

Smart DropDown DB Lookup¶

The 'Smart DropDown DB Lookup' widget is a special variant of the Smart Dropdown Component, intended to implement a database lookup field. The database table, fields for labels and values, and optional clauses can be configured directly on the component.

Configuration

Smart Path Builder¶

The 'Smart Path Builder' widget is an input component designed to provide a general-purpose visual step-by-step path builder. The path is stored as a list of identifiers separated by a colon. A path can typically represent, for example, a specific folder nested in a folder structure, a node in a classification tree, or attribute paths within a category. The component has to be bound to an AJAX endpoint (which can be implemented with a Content Script) that will provide the available options based on the current path.

Configuration

Tab Action Buttons¶

The 'Tab Action Buttons' widget is a navigation component that supports the usage of a set of different views in the same form, and allows the user to navigate between the views using tabs.

Configuration

Scripts¶

Ajax CS Json¶

The 'Ajax CS Json' widget is a component that will trigger the execution of an associated Content Script. The Content Script is expected to return a JSON String.

Configuration

Custom Script¶

A component designed to inject custom inline Javascript within a form view.

Configuration

jQuery Interdependencies¶

A scripting component designed to dynamically show and hide form fields based on rules and field interdependencies. Based on the JQuery Interdependencies plugin (github.com/miohtama/jquery-interdependencies)

Configuration

Mapping Script¶

The 'Mapping Script' widget is a scripting component designed to define a javascript mapping function, useful to push value updates to multiple form fields. A typical usage is in combination with a Smart Dropdown Component: in this case, additional values returned by the AJAX endpoint can be automatically mapped to other form fields.

Configuration

Masking Script¶

A scripting component designed to create presentation masks on form fields. Based on the JQuery Mask plugin (github.com/igorescobar/jQuery-Mask-Plugin)

Configuration

On Event Validation¶

Define an inline Javascript function, to be used to trigger validation over fields

Configuration

The properties Display error message and Clean error message allow you to define custom callback javascript functions that can be used to change the way validation errors are displayed. The functions will receive in input the same parameters of the z_functions you can use to globally change in your view the way validation errors are rendered.

OnChangeAction¶

A component designed to trigger an action whenever the value of a form field changes

Configuration

Scroll Relocator¶

A scripting component designed to reposition the page scroll to a predetermined position (for example, on a specific input field) after a page reload.

Configuration

Scripts CLEH¶

Custom Action¶

A non visible widget that can be used to create 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

DropDown DB Lookup¶

A scripting component designed to create an AJAX Content Script endpoint, compatible with a Smart DropDown DB Lookup component or a Handsontable component.

Configuration

Set ViewParams Variable¶

A scripting component designed to simplify the composition of the form's OnLoad Script. The component allows to inject the Content Script code required to initialize the value of a ViewParams variable, which can then be referenced in other components or enable different functionality.

Configuration

Validation Rule¶

A scripting component designed to simplify the composition of the form's OnLoad Script, by supporting the definition and injection of one or more server-side validation rules using Content Script. The definition of the rules is controlled through a visual rule-builder editor, similar to the one used to define component visibility.

Configuration

Set¶

Add Delete Row¶

A special button component that has to be bound to a Set Field in the Form Template. Allows to add or remove rows within the set.

Configuration