×

Please give details of the problem

Skip to content

Widget Types

The screens of a web interface are composed of widgets of different types. Several widget types have different subtypes. For example, there is more than one type of button available.

The following sections provide an overview of the widget types. Each type has its own configuration, which determines the widget's appearance and behavior. The configuration options and settings are indicated in the sections below and described in detail in the on-screen help of the WebModeler. Some of these options and settings are specified and handled differently depending on the rendering engine of the web interface. For details, refer to Differences Between Rendering Engines.

Settings and Options for All Widgets

The following settings and configuration options are available for all types of widget:

  • ID: A unique identifier of the widget specified by the designer. This is needed to address the widget in JavaScript.
  • Availability and visibility: For each screen of a web interface, the designer can define whether a widget is available and visible. For example, a JavaScript field may not be visible but available.
  • User input: For each screen of a web interface, the designer can define whether a widget is editable by the user and whether user action or input is required. For example, a text field may be read-only, or selection of a value from a list may be mandatory.
  • JavaScript rules and conditions: Depending on the type of widget, JavaScript rules and conditions can be defined to determine at runtime whether a widget is editable, visible, or mandatory, to validate user input, or to execute actions depending on given conditions.
  • Tooltip: Most of the widgets provide for a tooltip to be displayed when hovering over them.
  • Appearance and layout: Depending on the type of widget, different layout options are available:
    • Width: The percentage of the web interface's width to be taken by the widget.
    • Text direction: This setting overrides the same general setting at the web interface. It can be left to right or right to left.
    • CSS class suffix: A suffix to be added to the standard widget style in order to be able to use different styles for the same widget type.
    • Borders: Settings to determine a border's position, style, color, and width.

Input Fields

Input field widgets are used for providing fields on a screen where the user can enter a value or select from a list of values.

All input field widgets have the following settings:

  • Variable: A variable to hold the data entered or selected by the user, or a given initial value.
  • Label: A label describing the input field. The designer can specify the label's text, width, and position.
  • Initial value: An initial value displayed when the web interface is opened.
  • Lines and columns: The number and length of lines available for input.
  • Characters: The maximum number of characters a user can enter as well as the maximum number of visible characters.
  • Pattern and bad pattern message (not applicable for the Autocomplete Input widget): A regular expression used as a rule for checking the input, and a message to be displayed if the input does not match the pattern.
  • Keypress (not applicable for the Autocomplete Input widget): A setting defining whether the value of the widget variable is to be updated whenever a key is pressed in the input field or only once after the field is left.

The following types of input widget are available:

Icon Description
Date Input
A field for entering a date.
The widget variable is assigned the date input as the number of seconds since 1970-01-01. An additional variable can be defined to return the date as a string in a format specified by the given pattern.
The designer can choose whether the first day of the week is Sunday or Monday.
Number Input
A field for entering a numeric value.
The minimum and maximum number can be specified.
URL Input
A field for holding a URL. If the input field is defined as editable, users can type a URL. Otherwise, the URL entered as the initial value can be clicked to open it in a new browser tab.
Password
A field for entering a password. The input characters are displayed as dots.
Text Input
A field for entering free text.
Email Address Input
A field for entering an email address.
Autocomplete Input
An input field with a select list enabling users to find and select an item as they are typing. The list is populated from a collection. It may include all items of the collection, a subset of the items obtained by a query, or an aggregation of items created by a script.
For web interfaces based on the Application Runner rendering engine, you can determine the collection field whose entries are displayed in the list as well as the field whose entries are assigned as the values to the widget variable. For example, a list of customer names may be offered for selection, and the phone number of the selected customer be assigned to the variable. For WIRE based web interfaces, you can only determine the collection field whose entries are displayed in the list.
JavaScript can be specified that will be executed when the collection has been loaded successfully, when the loading of the collection fails, and when a list item is selected.

Buttons

Button widgets are used for providing buttons to start a process, assign a manual task to a user or role, confirm or cancel a manual task, execute JavaScript code, save the current web page without interacting with the process, or log in/out to/from DigitalSuite.

