Design

Overview

The Design tab of the Form Editor is the primary workspace for visually constructing the layout and content of a Servoy form. It provides an intuitive drag-and-drop interface for placing, organizing, and configuring components, enabling developers to build sophisticated user interfaces with ease.

The Form Editor Design tab is divided into three main sections:

• Toolbars (upper side)

• Palette (left side)

• Editor Area (main area)

Sections

Toolbars

The toolbar hosts various tools and controls to assist in form design, organized into different groups:

• Place Fields Wizard: Opens a tool for placing fields bound to data providers. See Form DataProvider Configurator.

• Highlight Web Components: Toggles visible outlines for web components to aid layout.

• Toggle Dynamic Guides: Enables guide lines for aligning and spacing components.

• Layering Controls: Move components forward or backward in z-order.

• Align Tools: Align selected components (left, right, top, bottom, center, middle) and unify widths/heights.

• Spacing Tools: Adjust spacing between multiple selected components precisely.

• Set Tab Sequence: Launches the tab sequence configurator.

• Show Inherited Elements: Toggle visibility of inherited components from parent forms.

• Visual Feedback Options: Show indicators for anchors and responsive sizing.

• Reload Designer: Refreshes the current design tab to ensure latest state.

• Show Resolved I18N Text: Displays actual internationalized text.

• Show Component Errors: Displays Angular errors for custom components, if any exist (button disabled if none).

Palette

The Palette provides a categorized list of components that can be dragged onto the form:

• Commonly Used: Frequently used components for quick access (buttons, labels, images, etc.).

• Servoy Core: Includes responsive containers for advanced layouts.

• Buttons & Text: Basic UI elements like buttons, data labels, and text labels.

• Form Containers: Layout containers (AccordionPanel, Tabs, Split Pane, etc.) for organizing complex forms.

• Grids: Data grid components for structured data.

• Input Control: Rich set of input elements like calendars, combo boxes, checkboxes.

• Mobile: Components tailored for mobile applications.

• Visualization: Data-driven components like FullCalendar2 for calendars and scheduling.

Additional components can be installed through the Servoy Package Manager.

Editor Area

The Editor Area is the primary workspace where components are placed and arranged. It features a grid background to help with alignment and positioning.

Placing Components on a Form

Simple Form Example

For straightforward forms without a responsive grid, components like buttons, labels, or text inputs are dragged directly from the Palette into the editor area and positioned manually. This method is ideal for forms that don’t require dynamic resizing.

Advanced Form Example

When using more advanced layouts (e.g. responsive grids or Flex containers), the Palette shows additional groups such as Bootstrap 12-Grid, Flex CSS, and layout templates. These tools let developers construct forms that adapt to screen sizes, offering sophisticated alignment and spacing. Here you can nest rows, columns, or flex containers to build highly responsive UIs.