1. index
2. DigitalSuite Studio
3. Build
4. WebModeler
5. Using the WebModeler

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
			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.
			Cancels all changes made to the web interface since you last saved it.
			Retrieves the web interface as it is currently stored on the DigitalSuite server.
			Open the settings pane to manage the web interface's settings and configure any API listeners.
			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.
			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
			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.
			Allows you to add another screen, the new screen will be a copy of the current screen.
			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.

Number	Description
	Click a category of widgets to browse (simple, container, images, etc.).
	Enter the name or a keyword for a widget to find it quickly.
	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.
	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.
	When hovering over a widget located on your screen, you are offered a range of actions, e.g. viewing the widget's settings.
	Displays a page for designing a menu to be added to your web interface/application.
	Displays the settings of a selected widget. Help on each setting is displayed when the settings pane is expanded.
	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.
	Displays WebModeler overview information.
	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.

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

Number	Description
	This section contains an index for the current settings category. Use this for quick access to the setting you want.
	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.
	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.
	Manage any collections to be used by the web interface.
	Configure a listener that will trigger a composite API upon a specified event.
	Configure a listener that will trigger a connector upon a specified event.
	Configure a listener that will trigger a process upon a specified event.
	View a list of your web interface's revisions. You can color code a revision, preview a revision, or revert to a previous revision.