The Form Builder is the privileged IDE for Beautiful WebForms. On the first load of an empty view, the Form Builder will initialize it with a default input widget for every field in the form template. The view will then be available for further editing.

Layout¶

The IDE is composed of a set of areas and controls, with different purposes.

• The Main Working Area shows a preview of the current form view, with the available input fields

• The Widget Library (on the left) features a set of predefined widgets, which can be easily dragged and dropped in the working area

• The Widget Configurator panel (on the right) is linked to the widget currently selected in the main working area

AI-Based Form Builder¶

The AI-Based Form Builder is an experimental feature that enables designers to create forms using natural language prompts. Instead of manually dragging and dropping widgets, you can simply describe the form requirements, and C.A.R.L. (the AI assistant) will automatically generate the form for you.

How It Works¶

The AI-Based Form Builder uses an agentic workflow architecture that processes your requests through a sophisticated multi-agent system:

1. Coordinator Agent: When you submit a request, a coordinator agent first analyzes it and creates an execution plan. This plan determines what needs to be done to satisfy your requirements, including:
2. Identifying which form fields need to be created (if "Allow Creating New Fields" is enabled)
3. Determining which widgets are most appropriate for each field

4. Organizing the form layout and structure

5. Widget Agents: Once the plan is determined, specialized widget agents work in parallel to configure each widget according to the coordinator's plan. Each widget agent is dedicated to a specific widget type and handles its configuration independently.

Key Features¶

• Natural Language Form Creation: Simply describe what you want in the form, and the AI will create it automatically
• UI Guidelines Support: You can provide UI guidelines to guide the AI's design decisions, ensuring the generated forms match your design standards
• Agent Configuration: Fine-tune the AI's behavior through a dedicated configuration panel that allows you to adjust various agent parameters

Allow Creating New Fields¶

The "Allow Creating New Fields" feature controls whether the AI can modify the form template structure:

• Enabled: The AI can automatically create any fields required for the form based on your description. This gives maximum flexibility and allows the AI to build complete forms from scratch.
• Disabled: The AI will only work with existing form template fields and won't modify the template structure. Use this mode when you want to preserve the existing field structure and only modify widget configurations.

Single Widget Configuration¶

In addition to creating entire forms, you can also use the AI feature to configure individual widgets. When you select a specific widget and interact with C.A.R.L., the AI will focus solely on that widget's configuration without modifying the rest of the view. This allows you to:

• Refine individual widget settings using natural language
• Get AI assistance for specific widget properties
• Make targeted improvements without affecting other form elements

Context Support¶

The AI-Based Form Builder supports adding files and images to the context, enabling the AI to:

• Understand visual requirements from reference images
• Process documentation or specifications provided as files
• Generate forms that match design mockups or examples

This context-aware capability allows for more accurate form generation based on visual and textual references.

Developer Guide: Editor Overview¶

Main Area Functionality¶

The Main Area of our software offers two distinct editing modes:

1. Smart Editor:

   • A WYSIWYG (What You See Is What You Get) drag-and-drop editor.
   • Enables form creation without writing any code.
   • Ideal for quick and intuitive design.

2. Source Code Editor:

   • A text-based editor for modifying Velocity code automatically generated by the Smart Editor.
   • Offers detailed control over the form's code.

By default, the Smart Editor is active.

To switch to the Source Code Editor, use the Source button located in the Developer tab.

Editor Exclusivity¶

• The Smart Editor and Source Code Editor are mutually exclusive; both cannot be active simultaneously.
• Any changes made in the Source Code Editor are not preserved if the form is later modified in the Smart Editor.

1

 The Source Code Editor provides a notification when switching back to the Smart Editor to remind you of potential loss of changes.

1
2
3
4
5

We recommend avoiding modifications directly in the Source Code Editor. Instead, consider these options for customization:

- **Custom HTML Widget**: Allows for specific HTML element customization.
- **Creating a New Widget**: Design your own widget for unique functionality.
- **Modifying an Existing Widget**: Adjust existing widgets to suit your needs.

Shortcuts¶

The following keyboard shortcuts are available while using the editor:

Top Bar controls (DESIGNER)¶

Command	Description
Versions
	Save the view (adds a new version)
	Open the object’s Versions tab
	Close the FormBuilder
Libary
	Selects the widgets’ library to use for creating the view
	Configures the number of columns in the view layout. In order to take effect, requires to save the view & reload the editor window
View template
	The View’s template associated with the form can be selected with the dropdown menu, or, as an alternative, selecting a suitable document from Content Server.
View
	Switch the whole view between Read Only and Editable mode (affects the way input widgets are rendered)
	Switch the whole view between Read Only and Editable mode (affects the way input widgets are rendered)
	Clear the entire working area
Widget
	Reposition the widget, moving it one step up/down in the form
	Pick Up the widget (to drop it elsewhere in view)
	Duplicate the selected widget
	Remove the widget from the form
	Open the widget’s Configuration Panel
	Toggle the visibility of widgets that are not rendered in the final view (e.g. scripts)
Selection
	Increase/decrease the size of the widget’s label (if available). This option affects the number of columns spanned horizontally by the label.
	Increase/decrease the size of the widget. This option affects the number of columns spanned horizontally by the whole widget (including the label, if present).
	Change of the widget's position. This option affects the number of columns spanned horizontally by the whole widget (including the label, if present).
Help
	Access the module’s online guide and the support portal
Validation
	Red label: The view failed the validation and most likely will fail to compile
	Green label: The view is well-formed

Top Bar controls (DEVELOPER)¶

Command	Description
Versions
	Save the view (adds a new version)
	Open the object’s Versions tab
	Close the FormBuilder
Source code
	Opens the view's source code editor
	Downloads the view's current model to be used for creating a new widget
	Downloads the view's localization file
	Reloads all the available localization files
Scripts
	Opens the On-load CLEH Content Script Editor
	Opens the Pre-submit CLEH Content Script Editor
	Opens the On-submit CLEH Content Script Editor
Validation
	Red label: The view failed the validation and most likely will fail to compile
	Green label: The view is well-formed