Please give details of the problem

Skip to content

Using the WebModeler

This document provides an overview of the WebModeler user interface along with best practice for getting started.

The WebModeler's design interface is divided into three tabs - Interface, Screens, and Widgets. A web interface is configured using the Settings pane.

Interface Tab

When you first open the WebModeler, the Interface tab is open by default. Here you can define high-level settings for your web interface, for example a name, a description, or an icon.

The left-hand pane looks like this:


Number Description
Number1 Saves the changes you make to the web interface. Only after clicking this icon are you able to preview the current implementation of your web interface.
Number2 Cancels all changes made to the web interface since you last saved it.
Number3 Retrieves the web interface as it is currently stored on the DigitalSuite server.
Number4 Opens the Settings pane to manage the web interface's settings and configure any API listeners.
Number5 Switch on Launchable, if a process is to be started by the web interface. Clicking in the field opens a dialog where you can select the process. If you choose a process from another project, this project will be added as a subproject to your current project, unless this has already been done before.
Number6 Click the link icon to open a dialog for selecting an image to be used as the thumbnail for the web interface on a homepage or as its favicon, respectively. The image must have been uploaded to DigitalSuite before.
Number7 Displays the web interface's unique ID, which is generated automatically.

Screens Tab

When the Screens tab is open, the left-hand pane looks like this:


Number Description
Number1 Enter a name for your screen. The first screen is usually the launch screen and its ID is 0. Please note that you can re-order the screens to reflect their order in the process by using drag-and-drop on their names.
Number2 Allows you to add another screen, the new screen will be a copy of the current screen.
Number3 Deletes the current screen.

Widgets Tab

The Widgets tab offers a range of widgets that you can use to design your web interface. The widgets are organized by categories. To use a specific widget, drag and drop it onto the stage in the right-hand pane. Find more information about each widget in our Widget Types document.


Number Description
Number1 Click a category of widgets to browse (simple, container, images, etc.).
Number2 Enter the name or a keyword for a widget to find it quickly.
Number3 Here you can browse the icons of all widgets that belong to the currently chosen category (in the example, the category is Simple Widgets). Choosing a different category can be done at point 1. Use drag and drop to add a widget to your screen.
Number4 When clicking a widget with a small triangle at the bottom right-hand corner, a list of widgets of the same type is displayed. Hovering over an icon displays the name of the respective widget.
Number5 When hovering over a widget located on your screen, you are offered a button bar with a range of actions, e.g. viewing the widget's settings. The settings are categorized for quick access. To view all the settings for a widget, choose the Global option, which will open the Settings pane. Help on each setting is available when you expand the Settings pane.
Number6 Allows you to design a menu bar, which will be displayed in the header of the web interface, as well as to define header settings such as a title or task basket.
Number7 Displays the settings of a selected widget. Help on each setting is available when you expand the Settings pane.
Number8 Directly accesses the Settings pane to add JavaScript to the web interface.
Number9 Allows you to view which widgets are visible on the current screen.
Number10 Starts a preview to see how the web interface will look like when deployed.
Number11 Opens the process launched by the web interface in the ProcessModeler.
Number12 Launches the web interface in Test mode.
Number13 Displays WebModeler overview information.
Number14 Expands the stage to full-screen mode.

Settings Pane

Web interfaces are configured from the Settings pane; it is accessed by clicking Settings on the button bar on the left pane.

Button Bar

In addition to web interface settings, the pane can be used to manage other resources that your web interface may make use of.

Settings Pane

Number Description
Number1 This section contains an index for the current settings category. Use this for quick access to the setting you want.
Number2 From here you can manage the web interface's basic settings, view its history, choose its device availability and manage advanced settings such as using Google Analytics.
Number3 Add JavaScript for the web interface.
Number4 Specify layout options and manage the stylesheets to be applied to the web interface.
Number5 Manage any collections to be used by the web interface.
Number6 Configure a listener that will trigger a composite API upon a specified event.
Number7 Configure a listener that will trigger a connector upon a specified event.
Number8 Configure a listener that will trigger a process upon a specified event.
Number9 View a list of your web interface's revisions. You can color code a revision, preview a revision, or revert to a previous revision.