Form builder

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

The Main Working area contains the two editor windows.

  • Smart Editor: allows for drag & drop, editing and configuration based on visual tools

  • Advanced Editor: allows for full control on the form view code.

By default, the Advanced Editor is locked and the Smart Editor is active. The two modes are mutually exclusive, and can't be active at the same time.

Shortcuts

The following keyboard shortcuts are available while using the editor:

Shortcut Description
Ctrl + S Save the current view (add a new version)
Ctrl + Canc Delete the selected widget(s)
Ctrl + B Clone the selected widget(s)
Shift + Left Ar. Reduce the label’s dimension for the selected widget(s)
Shift + Right Ar. Increment the label’s dimension for the selected widget(s)
Ctrl + Left Ar. Reduce the dimension for the selected widget(s)
Ctrl + Right Ar. Increment the dimension for the selected widget(s)
Ctrl + Mouse sel. Select multiple widgets
Ctrl + Space In sourcecode editor - show the code autocompletion hints
Ctrl + H In sourcecode editor - Toggle the online Help window
F11 In widget’s configuration panel – Maximize editor (full-screen mode)

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).
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

Widget Scope

To enable the Widget Scope options in the menu, simply right click on the target widget in the working area.

Columns

When switching the number of columns, save & reload the page editor to force reload of all widgets in the working area

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
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

Editing source code

View's versions created editing directly the source-code editor can't be further modified with the FormBuilder's smart-editor. If you switch from source-code editor to smart-editor any changes applied modifying the source code will be lost.