×

Please give details of the problem

Docs

Find

WebModeler Concepts

The DigitalSuite Studio WebModeler is a tool that allows you to design user interfaces for your applications. These web interfaces provide a device-independent way for end users to interact with your application - on a PC, tablet, or mobile.

In a web interface, you can define a web page to launch a process, and several additional web pages to be used within manual tasks. The web interface allows you to group the pages displayed to the users of a given process. A web interface can contain as many web pages as required.

There is a special type of web interface, the alias web interface. Alias web interfaces are required for the internal DigitalSuite administration applications. These include, for example, User Management, Logs Application, or App Translator. Screens and widgets of alias web interfaces cannot be modified.

Screens

A web page is called a screen in the WebModeler.

A web interface can have several screens. The screens correspond to different groups of users and steps of the process. For example, an employee may use the first screen to make a request, which launches a process. A manager may need to use the second screen to approve the request. When designing your process, you can assign a process step to its corresponding screen in a web interface. The first screen is always the launch screen at the beginning of the process.

When you add a new screen to a web interface, it will be a copy of the final screen and will include the same design elements. When you add widgets, these will be added to all screens. While the design of each screen is therefore the same, each screen can be customized by specifying the visibility properties of the screen elements (widgets). This means that although each screen will contain the same widgets, the widgets will not necessarily be visible on each screen at runtime. You can turn on visibility mode within the WebModeler to see which widgets are visible on the current screen. Managing screens in this way makes it possible to share elements and variables of the process without having to re-create everything multiple times.

Screens can be re-ordered to reflect their order in the process by using drag-and-drop.

Widgets

A widget is a component of a screen. A few examples of widgets are:

  • an input field,
  • a button,
  • an image.

As a developer, you use the widgets to quickly design user interfaces using drag-and-drop. For each widget, you can define whether or not it is visible on each screen, i.e. on each web page displayed to the end user during process execution. Similarly, you can specify whether each widget is active on each screen. A widget that is not active is essentially disabled on the screen, for example a text input widget where the content is read-only.

Please refer to our widget types document for further information on the available widgets.

Widget settings are categorized, allowing quick access to the setting you want to configure. A category can be chosen from the button bar that appears when hovering over a widget. To view all the settings for a widget, choose the Global option, this will open the settings pane. Help on each setting is displayed when the settings pane is expanded.

Custom Widgets

A custom widget is essentially a reusable web interface. This feature allows you to design a web interface you may want to use regularly and utilize it as you would a standard widget in other web interfaces.

Custom widgets can be found in the Custom category of widgets within the WebModeler and dragged onto the design area like all other widgets.

API Listeners

You can configure listeners in the WebModeler that will trigger actions elsewhere in the platform when certain events arise. For example, you can set a listener that will retrieve data based on a variable entered in the web interface. The actions that can be triggered are:

  • Launching a composite API
  • Launching a process
  • Calling a connector

The listener can be configured from the Settings pane within the WebModeler.

All web interface variables are sent to the launched listener, web interface designers need to ensure that all parameters required by the listener are present as web interface variables in the web interface and that they match what is expected by the listener.

You can write scripts that will execute at various points of listener execution, for example upon completion.

It is worth considering the performance of the three types of listeners as they are not equivalent:

  • Connectors and composite APIs are executed synchronously and their execution paths are not persisted which makes their execution much more efficient.
  • Processes are executed asynchronously, the result of their execution is polled regularly from the web interface. In addition, their execution path is persisted.

Consequently, using a composite API will always yield better performance results when triggered by a listener in a web interface. However, you may need to use a process as a listener. In this case and if you need to use more than one, you should consider regrouping the execution of your process listeners by triggering one "screen initialized" process listener with subprocesses.

Web Interface Availability

Access to a web interface can be set to public or private within the WebModeler. Public web interfaces can be opened without any authentication while you need to be authenticated to open private web interfaces.

DigitalSuite provides a default homepage for applications. This presents users with a list of web interfaces that are accessible to them, depending on their access rights to the project the web interface belongs to. Only production versions of applications are available from the homepage.

The homepage is customizable and can be replaced by your own homepage if preferred.

Applications appear in sections on the default homepage. The placement of an application in a section is determined by the tags assigned to the web interface in the WebModeler. Tags can be assigned to a web interface on the Settings pane.

If an existing section name is used as a tag for a web interface, the application will be placed in that section of the homepage. If a new tag is created, then a new section is created with the new tag as its title. Multiple tags can be applied to a web interface, in which case the web interface appears in several sections. If no tag is assigned, the web interface appears in a default section of the homepage, named "Applications".

Application tags can be retrieved by using the Freemarker method get_applications. This method will return a JSON object representing a list of user interfaces, grouped by tag.

Applications can be configured not to be published to the homepage or to be published depending on the device being used by the user - desktop, mobile or tablet. This is configured on the Settings pane of the WebModeler.