×

Please give details of the problem

Docs

Find

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:

User Interface Element Number Description
INTERFACE_Tab 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 Open the Settings pane to manage the web interface's settings and configure any API listeners.
Number5 Opens a dialog for editing the process to be launched by the web interface. If you select a process from another project, it will be imported into your current project.
Number6 Opens a dialog for selecting a previously uploaded image available on the DigitalSuite platform. The image will be used as a thumbnail for the application on the homepage. Similarly, the second image icon opens a dialog for selecting an image to be used as a favicon for the application.

Screens Tab

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

User Interface Element Number Description
SCREENS_Tab 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 Displays a page for designing a menu to be added to your web interface/application.
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 for the web interface's header and footer.
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's header and footer.
Number4 Create your own or manage the RunMyProcess stylesheet 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.