Web Interfaces/Design Tab

Allows you to define graphically the different screens of your web interface

General

In a web interface, you can create as many web pages as you want. Therefore a web interface allows you to group all screens (web pages) displayed to a user for a given process whether a screen is used to launch a process or used within a manual task.
A widget is a component of a web interface (screen) : it can be, for instance, a text input or a button or an image....

designer-plus-small Add
This symbol allows you to add a widget on the designer screen. If you click on Add button located on the top left of a widget, it will add a new widget over the current one. If you click on Add button located on the bottom left of a widget, it will add a new widget under the current one. If you click on Add button located on the middle right of a widget, it will add a new widget on the right of the current one.

designer-minus-small Delete
This symbol allows you to delete a widget on the designer screen.

designer-split-small Split a widget
This symbol allows you to split a widget into two widgets (ie. build an HTML table or a grid). This symbol only appears if your widget has no type defined. Grid are very usefull for widgets' alignment

resizeh resizev Resize
This symbol allows you to resize a widget on the designer screen.
Horizontal resizing will impact the % size of the widget on the web interface.
Vertical resizing will not have any effect on the web interface whatever the widget.

Screen Zone

A "Screen" is a web page : each Screen of a web interface is displayed in the same design tab according to the "Current screen" selection.
In a given Screen, you will find all widgets defined for a web interface (ie. all widgets of all screens) but according to the state of each widget (see Rules Tab), they will be "Available" or/and "Active" or/and "Visible" or not.. This allows you to quickly design web interface where in each step you want to see previous informations and add new ones.

Current screen
Screen (web page) displayed in "Design" Tab

add Add
This symbol allows you to add a new screen (web page) to your web interface. Click on "Add" button, enter the name of the new screen and click on "Add a new screen" button.

remove Delete
This symbol allows you to delete the current screen of your web interface

Launch screen
"Launch screen" value can't be modified: it is set to "Yes" for the "Launch" screen (web page to launch a process : first screen of your web interface) if you have chosen "Launchable web interface", otherwise it is set to "No".

Rename to
Allows you to rename your current screen : modify text input and click on "Refresh" icon.

Show all
Allows you to display all widgets in Design Tab of current screen even if there are not "available" for the current screen.

All available
Allows you to set all widgets state of current screen to "Available" (see Rules Tab).

All active
Allows you to set all widgets state of current screen to "Active" (see Rules Tab).

Allows you to define the type of a widget (type of component defined by this widget): text input or button or image.
To define or modify a widget type, click on the widget of the "designer screen" and then select the Type of component you want for this widget in the toolbar "Widget Type".
In this toolbar, you will also find copy/paste function : to duplicate a widget, copy the original widget with copy button, create a new one thanks to designer-plus-small symbol, select this new widget and then click on action_paste button.

Properties Tab

According to the type of widget you have choosen, this tab allows you to define characteristics of your widget.

Layout Tab

Borders
Allows you to define borders on a selected widget. These borders will only be visible on your web page (when you launch your web interface) and not on your current RunMyProcess' design screen. Borders don't work in some versions of Internet Explorer.

Text direction
Allows you to define text direction "Default", "Left to right" or "Right to left" according to your language. It will override web interface "Text direction" choice of Implementation Tab if "Default" is not chosen.

CSS class suffix
Allows you to add a suffix to our standard widget style so as to use different styles for the same widget type : if you enter "mybutton" on a widget button, you will have to define in your stylesheet a property for ".gwt-Button-mybutton".

Rules Tab

Allows you to define state's rule (available/unavailable, active/inactive, visible/invisible) and validation or required rules for a widget without using Javascript functions

A widget can be "Available" or not (unavailable) for a given screen : for instance, a widget that should not be available in a web page.

No rule can be defined for "Availability" property.

A widget can be "Active" or not (disabled) for a given screen : for instance, an input text that can't be modified.
A widget can be "Visible" or not (invisible) for a given screen : for instance, a Javascript field that you don't want to display to the user.
An "input" widget can be "Valid" or not according to a condition : for instance, start_date > end_date.
An "input" widget can be "Required" or not according to a condition : for instance, if choice is negative, this field is mandatory.

Rules for "Active", "Visible", "Valid" or "Required" should be entered like this : "[[myvar1]]"== "present" && [[myvar2]] != 1 where "myvar1" and "myvar2" are variables of widgets of your web page. If condition is met (result of script is a true boolean), field will be visible (or active or valid or required).

All variables of a web page are considered as "string" except "Date and number input"

If you define rules, they will be common to all screens of a given web interface whereas if no rule is defined, you can define on each screen which widget will be available/visible/active/required or not.