All button widgets have the following settings:

  • Variable: The variable to be created or updated when the button is clicked.

  • Value: The value of the button variable to be set when the button is clicked. This can be used to drive the execution of the related process. For example, two buttons may set different values to the same button variable, like accepted and rejected. Depending on the value, the process may then take different execution paths.

  • On click: The action to take when a user clicks the button. Depending on the button type, the following options are available:

    • Clicking the button does not have any effect.
    • Display a given pop-up message.
    • Close the current window with or without displaying a message before.
    • Redirect the user to a given URL. This may be, for example, another DigitalSuite web interface.
    • Refresh the content of the current page.
    • Load the next screen: The web interface listens to the associated process, waits until a manual task is reached, and displays the screen attached to this task. As long as there is no new manual task, the screen remains unchanged.
  • Pre-launch script: A JavaScript to be executed before the actual action defined for a button is performed. For example, a JavaScript called before launching a process or confirming a manual task may validate the user input and check if all the prerequisites are fulfilled. The JavaScript must return a Boolean value. If it is true, the actual action defined for the button is invoked.

    Pre-launch scripts are not supported by Execute Script buttons as well as by Login and Logout buttons of web interfaces based on the Application Runner rendering engine.

  • Appearance and layout: The width, height, and color of the button, the text to display on it, and an optional background image.

The following types of buttons are available:

Icon Description
Submit on launch screen
A button for starting a process. It is available on the launch screen only.
Cancel on launch screen
A button to cancel the start of a process. It is available on the launch screen only.
Submit on non-launch screen
A button for confirming or cancelling the execution of a manual task. It is available on screens other than the launch screen.
The designer determines the action to be executed: continue the process by confirming the manual task, or cancel the manual task and stop the process.
Execute Script
A button for executing a given JavaScript. The script may be used, for example, for performing arithmetical calculations or operations such as hiding or showing fields or setting specific values.
Login
A button for a user to log in to DigitalSuite. It is required only for public web interfaces. Variables need to be provided for the user's email address for logging in (P_login), the user's password (P_password), and the URL the user is to be redirected to after logging in successfully (P_target).
The designer can also specify a message to be displayed if the login fails.
Logout
A button for a user to log out from DigitalSuite.
The designer can specify a message to be displayed if the logout fails.
Assign To
A button allowing users to assign a manual task to a given user. This button is not available on the launch screen.
The user to whom the task is assigned as well as additional users can be notified by an email, which can be defined as required.
Take
A button allowing users to take over a manual task by assigning it to themselves. This button is not available on the launch screen.
The user to whom the task is assigned as well as additional users can be notified by an email, which can be defined as required.
Release
A button allowing users to release a manual task they have been assigned to. The task is deassigned from the user and assigned to the relevant role (lane) of the process. This button is not available on the launch screen.
The users belonging to the role as well as additional users can be notified by an email, which can be defined as required.
Save as Draft
A button for saving the current web page as a draft, including the data filled in by the user, but without launching a process or executing a manual task. The web page with the saved data is then available in web interface reports.

Indicators

Indicator widgets are used to provide the user with a progress gauge. The following types of indicators are available:

Indicator Bar Clock Bar Circle Snake Circle Square Small Blue

Lists and Selectors

List and selector widgets are used to provide the users with a selection of elements to choose from. The elements can be offered as:

  • Select list in a list box: Depending on the settings, the users can select one or more elements in the list.
  • List of checkboxes: The users can select one or more elements by checking its box.
  • List of radio buttons: The users can select one element by checking its box.

The elements of a list may be users, roles, files, process or web interface reports, entries of custom lists, or label/value pairs provided dynamically in a variable. For details, see the list of widgets below.

Each element of a list consists of:

  • Label: This is displayed to the users and does not need to be unique. For example, this could be a user or report name.
  • Value: This uniquely identifies the element. For example, this would be a user's email address or the generated URL of a report.

The label and value of the element selected in a list are stored in corresponding variables. If several elements can be selected, the variables provide them in corresponding arrays.

For all lists, the designer can configure the following settings:

  • Listen to variables: One or more variables to be monitored. If the value of such a variable changes, the list is refreshed.
  • Post-loaded script: A JavaScript to be executed after the list has been loaded or refreshed successfully. This can be used, for example, to reformat a list for easier processing or to extract specific elements from it.
  • Initialization: The value of one or more elements to be preselected when the list is loaded.
  • Label: A label describing the list with a given length and position.

For select lists, the following additional settings are available:

  • Visible items: The number of visible elements, i.e. the number of lines of the list box. A value of 1 specifies an input field with a drop down list. Higher values result in a list box with a scroll bar.
  • Prompt: A string to be displayed in the input field as a prompt, if the number of visible items is 1.
  • Multi-selection: A setting defining whether one or several elements can be selected in the list. Multi-selection is possible only if the number of visible items is higher than 1.
  • Sorting: The sequence of the list elements: as loaded initially, or in descending or ascending alphabetical order.

For lists of checkboxes and radio buttons, the following additional setting is available:

  • Columns: The number of checkbox or radio button elements to be displayed in one line. This can be used to optimize the alignment of the elements.

The following types of list and selector widgets are available:

Dynamic Lists

