User Interface

The Form Editor interface is roughly divided into four areas:

  • The menu bar on top, just below the navigation bar

  • The palette on the left side

  • The canvas in the middle

  • The attribute bar on the right side

510 design form editor

The following sections describe each area in detail.

The menu bar offers a number of actions, some of them only affecting the currently opened model while others have a more global impact.

510 design form menu bar
Group Icon Description

Save

210 icon save

Saves the currently opened model.

210 icon save all

Saves all opened models.

Validate

210 icon validate

Validates the currently opened model.

Edit

210 icon copy

Copy the selected element.

210 icon paste

Pastes the contents of the clipboard.

210 icon cut

Cuts the currently selected element.

210 icon delete

Deletes the currently selected element.

Protocol

210 icon undo

Undoes the previous action.

210 icon redo

Redoes the most current action.

Zoom

210 icon zoom in

Zooms into the model.

210 icon zoom out

Zoom out of the model.

210 icon zoom standard

Resets the zoom level.

210 icon zoom fit

Set the zoom level to fit the size of the model.

Documentation

510 icon form preview

View run-time preview.

510 icon display gridlines

Show or hide gridlines.

210 icon comments

Shows all comments on elements.

210 icon language

Switches the language of the model.

Model

210 icon data model viewer

Opens the Data Model Viewer, see data model viewer.

210 icon compare revisions

Opens the Revision Editor, see revisions.

210 icon search attributes

Searches for an attribute value within the currently opened model.

Export

210 icon export

Exports the currently opened model, only possible if the model was saved.

Publish

210 icon publish

Publish an app, see publishing apps.

Drawing Area

A form is a graphical layout of fields that are bound to a data model to allow the data model to be displayed to the user. The fields are arranged in rows on the canvas.

510 design form drawing area rows

Each row is made up of exactly twelve slots. All slots are equal in size, so the width of a slot is one-twelfth the width of the whole form. A field can occupy exactly all slots, or it can occupy only a part of the slots. It is possible to place more than one field in a row.

510 design form drawing area slots

Not every slot needs to be occupied by a field. It is allowed that single slots of a row are empty. These empty slots can be at the beginning, in the middle, or at the end of a row.

510 design form drawing area empty

To create your forms, you can use simple drag-and-drop commands. To do so, select an element in the palette on the left side and drag it to the drawing area. The element is then part of the form.

If you click anywhere in the canvas, you can change specific attributes in the attribute panel on the right side. If you click on an element, you can change its attributes. If you click outside of an element (in the "space between"), you can change the attributes of the form itself, for instance, the outcomes.