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

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.

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