For this type of list, the elements are provided dynamically as label/value pairs in a list variable.

A dynamic list can be added to a web interface as a select list, checkbox list, or radio button list by means of the following widgets:

Select List Checkboxes Radio Buttons

User Selectors

The elements of user selectors are the users of a specified role. The elements consist of:

  • Label: The user name.
  • Value: The user's email address.

The designer can configure the following settings in addition to the general ones described above:

  • Custom URL: A URL for building the user list dynamically instead of including all users of a given role. For example, parameters can be added to the standard URL of a user list to obtain a subset of the users:
    config/1/pool/1/lane/3/user/?filter=STATUS&value=ACTIVE&operator=EE
    Retrieves the active users of lane (role) 3 in pool (organization) 1.
  • Picker: In select lists, the user names or email addresses can be used to provide quick suggestions as a user starts typing.

A user selector can be added to a web interface as a select list, checkbox list, or radio button list by means of the following widgets:

Select List Checkboxes Radio Buttons

Role Selectors

The elements of role selectors are the roles included in a specified parent role. The elements consist of:

  • Label: The role name.
  • Value: The role ID.

The designer can configure the following settings in addition to the general ones described above:

  • Custom URL: A URL for building the role list dynamically instead of including all children of a given role.
  • Picker: In select lists, the role names can be used to provide quick suggestions as a user starts typing.

A role selector can be added to a web interface as a select list, checkbox list, or radio button list by means of the following widgets:

Select List Checkboxes Radio Buttons

Report and File Lists

The following widgets provide select lists of reports and files. Checkbox and radio button lists are not available.

Icon Description
Web Interface Report List
A list of the available web interface reports. The list elements consist of:
Label: The report name.
Value: The URL of the report.
Process Report List
A list of process reports defined in the project the web interface belongs to or a subproject thereof. The list elements consist of:
Label: The report name.
Value: The URL of the report.
Uploaded Files List
A list of files that have been uploaded to DigitalSuite with the web interface for a specific process request. A custom URL can be used to build the file list dynamically instead. The list elements consist of:
Label: The file name.
Value: The file's ID.
The widget includes a button for downloading a selected file. The button can be named as desired.

Custom Lists

These widgets provide a custom list to the users of the web interface. The list elements consist of:

  • Label: The label of the custom list item.
  • Value: The value of the custom list item.

The designer can configure the following setting in addition to the general ones described above:

  • Custom URL: A URL for building the custom list dynamically instead of including all items of a given list.
Icon Description
Custom List
An existing custom list. The list can be added to a web interface as a select list, checkbox list, or radio button list by means of the following widgets:
          

Reports

Report widgets are used to handle large amounts of data which are to be loaded in chunks, filtered, or paginated to keep the web interfaces lightweight and loading fast. Different types of widget are available to present web interface reports, process reports, reports on collections, or custom reports provided by JavaScript.

All reports are structured as tables consisting of columns and rows. Their contents depend on the type of report. Except for custom reports, all reports provide options for exporting and printing the data.

All report widgets have the following settings:

  • Table size: The height of the table and the number of rows to be displayed.
  • Filtering and sorting: Settings specifying whether users can filter and/or sort on the individual columns of a report. For web interface and process reports, the designer can determine the sort order of the entries by means of a query, if sorting by users is disabled.
  • Row selection: Settings determining whether users are allowed to select one or more rows in the table. The selection and deselection of rows may trigger the execution of a given JavaScript.
  • Date format: The date format to be used to display the date fields in a report and when exporting the data. With web interfaces based on the Application Runner rendering engine, a single date format for all date fields can be specified. Web interfaces based on WIRE allow designers to use a different format for each date column.
  • Listen to variables: One or more variables to be monitored. If the value of such a variable changes, the report data is refreshed.
  • Opening of links: A setting specifying whether clicking a link in the report opens the target in the same or a new browser tab.
  • Post-loaded script: A JavaScript to be executed after the report has been loaded or refreshed successfully. This can be used, for example, to apply filters to the report entries.
  • Additional columns: Columns to add to the main report. The entries are specified by a JavaScript. They can neither be filtered nor be included in an export. Additional columns can be used, for example, to calculate and display values depending on other columns or variables at runtime.

The following types of reports are available:

