×

Please give details of the problem

Docs

Find

Widget Types

This document provides an overview of all widget types available for designing web interfaces.

To view the widgets available to you within the WebModeler, choose the Widgets tab on the left hand pane.

Widgets are organized by category, which you can choose from the scrollable options bar at the top of the pane. Once you have chosen a category, the widgets that belong to that category are displayed below.

You will notice that some widgets have a triangle in the bottom right-hand corner of their icon; this indicates that there is more than one type of this widget available. For example, there is more than one type of button available. Click on the widget to see the range of options available to you.

Simple Widgets

Input Widgets

Input widgets are used for providing fields on a screen where the user can enter text, numbers, a URL, or choose from a list of predefined values.

Icon Description
Text Input
Allows you to add a field in which the user can enter free text.
Password
Allows you to add a field in which the user can enter a password.
Date Input
Allows you to add a field in which the user can enter a date.
Email Address Input
Allows you to add a field in which the user can enter an email address.
Number Input
Allows you to add a field in which the user can enter a numeric value.
URL Input
Allows you to add a field in which the user can enter a URL.
Switch
Allows you to add a switch which can be true (when selected) or false (when deselected).
Static Text Input
Allows you to define static text. In the Text field, enter either static text or use variables. Variables can either be defined in your process, e.g. Dear ${name1}; or they can be defined in your web interface, e.g. Dear [[name2]]. Dynamic text generated for a process variable is only possible for screens requiring a manual task. For a launch screen, no process variables apart from P_initiator, P_user and P_connected_user can be defined.
Autocomplete Input
Enables users to quickly find and select an item from a pre-populated list as they are typing. The list is constructed from a DigitalSuite collection.

Buttons

Button widgets allow you to add a button to start a process, to validate/cancel a manual task, to execute JavaScript code, to save the current web page without interacting with the process, or to log in/out from DigitalSuite.

There is more than one type of button available, this is indicated by the triangle at the bottom right-hand corner. Click on the icon to see all types available.

Icon Description
Submit
Allows a user to start a given process on a launch screen.
Execute Script
Allows a user to execute JavaScript code.
Save as Draft
Allows a user to save the current web page with data filled by the user without launching a process or validating a manual task. The web page with the saved data is then available in web interface reports.
Cancel
Allows a user to abort a given process.
Login
Allows a user to log in to DigitalSuite. This option is only relevant for public web interfaces. Your screen must contain a P_login variable which holds the DigitalSuite user name for logging in, P_password which holds the DigitalSuite password, and P_target which contains the URL the user is to be redirected to after successfully logging in.
Logout
Allows a user to log out from DigitalSuite.
Take
Allows a user to assign the manual task to the connected user.
Release
Allows a user to assign the manual task to the assigned lane instead of to the user.
Assign To
Allows a user to assign the manual task to a user of the assigned role.

Indicators

Indicator widgets are used to provide the user with a progress gauge. You can choose between various types of indicators by clicking on the widget icon.

Icon Description
Indicator
Bar
Clock
Bar Circle
Snake
Circle
Square
Small
Blue

Dynamic Lists

Icon Description
Dynamic List
Allows you to define a list filled with dynamically generated values.
Dynamic Checkbox List
Allows you to define a list of checkboxes to be displayed on a web page according to a dynamically generated list of values.
Dynamic Radio Buttons
Allows you to define a list of radio buttons to be displayed on a web page according to a dynamically generated list of values.

User Selector Widgets

User Selector widgets enable you to present users with a choice of users from a specified entity. They can be configured as a picker that provides suggestions while a user is typing into a field. To configure a widget, you need to add a Value variable and a Label variable, and you can specify the property that is used to filter fetched data when the user starts typing.

Icon Description
User Selector
A user can select another user from a list box.
Checkboxes List
A user can select another user by enabling one or several checkboxes.
Radio Buttons
A user can select another user by using radio buttons.

Role Selector Widgets

The list widget of type "Roles" (Lanes) can be configured as a picker that provides suggestions while the user is typing into the field. This widget lets the users quickly find and select an item from a large list of users, for example.

