Using the Form Designer › How to Add, Move, and Delete Elements

How to Add, Move, and Delete Elements

On a new or existing form, you can add and configure the elements, such as text fields, text areas with check boxes or radio buttons, and so forth. You add and configure elements when you create and customize forms.

To add and configure elements on a form, follow this process:

1. In the Component Tree (the left pane of the Form Designer), verify that the Component, System folder is expanded, and that the element you want to add appears in the tree view under the System folder.

   For example, if you want to add a text field, verify that the System folder (under the Components folder) appears and is expanded to show the Text Field option. Similarly, if you want to add a select box and its options, verify that the Radio Group folder (under the System folder) appears and is expanded to show the Radio option.

2. Verify that the form to which you want to add the element already exists. If necessary, create a form.
3. Expand the Forms, Forms folder and scroll to the form to which you want to add the element.
4. Verify that both the element you want to add and the intended form are visible in the tree view at the same time.
5. Click the element, for example, Text Field, drag it, and drop it on the intended form.

   For example, if the intended form is named Model Options, click Text Field, drag it to Model Options, and drop it there, all on the same tree.

   When you click and drag an element, both a checked circle and the message "1 object selected" appear next to the cursor.

   As you drag the mouse, when the dragged element is over a form or existing form element on which it can be dropped, the checked circle turns green, and the cursor changes to appear as a hand. Conversely, the checked circle turns red when the dragged element is not over a form or form element on which it can be dropped.

6. Release the mouse to drop the element on the form or form element. When you drop it, the checked circle must be green. Otherwise, the element is not added.

   Similarly, the element is not added if the attempted action violates a rule. Examples include attempting to drop a select option onto a radio group or to drop a select group onto another select group.

7. Specify the required HTML attributes for the new element, and click Save.

   The required HTML attributes for each element appear in bold.

   Note: Attempts to perform a different action before saving this element fail. For example, attempts to drag and drop a new element before saving this element fail.

8. Check the form in the Preview Area (the middle pane) to verify that the element was added to the form as you intended. If it was not, you may want to either rearrange the elements or delete the new element and try adding it again.
9. Specify the optional HTML attributes (if any) that you want for the new element, and click Save.
10. By default, components are organized in one column. To configure the form to use two columns, do the following:
    1. Drag Column Layout from the System folder and drop it onto a desired form.
    2. When you drop this layout, the tree updates with Column Layout and its two children, Column 1 and Column 2 automatically.
    3. Click the icon next to Column Layout to display the two columns, which are named Column1 and Column 2.
    4. Drag and drop other elements, such as text fields, radio groups, and select boxes, onto Column 1 and Column 2, to achieve the layout you want.

    Note: When you highlight the Column Layout or a Column, the corresponding areas in the Preview Area of form may be rendered gray and disabled, and the elements within the column may be highlighted with red border.

11. Specify the JavaScript attributes (if any) that you want for the new element, and click Save.
12. To specify a meaningful name for the new element, do the following:
    1. Select the new element in the Component Tree and click the Rename button at top of the Component Tree.

       Note: Verify that you select the new element (such as Text Area or Radio Group) on your form in the Component Tree; be careful that you do not select the same-named element on the System folder in the Component Tree.

       The Name dialog appears.

    2. Enter the new name and click OK.

    For example, in a form named External Storage Drive Order Form, you may drag and drop a radio group and change its name from the default Radio Group to Capacity in GB. Next, you may drag and drop three radio buttons onto that radio group, and change their names from the default radio button to Small (50), Medium (100), and Large (150), respectively.

    Note: When you create a new element, a colon (:) is automatically included at the end of its name. The colon does not appear in the Name dialog when you rename the element. However, it does appear in the Preview Area after you click OK to close the dialog. Verify that you do not enter an additional colon in the Name dialog; otherwise, the element has two colons after its name in the Preview Area.

13. Verify that the new element appears and functions as you intended. If necessary, refine any attributes to obtain the appearance and function you want.
14. Repeat the previous steps for each element that you want to add.
15. Optionally, move one or more elements on the form by dragging and dropping them onto a different location in the form, for example, after an element that they previously preceded.
16. Optionally, delete elements you no longer want on the form by selecting them and clicking Remove.