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.

Buttons Group¶

This widget allows you to create a group of buttons with customizable labels, actions, and styles. Use it to provide multiple interactive options, such as submitting forms, triggering events, or showing dropdown menus.

Configuration

Signature Button¶

A button widget specifically designed for triggering signature-related actions, such as opening a signature pad or initiating an e-signature workflow.

Configuration

Dynamic Tab Action Buttons¶

The Dynamic Tab Action Buttons widget creates a navigation tab bar header with customizable behavior. Each button functions similarly to a Custom Action Button component. The configuration allows you to specify the list of tabs and their behavior through the associated OnLoad script. Visually, this widget appears as a series of tabs, each representing an action. Configuration options include additional CSS classes, column settings, fixed size, initialization code, options, visibility conditions, and custom style properties.

Configuration

Dynamic Tabs Action¶

The Dynamic Tabs Action widget is designed to facilitate custom actions specifically for the Dynamic Tabs widget, mainly to implement 'tab switching' logic. It visually represents a set of actions that can be triggered within the tabs, allowing for dynamic user interaction. Configuration options include setting the Action type, defining the Action's body script, choosing a color, enabling or disabling Ajax, and setting validation. This widget requires a code snippet in the OnLoadView content script for managing actions.

Configuration

View Smart Task Button¶

A non visual widget that allows you to easily change the buttons bottom in the SmartView Task template, properly setting the required variable on the form's viewParams

Configuration

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)
}

It is possible to instruct the datatable to store information such as pagination position, display length, filtering and sorting. To manipulate the information being saved or loaded, a JavaScript function must be declared using a Custom Script.

    // Datatable configuration in the OnLoad script
    conf.stateSave = true
    conf.stateSaveParams = 'stateSaveParams'
    conf.stateLoadParams = 'stateLoadParams'

The following example is the declaration of a stateSaveParams callback which clear the global search and the columns' filter

(function(root, factory) {
    if (typeof csui !== 'undefined' && typeof csui.require === 'function') {
        csui.require(['amui/lib/jquery','bwf/am/am_init','amui/lib/underscore','amui/lib/regula'], function($,amui, _ ,regula){
            factory($, amui, _, regula);
        });
    }else{
        factory(root.jQuery, root.amui, root._, regula);
    }
}(this, function($, amui, _, regula) {
    amui.stateSaveParams = function (settings, data) {
        data.search.search = ''; // Clear the global search
        data.columns.forEach(function (column) { // Clear all the filters of the columns
            column.search.search = '';
        })
    }
}));

(function(root, factory) {
    if (typeof csui !== 'undefined' && typeof csui.require === 'function') {
        csui.require(['amui/lib/jquery','bwf/am/am_init','amui/lib/underscore','amui/lib/regula'], function($,amui, _ ,regula){
            factory($, amui, _, regula);
        });
    }else{
        factory(root.jQuery, root.amui, root._, regula);
    }
}(this, function($, amui, _, regula) {
    amui.stateLoadParams = function (settings, data) {
        return false // Prevents the state load
    }
}));

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

Accordion With Toolbar¶

The Accordion With Toolbar widget is designed to display content in collapsible sections with an optional toolbar for additional actions. It can include an inline edit feature for quick changes to the accordion's header. The widget can be visually configured with custom CSS, a menu for various actions, and appearance properties. It supports adding CSS classes, setting an ID, and managing open or closed states. Suitable for forms requiring organized, collapsible content with actionable toolbar features.

Configuration

Panel Container With Toolbar¶

oh_syncPanelConatiner

Configuration

Panel Form Container¶

This widget is a container that encloses any components added within it in a visually styled 'box'. You can choose from different box styles 'squared, rounded, or clean' and apply a light or white color scheme to suit your design. Additional styling can be applied using custom CSS classes and colors. Use this widget to group related components and visually emphasize specific sections of your form.

Configuration

Panel Layout¶

The Panel Layout widget is a container that encloses components in a structured panel, with options for an optional header and footer. It supports toggling open/close functionality, but it is not a layout container, as it spans the full page width (all 12 columns). Customize the panel's color scheme, add CSS classes, and decide if it should be collapsible. Utilize the header and footer to add extra information or actions, making it suitable for presenting grouped content in an organized way.

Configuration

Layout¶

The Layout widget serves as a container for arranging other widgets, helping to organize the visual layout of a form. Visually, it appears as a customizable box that can be adapted to different styles and sizes. Configuration options include additional CSS classes, background color, box type (squared, rounded, or clean), column settings, fixed size toggle, grid layout option, visibility conditions, and custom styling.

