Form designer
Category: Designer tools
Version: 1.0
Last Updated: July 9, 2026
Author: Any2Info
Description
The Forms Designer provides a visual interface for creating, editing, and organizing form definitions within the platform.
The designer consists of multiple integrated areas that work together to simplify form definition configuration and layout management:
Menu
Form Definitions
Toolbox
Structure
Toolstrip
Interactive Designer
Editing Menu
The designer allows users to visually position fields, configure their properties, organize definitions into folders, and manage definition layouts interactively.
Form definitions support multiple layouts, allowing definitions to adapt to different screen sizes and display types.
Menu
The Menu is located on the left side of the designer and contains multiple tabs used for definition management, layout selection, and field selection.
Form Definitions
The Form Definitions tab shows all saved form definition objects available to the user.
Features include:
Viewing all existing form definitions
Organizing form definitions using folder structures
Creating new form definitions
Selecting existing form definitions for editing
Moving form definitions between folders
Creating new folders for organization
This section is intended for form definition management and navigation.
Layout Selection
Besides form definitions, this section also shows all layouts belonging to the currently active form definition.
Features include:
Viewing available layouts
Selecting layouts for editing
Switching between layouts
Managing layout-specific form definition arrangements
When a layout is selected:
The Interactive Designer updates to display the selected layout
The Structure tab reflects the fields available in the layout
The Editing Menu updates to display layout-specific settings
Toolbox
The Toolbox tab displays all available fields that can be added to the form definition.
Features include:
Displaying all available form fields
Grouping fields into categories
Selecting fields for placement inside the designer
Information and configuration details for individual fields can be found in their dedicated documentation.
Typical field categories include:
Input fields
Tables
Layout containers
Calculation fields
Selection and filter fields
Layout Editing Behavior
When editing a non-root layout, the Toolbox changes behavior.
Instead of displaying all available fields, it shows a summarized list of the fields available in the root layout.
This allows fields defined in the root layout to be reused in the currently active layout.
This behavior provides the following benefits:
Layouts reuse fields from the root layout
Fields remain consistent across layouts
Layout-specific arrangements can be created efficiently
Structure
The Structure tab provides a hierarchical overview of the active form layout and all fields it contains.
Features include:
Viewing all fields in a structured hierarchy
Quickly locating specific fields
Selecting fields directly from the tree
Activating fields inside the designer
Searching fields using:
Field name
Field ID
Additional indicators shown in the structure tree:
Lightning icon
The field contains one or more configured events or actions
Link icon
The field is linked to another field
Additional functionality:
Fields can be temporarily hidden
Useful when hiding groups of fields while working on complex layouts
The Structure tab works together with the Interactive Designer:
Structure Tab
Logical and searchable overview
Interactive Designer
Visual form layout representation
Toolstrip
The Toolstrip is positioned above the designer and provides quick access to the primary designer views and configuration areas.
Selecting an icon opens the corresponding designer section, allowing users to quickly switch between editing different aspects of a form definition.
Interactive Designer
The Interactive Designer displays a visual representation of the active form layout and all fields placed on it.
Features include:
Visual placement of fields
Displaying field positions within the form layout
Highlighting the currently selected field
Allowing direct interaction with form elements
The designer represents the actual form layout inside a rectangular design workspace.
Additional functionality:
Clicking a field automatically activates property editing
Selected fields are visually highlighted
The designer synchronizes with the Structure tab
Changes made inside the designer are reflected immediately
The Interactive Designer and Structure tab complement each other:
Structure Tab
Logical and searchable overview
Interactive Designer
Visual form layout representation
Editing Menu
The Editing Menu contains all configurable properties for the currently selected form definition, layout, container, or field.
The available configuration sections are context-sensitive and change based on the selected object.
Overview
Displays general information and metadata for the selected form definition or field
Layout
Configures the layout and positioning of the selected definition
Properties
Configures the general properties of the selected definition or field
Messaging
Configures user-facing messages and notifications
Events
Configures events and the actions they trigger
Action Flow
Configures action flow behavior and execution
Parameters
Configures parameters used by the selected definition
Plugins
Configures available plugins and extensions
Layout
The Layout section is only applicable to form definitions.
This section contains properties related to the currently selected form definition layout. These settings control the arrangement and positioning of fields displayed in the Interactive Designer.
Properties
The Properties section displays all editable properties for the currently active definition or selected field.
Important notes:
The available properties depend on the selected field or form definition
Each field exposes its own configurable settings
Definition-level properties differ from field-level properties
For detailed information about the available properties for each field, refer to the individual field documentation.
Messaging
The Messaging section contains configuration related to messages shown for the active definition or field.
Typical usage includes:
Success messages
Error messages
Warning messages
Status notifications
These messages are typically displayed when:
An action succeeds
An action fails
A process changes state
Validation errors occur
Events
The Events section displays all available events for the active definition or selected field.
Features include:
Viewing supported events
Adding actions to events
Configuring event behavior
Managing multiple actions per event
Each event can contain multiple configured actions.
Typical events include:
Click events
Load events
Change events
Action Flow
The Action Flow section is only applicable to form definitions.
This section allows the creation and editing of action flows.
Action flows are used to configure form definition logic and action execution behavior.
For more information, see the Action Flow Designer documentation.
Parameters
The Parameters section is only applicable to form definitions.
This section contains two types of parameter objects:
Incoming filters
Fixed filters
These parameters are used to configure filtering behavior and parameterized interactions within the form definition.
For more information, see the dedicated Parameters documentation.
Plugins
The Plugins section is only applicable to form definitions.
This section displays all plugins currently enabled for the form definition.
Plugins extend form definition functionality with additional integrations, behaviors, or custom features.
Features include:
Viewing enabled plugins
Configuring plugin settings
Enabling or disabling plugins
Viewing plugin-specific configuration
For more information, see the Tools > Plugins documentation.
Form Layouts
Form layouts allow a form definition to support multiple screen sizes and alternative field arrangements.
A form definition consists of a rectangular design area containing positioned fields. A layout represents an alternative arrangement of those fields, allowing the same definition to be optimized for different display sizes or device types.
Layouts can be used to optimize forms for:
Desktop screens
Tablets
Mobile devices
Embedded displays
Custom screen resolutions
Layout Behavior
A layout is an alternative arrangement of the root form definition. It reuses the same field definitions while allowing their placement and presentation to be optimized for a specific screen size or device.
Characteristics of a layout include:
Reuses the same field definitions as the root layout
Can contain any field from the root layout
Does not need to contain every field from the root layout
Allows fields to be positioned and resized independently
Supports device- and screen-specific optimization
This enables a single form definition to present different arrangements depending on the available screen space.
Root Layout
The Root Layout is the primary layout of a form definition and serves as the source for all additional layouts.
As a best practice, the root layout should contain all fields required by the form definition. Additional layouts can then reuse and rearrange these fields for specific screen sizes.
Typical layout structure:
Root Layout
Desktop or full-size version
Tablet Layout
Medium-sized screens
Mobile Layout
Compact mobile version
Layout Sizing
Layout sizing can be configured through the Properties section of the Editing Menu while a layout is selected.
Sizing properties determine when a layout becomes active based on the available screen width.
General
The General section contains layout-specific sizing properties.
Width Bound
Maximum supported screen width for the layout
These properties determine:
Which layout becomes active
Which screen sizes match the layout
Responsive layout behavior
Page
The Page section contains properties that define the dimensions of the form layout's design area.
These properties determine:
The width of the Interactive Designer workspace
The available area for positioning fields
The visual width of the layout during editing
The configured page size represents the editable canvas on which fields are placed and arranged.
In addition to page dimensions, this section also contains layout-specific styling properties and the Overview configuration. These settings allow each layout to define its own appearance and determine which overview fields are displayed for the active layout.
Layout Design Strategy
The following workflow is recommended when creating form layouts:
Create the root layout.
Add all required fields to the root layout.
Configure and validate the desktop or full-size version.
Create additional layouts for smaller screen sizes or device types.
Reposition and resize fields as needed for each layout.
Remove fields that are not required in smaller layouts while reusing the remaining fields from the root layout.
Best Practices
Use the root layout as the complete version of the form definition.
Reuse fields from the root layout instead of creating duplicates.
Optimize additional layouts for readability and usability on their target screen sizes.
Keep field ordering consistent across layouts where possible to provide a familiar user experience.
Last updated
Was this helpful?