Icon Description
Role Selector
A user can select another user by his role from a list box.
Checkboxes List
A user can select another user by his role by enabling one or several checkboxes.
Radio Buttons
A user can select another user by his role by using radio buttons.

Report and File Lists

Icon Description
Web Interface Report List
Allows the user to execute a web interface report which provides information from the application. A list of existing web interface reports is displayed along with the projects they belong to. Clicking on a report results in the execution of the report - a list of launched web interfaces (i.e. web interfaces used to launch a process or used within manual tasks of a launched process) that meet the criteria of the report in their current state are displayed.
Process Report List
Allows the user to execute a process report which provides a visual representation of a process execution. A list of reports defined in your web interface project (or a project included in your project) is displayed to the user.
Uploaded Files List
A list of files that have been uploaded to the DigitalSuite server is displayed to the user. The user can download the files from here.

Reports

A Report widget can be used when your application requires users to interact with large amounts of data, and you want to load it in small chunks, filtered and/or paginated to keep the web pages lightweight and fast loading.

Three types of data sources are supported: Collection Report, Web Interface Report, and Process Report.

The Custom Report allows for further customization: you can load the widget with your own data, and provide the same user experience (i.e. filters, pagination, and sort).

Icon Description
Collection Report
Allows you to present a collection to the end user on a web interface.
Web Interface Report
Allows you to present a web interface report to the end user on a web interface.
Process Report
Allows you to present a process report to the end user on a web interface.
Custom Report
Allows you to present a custom source of data (JavaScript report) to the end user on a web interface.

Trees

Icon Description
Tree Collection
Allows you to present a tree structure of data from a collection to the end user. You can also offer the possibility of querying the collection data. A query takes the format : {"lastname":"Smith"}; the result of this would only show records where the lastname is "Smith".
Tree URL (Custom)
Allows you to present a tree structure of data from a website specified by its URL to the end user.
Tree JavaScript
Allows you to present a tree structure of data from a JavaScript source to the end user.

Other Simple Widgets

Icon Description
HTML
Allows you to add your own HTML code for your web page hosted by DigitalSuite.
HTML Editor
Allows you to define an HTML input field with preview functionality.
Empty
Allows you to add white space to a web page.
Attachment
Allows you to upload a file to the DigitalSuite server.
JavaScript
Allows you to define a scripting widget for performing arithmetical calculations on fields of a web page (e.g. a+b) or to run JavaScript code with DigitalSuite JavaScript functions (for example, dynamically hide/show fields on a web page, dynamically set the value of a field, etc.).
Captcha
Allows you to add a captcha to your web page, for example to avoid spam on a public web interface. A captcha is mandatory for public web interfaces.
Geolocation
Allows you to add a geolocation function to your application.
Application History
Allows you to define a Section widget (see section 2 below) that will automatically track actions performed by users for a given, launched process. For example: Created by John Doe on 10/10/2018 10:10:10 , Screen "x" Validated by Johnny on 10/11/2018 11:20:30 .... In addition, you can add user comments and make the values of variables persistent.
Progress Bar
Allows you to manage the progress of a request. The request is split into ordered steps which are displayed, activated, or deactivated according to the status of the request.

Container Widgets

Container widgets group together a collection of other widgets. The collection of widgets can be outlined by a border of any color on any side.

Icon Description
Container
Allows you to create a separate area on the web interface that contains other widgets.
Array
Allows you to provide a table structure. Other widgets can be used within the table elements. Columns are added by dragging supported widgets onto the array widget. JavaScript can be used for input validation and to perform functions on the input data.
Section
Allows you to define a group of fields that can be collapsed with clicking on the section header. In a section, you can add any widget (for example, an image, HTML, or text input).
Tabs
Allows you to define separate tabs for your web interface.

Custom Widgets

Icon Description
Custom Widgets
Allows you to choose an existing custom widget for your new web interface. A custom widget is a customized widget or group of widgets that you can reuse within any web interface.

Images

Icon Description
Image
Allows you to choose an image that has already been uploaded to DigitalSuite to be displayed on your web page.

Custom Lists

Icon Description
Custom Lists
Allows you to choose an existing custom list to be added to your web interface. The list can be presented to the user as a drop down menu, as checkboxes, or as radio buttons.