Responsive Form Designer

This section explains all the panes, properties and functionalities of the Responsive Form Designer.

There are 3 panes for the Responsive Form Designer:

1. Element Pane: This pane presents a list of elements and fields that the admin user can drag and drop into the form. There are two types of objects:

   • Structure Objects: These are building blocks for constructing the layout of Responsive Forms. It consists of Column, Column Sets and Group Box.

     • Column: A container that wraps a vertical stack of Column Sets, Group Boxes, or fields. All fields in a column will fill 100% of the width of the container. Columns may only be placed inside Column Sets.
     • Column Set: A container that wraps one or more Columns. A Column Set can be used to arrange Columns of content side by side, or they can be nested within Columns to give the appearance of a split Column. By default, the Columns inside a Column Set will reflow to stack vertically when the width of the Form shrinks. However, this behavior can be overridden by the administrator as needed. Column Sets may be placed inside a Column or at the root level of the Form.
     • Group Box: A Column Set preconfigured to show a label and border. A Group Box can wrap related content, helping users identify related data even on varying screen sizes. Group Boxes can be used just like Column Sets – inside a Column or at the root level of the Form.
   • Unused Properties: These are individual fields that are preconfigured to the properties of the Form’s parent ItemType. Each field has a default control type such as text box, checkbox, dropdown, etc. As the admin user drags & drops a field into the Form, the corresponding property is removed from the Unused Properties list.

2. Detail Pane: This pane enables the admin user to view and edit the Form’s properties. When a structure element or field is selected in the Canvas Pane, the admin can also view or edit the properties of the selected element or field.

3. Canvas Pane: This is where the admin user will drag & drop elements to define the content and layout of the Responsive Form. The admin can preview how the content will reflow by changing the size of the browser window or expanding/collapsing the other panes in the designer.

4. Toggle Pane: Two buttons on either side of the Canvas enable the user to toggle the designer’s side panes on or off. This helps the admin preview the Form’s wrapping settings by changing the size of the Canvas.
5. Toggle Guides: Enables the admin to toggle off the blue boxes that show the Form’s structure elements in the Canvas if they want to see how the rendered Form will look for an end user.