Configuration

Grid¶

The Grid widget is designed to display and manipulate tabular data efficiently, allowing for a variety of configurable options to customize data presentation. It supports data fetching from multiple sources, including JavaScript object arrays, OData Web services, or DataManager, and enables binding of data fields to columns. Users can configure the grid with options such as allowing adding, editing, deleting, filtering, grouping, paging, and sorting of rows. It also offers features like column selection, reordering, resizing, and toolbar display. For detailed usage and advanced configurations, please refer to the guide at https://ej2.syncfusion.com/documentation/grid/.

Configuration

Row¶

The Row widget is used to organize content horizontally within a form, similar to a row in a table. It visually represents a horizontal division where multiple elements can be placed next to each other. Configuration options include additional CSS classes for custom styling, setting a background color, determining if the row should have a fixed size, and rendering the row as a table row. The 'Show If' condition allows for conditional rendering, and custom styles can be applied for further customization.

Configuration

HTML Table¶

The HTML Table widget creates structured, tabular data layouts in your form. It visually represents data in rows and columns and can be customized with additional CSS classes, borders, and styles. Available configuration options include setting the number of columns, adding headers, enabling condensed or fixed size settings, configuring hover and striped row effects, and applying custom styles and classes.

Configuration

HTML Table Cell¶

The HTML Table Cell widget is used to render individual cells within a table. It visually represents a single cell in a tabular format, allowing for customization of its appearance and behavior. Configuration options include setting additional CSS classes, background color, column span, row span, fixed size, and custom styles. You can also control its visibility conditionally.

Configuration

Table¶

The Table widget visually represents entries from a 'Set' field in a structured tabular format. It allows users to configure up to six columns with various customization options, including column validation, label text and position, and additional CSS classes for styling. Users can also enable features such as add and delete row buttons, pulse, and read-only mode. The widget supports multiple date formats, custom styles, and data attributes to enrich functionality. This widget is ideal for displaying and managing tabular data efficiently in forms.

Configuration

Cloak¶

The Cloak widget displays a loading graphic to indicate that the page is still loading during form initialization. It visually represents a loading state and can be customized with options such as additional CSS classes, background color, and loading indicator mode (table or text). You can also configure the number of columns and rows for the loading graphic, set a unique identifier, specify custom styles, and determine when it should be shown using conditions.

Configuration

Iteration¶

This widget is a container that replicates a set of components for each item in a variable list, similar to the Iteration widget. However, the Iterator widget is fixed to use all 12 columns and does not support customizing the internal layout. It is ideal for straightforward repetition of components without the need for defining sub-layouts or adjusting the container's size. Configure it by binding it to a variable list, and all components within the Iterator will be repeated as many times as there are items in the list.

Configuration

Iteration In Layout¶

This widget is a container that replicates a set of components for each item in a variable list, similar to the Iteration widget. However, the Iterator widget is fixed to use all 12 columns and does not support customizing the internal layout. It is ideal for straightforward repetition of components without the need for defining sub-layouts or adjusting the container's size. Configure it by binding it to a variable list, and all components within the Iterator will be repeated as many times as there are items in the list.

Configuration

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

ADN ID¶

The ADN ID widget is an input field used to generate and manage Automatic Document Numbers (ADNs) in various formats. It offers several options for ADN creation, including Auto Sequence Generation, Free Style Sequence Generation, and Sheet Number Generation.

Configuration

Password input¶

The Password Input widget allows users to enter sensitive information like passwords securely. Visually, it appears as a text box where input characters are hidden.

Configuration

CheckBox Scripted¶

A checkbox widget that supports scripted behavior for dynamic checkbox states and interactions.

Configuration

CheckBox ReadOnly Scripted¶

A read-only checkbox widget that supports scripted behavior, useful for displaying computed or server-determined checkbox states.

Configuration

Checkboxes From List¶

A dynamic set of checkboxes linked to a field with multiplicity > 1. You can customize label text, size, position, help text, and popover features. Additional options include specifying actions triggered on change, adding validation, making checkboxes read-only, or marking them as required. This widget is useful for selecting multiple options dynamically provided through view parameters.

Configuration

Checkboxes From ViewParams¶

A dynamic set of checkboxes linked to a field with multiplicity > 1, with options to label the checkboxes, adjust their size and position, and include help text and popover features. Values are fetched from specified ViewParams using defined label and value fields. You can mark checkboxes as required, add actions triggered on change, or make them read-only. Useful for creating multiple selections dynamically.

Configuration