Design a form — gull system handbook

The form designer in gull system: element tree, canvas and Properties, the field palette, the grid, form properties, the Generate button and saving.

Design a form

A form is a document of its own: it is designed under Input sources, connected to configurators, and one field fills the input of the same name in each of them.

Where a form is created

• From a configurator. In step 4 Input sources → Forms click Create new form. The app asks "Create fields automatically?" — Create fields from inputs makes one field per step 2 input, Empty form makes none. The form is connected at once and the designer opens.
• On its own. In the main menu Input sources → Forms → Create new form. Connect it to a configurator later in its step 4.

The designer screen

• Element tree on the left. The root Form and under it every field, heading, button, container and steps. Tree order is drawing order.
• Canvas in the middle. The form is 480 px wide and elements snap to a 10 × 12 px grid. Drag an element to move or stretch it; width is not a number in Properties.
• Properties on the right. The selected element's properties. With nothing selected: "Click an element on the canvas and edit it here."
• Unassigned inputs. Inputs of the connected configurators no field collects yet, each with Add a field for this input.

The ribbon palette

• Group: Fields - Elements: Parameter, Text, List, Checkbox, Table - Purpose: collect an input's value; details in Field types and their properties
• Group: Static - Elements: Heading / text, Button - Purpose: captions and actions — Generate sends the order
• Group: Structure - Elements: Steps, Container - Purpose: paging and grouping; see Split a form into steps

There is no Drop-down on the palette. Insert a List and under Pick a list choose Custom options — that turns the tile list into a drop-down with comma-separated options.

Form properties (the Form root)

• Group: Variables - Row: Name, Default, Add variable - Meaning: form state that field rules read and buttons change; not part of the order
• Group: Appearance - Row: Style - Meaning: App colours, or a style from Library → Styles
• Group: Appearance - Row: Corner radius, Form margin - Meaning: in grid cells
• Group: Size - Row: Height - Meaning: Adaptive to the content, or Fixed in cells
• Group: Settings - Row: Show in CAD - Meaning: offers the form in the SOLIDWORKS panel; see Place an order from SOLIDWORKS

The button that sends the order

A form does not send an order by itself. Insert a Button with the Action Generate — in the app and on a web page it is the only thing that starts an order. The other actions (Next step, Previous step, Go to page, Set variable) are for navigation.

Saving

A form is saved with the Save button in the window header. A field with an error (minimum above maximum, a negative step) blocks saving: "The form cannot be saved yet — first fix the values marked red."