×

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 - the Interface tab, the Screens tab, and the Widgets tab. 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 INTERFACE_Tab Number1 Saves the changes you make to the web interface. Only after clicking on 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 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 can be dragged onto the stage in the right-hand pane. Find more information about each widget in our widget overview document.

Widgets

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 on 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 range of actions, e.g. viewing the widget's settings.
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 displayed when the settings pane is expanded.
Number8 Click the eye icon to view which widgets are visible on the current screen. Click the preview icon to see what the web interface will look like when deployed. Click the arrow icon to launch the web interface in Test mode.
Number9 Displays WebModeler overview information.
Number10 Expands the stage to full-screen mode.

Settings Pane

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

Button Bar

In addition to web interface settings, the settings 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 Create your own or manage the RunMyProcess stylesheet to be applied to the web interface and add JavaScript for the web interface's header and footer.
Number4 Manage any collections to be used by the web interface.
Number5 Configure a listener that will trigger a composite API upon a specified event.
Number6 Configure a listener that will trigger a connector upon a specified event.
Number7 Configure a listener that will trigger a process upon a specified event.
Number8 View a list of your web interface's revisions. You can color code a revision, preview a revision, or revert to a previous revision.