Icon Description
Web Interface Report
A web interface report specified in the design or dynamically by a URL.
The designer can select the columns of the report, define their sequence, change column headers and the name of the first (name) column, and specify the column width and the way of filtering timestamps.
If a web interface report is defined as editable, users can reconfigure it at runtime using all the available options.
Process Report
A process report specified in the design or dynamically by a URL.
The designer can select the columns of the report, define their sequence, change column headers and the name of the first (name) column, and specify the column width and the way of filtering timestamps.
If a process report is defined as editable, users can reconfigure it at runtime using all the available options.
Collection Report
A report on a collection which is specified in the design or dynamically by a URL.
The designer can decide to include all records of the collection or reduce them by means of a query and/or aggregation. The report columns are defined by the first-level keys of the collection, the rows contain the corresponding values.
For each execution mode, the designer can select the columns to display, define their sequence and width, change the column headers, and choose a value presentation type (number, date, text, link). Text columns can be configured with a search with autocompletion, date columns with the way of filtering timestamps.
Custom Report
A report whose contents are provided by a given JavaScript. The script may obtain the data from any source as long as it delivers them as JSON arrays.
The designer can select the report columns based on the JSON arrays, define their sequence, and specify the column headers. For each column, the designer can choose a value presentation type (number, date, text, link) and filter options available to the users.
Exporting a custom report requires a corresponding process which needs to format the data in the desired way. The designer can specify the process as well as one or more parameters to pass the data to it.

Trees

Tree widgets are used to present data in a hierarchical structure. The data can be provided by a JavaScript or obtained from a collection or a data source specified by its URL. The data type may be text, date, number, list, or Boolean.

All tree widgets have the following settings:

  • Value attribute: The key or property whose values are to be displayed as the nodes and leaves of the tree.
  • Children attribute: The key or property whose values define the children of a node.
  • JavaScript: JavaScript to be executed when a node is selected, expanded, or collapsed. For collection and URL trees, JavaScript can also be executed when the data have been loaded successfully or the loading of the data failed. With JavaScript trees, these cases are handled by the script that provides the data.

The following types of trees are available:

Icon Description
JavaScript Tree
A tree structure whose data are provided by a JavaScript.
Collection Tree
A tree structure whose data are obtained from a given collection
The designer can decide to include all records of the collection or reduce them by means of a query.
URL Tree
A tree structure whose data are obtained from a data source specified by its URL.

Containers

Container widgets are used to group other widgets in separate areas, tables, sections, or tabs. The type of container determines which widgets can be added to it. A container can be made visible or hidden on web interface screens including all the widgets it contains.

The following types of containers are available:

Icon Description
Container
A separate screen area that contains other widgets.
Section
A group of widgets that can be expanded or collapsed by clicking the section header.
The designer can define the section header, specify whether the section is to be opened when the web interface is launched, and provide a JavaScript to be executed each time a user expands or collapses the section.
Tabs
Groups of widgets arranged on a given number of tabs.
The designer can define the widget's minimum size, the sequence of the tabs, the placement of their headers, and the tab to be shown when the web interface is launched.
Each tab has its own header and, optionally, a JavaScript to be executed when a user clicks it. The designer can decide whether and when each tab is visible and editable.
Array
A table whose columns are made up of other widgets, for example, input fields or select lists. Each row contains the same widgets. A given variable holds all the widget's data as an array structure.
The table columns can be ordered as required. For each column, the designer can define the width and a header, specify whether it is visible and editable, and enable sorting of the entries. Each column can have its own footer, which can be populated using a JavaScript or a predefined function like sum to calculate the sum of the values entered in the column. The execution of the JavaScript or function is automatically triggered by changes in the column. It can also be made dependent on other variables and store its result in a given footer variable for future use.
The designer can specify the initial number of table rows and allow users to add and/or delete rows without limitations or up to a given maximum/minimum. A JavaScript can be executed each time a row is added or deleted.
The table can have additional headers spanning several columns as well as an overall footer with its own label. The footer is populated by a JavaScript whose execution can be made dependent on changes to one or more variables such as the footer variables of individual columns.
In web interfaces based on the WIRE rendering engine, designers can allow end users to re-arrange rows using drag and drop as well as print and export the entire array.

Miscellaneous

The following additional widgets are available for miscellaneous purposes.

Application History

Icon Description
Application History
A widget used to automatically track actions performed by users for a web interface instance and its associated process request, for example:
Created John Doe 10/10/2020 10:10:10
Taken Jim Smith 10/11/2020 11:20:30
...
The actions that are tracked mostly correspond to the buttons which cause a change in the related process, for example, start or cancel the process or assign an activity to a user. Additional records are created for timeouts or when the web interface instance is saved.
The widget provides default columns (action, user, date), which can be rearranged and hidden, but not deleted. The designer can define additional columns as well as variables whose value is to be saved with every user activity and can thus be included in the history. Users can be allowed or forced to enter comments for the history in the web interface, which other users may then be able to read depending on the settings. In addition, the designer can specify a format for the dates in the history and - for WIRE based web interfaces - allow users to sort the entries on individual columns.
Internally, DigitalSuite provides the history by a feed URL, which has the following structure: https://live.runmyprocess.com/live/[customer_id]/applistate/[applistate_id ie P_document.id]/history/

