Form Builder Application Toolbar

Instructions

The Application Tool Bar is located at the top of the body/grid in the web Form Builder application, as shown in the figure below.

Forms can be designed in single or multiple columns. The toolbar gives form designers the ability to move and arrange Design Tools and Form Fields in any format desired. The functionality of the tools within the toolbar allows form designers to move any item within the body/grid, as a group or individual item, for easy form design.

The following tools are available in the Application Toolbar:

1. Select All

Clicking the Select All tool selects all the objects (tables, labels, fields, Separators, etc) contained in the body/grid Form Builder allowing movement of the selected items to a different location.

To move the fields, click on one of the outlined objects; while holding the left mouse button down, drag the fields to the desired position in the body/grid and drop the fields by releasing the mouse button. Note the entire selection was moved to the right in the Form Builder body/grid.

After moving the fields to the desired location, simply click in the body/grid or click the Clear Selection icon in the grid to de-select the objects, as shown below.

2. Select Multiple 

The "Select Multiple" icon allows the Designer to click on multiple items and or drag a frame around the objects to be moved.  In the following figure, a frame is shown in blue outlining a group of Design Labels and Form Fields to select items to be moved to the desired position within the form. 

Click in the top left corner of the first field and drag the mouse to the bottom-right field of the group to select the desired items to move. As shown in the figure below, the items selected will be shown shaded in blue.

After releasing the mouse button the items selected will appear outlined with a moving blue dotted line, as shown in the figure below.

To move the selected group, click on one of the objects outlined with the moving blue dots and drag and drop the fields to the desired location on the body/grid Form Builder.

Note the figure above shows the selected fields have been moved to the right in the body/grid. To deselect the objects, click inside the body/grid or click the Clear Selection tool.

3, Clear Selection

Clicking the Clear Selection tool deselects all items selected in the body/grid.

4. Delete

Clicking the Delete tool deletes all selected objects. Form Designers can select multiple objects or a single object to delete.   Select the field/item(s) to be deleted. The field(s) selected will appear with blue dotted lines as shown in the figure below. 

Click the Delete tool. After clicking the Delete tool (with the desired objects selected) a confirmation popup window will appear as shown in the figure below.

Click OK to confirm deletion of the selected object(s). Or Cancel to stop action.

5. Align Left

The Align Left tool allows the Form Designer to select a group of objects to align with the furthest Left object. 

Select the desired group of Labels or Fields to align to the left as shown in the following figure.  Click the Align Left tool.  

When clicked, the tool aligns the selected objects with the furthest left object in the selected group as shown in the following figure.

6. Align Right  

The Align Right tool allows a Form Designer to select a group of objects to align to the furthest right object.

Select the desired group of Labels or Fields to align to the right as shown in the following figure.

Click the Align Right tool. When clicked the tool aligns the selected objects to the furthest right object in the selected group as shown in the following figure.

7. Move to Page

The Move to Page tool allows designers to select an individual or group of objects to move to a New Page. The Move to Page is used in conjunction with the New Page button.

First, click the New Page button to create a New Page as shown in the figure below.

When the New Page button is clicked a New Page is displayed in the body/grid of the Form Builder. The Form Designer can enter a new Title on the page or leave the default Title (Page 2), as shown in the figure above as well.

To create a new title for the page, click in the Title box in the properties, type in the new title, and tab out of the box. The new page title will appear in the pages section below the Toolbar. In the example below, the new title, “NEW TAB” was entered, as shown in the following figure.

Go back to page 1 by clicking “Page 1” from the Pages section of the Form Builder as shown in the following figure. 

This will display the original page (for this example Page 1). From this page select the desired fields to move to the new page (New Page Added). Selecting the desired fields will “activate” the Move Page tool as shown in the following figure.

 Clicking the Move To Page tool displays the list of pages to which the objects could be moved as displayed in the following figure.

Clicking the tab name from the list moves the selected items to the new page as shown in the following figure.

The New Page Added contains the fields selected to move. The original page (Page 1) displays the form with the selected objects removed as shown in the following figure.

When selected objects are moved from one page to the newly created page, the objects will move to the exact position in the target form as they were in the selected form. If desired, the selected objects can be moved to another position on the newly created page.

When a Form Designer uses the “Copy and Paste” tool to move objects from one page to the next, the properties will move to the selected page but the conditional actions DO NOT copy to the selected page. You have to copy them first to the clipboard and then move the field to the new form. After which, insert them from the CA clipboard.

8. Copy and Paste

The Paste tool works in conjunction with the Copy tool. When objects are selected and then Copied, clicking the Paste icon takes the selected object(s) and pastes the object(s) into another area within a form, to the body/grid of a New Page or another selected Form. The object can then be moved by clicking on the object and moving it within the Form Builder body/grid.  Below are examples of how the Copy and Paste tools can be used.

Copy and Paste Objects in the Same Form:

To Copy objects within a form,

1. Click on an object in the body/grid

2. Click the Copy icon as shown in the following figure.

1. With the object (field) highlighted with “marching ants”

2. And once the Copy icon is clicked

3. The Paste icon will enable or become highlighted as shown below. Click to paste the copied object(s).

After clicking the icon the selected object is

1. Copied and placed underneath the original object (in this example the Free Text field is copied).

2. Click on the original object and drag it to the desired location in the Form Builder body/grid. For this example, the new Free Text Field is placed in the grid below the field as shown in the following figure.

After the field is dragged and placed in another location in the body/grid, note the Text Properties. The Field Name is FORM_FIELD_1 which is the original name for the field. When the second new field above is created and selected, notice the field name would be FORM_FIELD_2 as shown in the following figure.

The copied field will dynamically copy the Field Name and place an incremented extension of “_1” on the copied field. Since the field already contained the extension “_1” when the field was copied, the system incremented the extension by “1” and it became “_2”. If the same field is copied multiple times, the copied Field Names will contain incremented extensions of _1, _2, etc. on the copied fields. This allows Form Designers to create fields quickly.

For this example, the Label “Street Address 2” is added to the body/grid Form Builder and the Reporting Label is changed to reflect the field as shown in the following figures. 

Copy and Paste Objects to an Existing Form or a New Form:

Form Designers can copy a single field or multiple fields from one form to another existing form or to a new form. All field properties will copy to the new or existing form. However, if there are fields with conditional actions the conditional actions will not copy to the new or existing form and must be re-written.

To copy fields to a new or existing form:

Select the desired Form from the Existing Forms Data Table. In the body/grid of the selected form outline a group of fields as shown in the following figure.

In the Toolbar click the Copy icon. In the Links table click the “Create New Form” link. This will clear the body/grid of the form builder as shown in the following figure.

In the toolbar click the Paste Icon. The copied fields are pasted (placed) in the New Form in the same position as they were in the existing form as shown in the following figure.  

Click in one of the active fields and drag it to the desired position in the form. After moving the field(s) to the desired position, click outside the fields in the body/grid. This will open the Form/Page Properties in the left column as shown in the following figure.

Enter the Form Name and all the Properties associated with the newly created form as shown in the following figure.

To save the newly created form click the “Save Form” button. The new form appears in the Existing Forms data table as shown in the following figure.

9. Open Form (coming soon)

10. Undo

Clicking the Undo tool allows the Form Designer to “Undo” the last event whether it was a single event or multiple events.

11. Redo

Related articles