Captcha

Icon Description
Captcha
A captcha with a refresh option and a field for the user to type the captcha's characters. A web interface cannot have more than one captcha. Public web interfaces must have a captcha to distinguish human from computer-generated input. If a captcha is present, user input for it is mandatory.
The designer can specify the number of characters in the captcha, the width and height, noise and special effects like a shadow or grid, the background color and style, a border, and a message to display if the user specifies incorrect characters.

Checkbox (Application Runner only)

Icon Description
Checkbox (available only with Application Runner rendering engine)
A box which can be checked or unchecked.
The designer can specify the value returned by the widget in each case, for example, true and false, as well as a variable to hold the value.

Empty

Icon Description
Empty
White space at any position of a screen.

Geolocation

Icon Description
Geolocation
A widget for providing geolocation functionality. The location can be retrieved when the application is started, when the user clicks a button, or continuously while the application is running.
The designer can specify a label for a button to retrieve the location data, a variable to hold the data, and a message to display if the geolocation fails.

HTML

Icon Description
HTML
HTML code of any nature and for any purpose.

HTML Editor

Icon Description
HTML Editor
An input field for entering HTML with preview functionality.
The designer can define the number of available lines and columns, the field's initial content, a label with a given length and position, and a variable to hold the HTML code.

Image

Icon Description
Image
An image to be displayed on the screen. The image can be selected from the ones that have been uploaded to DigitalSuite or referenced by its URL.
The designer can specify a target URL to open in a new browser tab when a user clicks the image.

JavaScript

Icon Description

or
JavaScript
A widget for executing a given JavaScript, for example, for performing arithmetical calculations or operations such as populating lists, hiding or showing fields, or setting specific values.
In addition to the JavaScript itself, the designer can define variables of the web interface to listen to, a variable to hold the result of the script execution, a message to display when the execution fails, and a label with a given length and position. A setting determines the script's behavior when variables to listen to are not set. The designer can also decide whether to execute the script on read-only screens, for example, after reloading the web interface following a successful validation.

Progress Bar

Icon Description
Progress Bar
A widget to monitor the progress of a process request. The process request is represented as a series of numbered steps, which by default correspond to the screens of the web interface. At the web interface, the steps are displayed as active or inactive, depending on the state of the process request.
The designer can configure additional or different steps in the progress bar in an array of JSON objects. In this case, a variable holding the current status of the progress bar needs to be defined and routed through the process as the steps are completed.

Static Text

Icon Description
Static Text
Static text displayed at the web interface. This can be a text specified in the design and/or the value of one or more variables defined in the web interface itself (e.g. Dear [[name1]]) or in the related process (e.g. Dear ${name2};). On the launch screen, only the P_initiator, P_user, and P_connected_user process variables can be used.
The static text can be interpreted as plain text or converted into a URL. It can be updated each time the value of one or more given variables changes.

Switch (WIRE only)

Icon Description
Switch (available only with WIRE rendering engine)
A switch which can be on or off.
The designer can specify the value returned by the widget in each case, for example, true and false, as well as a variable to hold the value.

Upload

Icon Description
Upload
A widget allowing users to upload one or more files to DigitalSuite and display them in a list, where they can be accessed, downloaded, and deleted again. Within an array, only one file can be added to the widget in each row; when uploading a second file, the previous one is replaced in the widget, but kept in DigitalSuite.
Uploaded files are added to the list of non-versioned files of the project to which the web interface belongs. Files to be uploaded must not be empty or larger than 25 MB.
The designer can define the allowed extensions of the files to upload, a label with a given length and position, and a variable to hold the references to the uploaded files. The variable value is a JSON array with elements built as follows:
[{"name":"<file_name>","id":"<file_id>","url":"<file_url>","widget_id":"<widget_id>"},...]

Custom Widgets

Custom widgets are reusable web interfaces, which designers can create as required to group elements that are often used together, for example, a number of input fields to describe a customer or menus to be applied to several web pages of an application. Custom widgets can be added to a web interface in the same way as other widgets.

Custom widgets have the following settings:

  • Variable: A variable to denote the custom widget as a whole. Each variable within the custom widget can then be accessed using global_widget_variable.variable_within_widget.
  • Conditional loading: A setting defining that the custom widget is to be loaded only if a specific condition is fulfilled, for example, the user clicks a button in the web interface. The condition is provided by a JavaScript.
Custom Widget