Manage Tabs, Sections, And Fields In IM Form Designer

See Quick Start Guide – Form Builder Customization for the context of this article. The previous article was 1g. Manage Form Builder Permissions and the next article is 1i. Delete IM Forms.

Form Designer allows administrators to create the tabs, panels (sections), and fields that make up Initiative Management (IM) forms.

Form

To manage Form Designer:

  1. Go to Settings > Customization > Initiative Management (IM).
  2. Click Form Builder.
  3. Add or edit forms:
    1. To add a form:
      1. Click + New Form to open a new form in Form Designer.
    2. To edit a form:
      1. Click a Form Title to edit a form in Form Designer.
  4. Manage tabs:
    1. Add a tab:
      1. Click + New Tab.
        New Tab IM v45500
    2. Rename a tab:
      1. Click the pen icon. Stryka Pencil
        IM Tab edit tab button
      2. Edit the tab title.
      3. Click Submit.
    3. Delete a tab:
      1. Click the red delete button. Red Trash Bin Delete Button
        IM Tab delete button
      2. Click Confirm.
  5. Manage panels (also known as sections):
    1. Add a panel:
      1. Click + New Panel.
        New Tab IM v45500 new panel
    2. Rename the panel:
      1. Click the pen icon. Blue pen IM
        IM panel edit panel
      2. Edit the new panel title.
      3. Press the Enter key on your keyboard.
    3. Rearrange a panel:
      1. Left click and drag a panel to change its position.
    4. Resize a panel:
      1. Drag a panel by its bottom-right corner to change its size.
        Drag handle panels sections im
    5. Delete a panel:
      1. Click the panel menu.
        IM panel panel menu
      2. Click Delete.
        IM Panel menu delete panel or section
      3. Click Yes to confirm.
  6. Manage fields:
    1. Add a field:
      1. Click the edit button on a panel. Add fields edit IM
        IM panel add fields
      2. Drag and drop field types from the left-hand column into the circled area.
        IM add fields
      3. Hover your mouse cursor over the field to make the buttons appear.
        Button while hovering the mouse cursor IM

        • Edit the field. Edit
        • Copy the field. Copy
        • Remove or delete the field. Remove or delete
      4. Edit a Button field:
        Edit IM button

        1. Label: Edit the text that will be displayed on the button.
        2. Type: Select one of the following types from the Type drop-down menu:
          1. button:
            • Button has no actions when clicked.
            • The label can be used as a message.
          2. open_form:
            • On button click, open one of the forms selected in the Possible Children field in Form Information.
            • Select the IM form from Select Form.
          3. custom_script:
            • On button click, run a custom script.
            • The custom script must be attached to the button ID.
        3. Style: Click to select a button color.
        4. Class: Edit the class text.
          • The Class field automatically populates as selections, such as style, are made.
        5. Name: Edit the button name.
          • The Button name is automatically generated.
        6. Value: The initial, default value of the field.
        7. Access: This field will limit access to selected roles but is currently not implemented.
        8. Click Save.
        9. Click the X in the top-right corner to close the pop up.
      5. Edit a Checkbox field:
        Checkbox field IM

        1. Required: Click to select the Required checkbox if the field must be filled in before saving.
        2. Toggle: This field is not yet implemented but will allow the checkbox to be a toggle switch.
        3. Label: Edit the text that will be displayed with the field.
        4. Help Text: Edit the text that will be displayed when a user hovers their mouse cursor over the i Blue I in permissionsbeside the field.
        5. Class: Can be used to point to a class in a style sheet or used by JavaScript to make changes to HTML elements with a specific class.
        6. Name: Edit the checkbox name.
          • The Checkbox name is automatically generated.
        7. Value: The initial, default value of the field.
        8. Access: This field will limit access to selected roles but is currently not implemented.
          Access IM

          1. Click to select the Limit access to one or more of the following roles checkbox.
          2. Click to select a role.
        9. Click Save.
        10. Click the X in the top-right corner to close the pop up.
      6. Edit a Checkbox Group field:

        1. Required: Click to select the Required checkbox if the field must be filled in before saving.
        2. Label: Edit the text that will be displayed with the field.
        3. Help Text: Edit the text that will be displayed when a user hovers their mouse cursor over the i Blue I in permissionsbeside the field.
        4. Class: Can be used to point to a class in a style sheet or used by JavaScript to make changes to HTML elements with a specific class.
        5. Name: Edit the Checkbox Group name.
          • The name is automatically generated.
        6. Access: This field will limit access to selected roles but is currently not implemented.
        7. Enable “Other”: Allows users to select an option that is not listed.
        8. Options:
          • Click Add Option and type a title to add a checkbox to the group.
          • Delete a checkbox by clicking the red X.
        9. Click Save.
        10. Click the X in the top-right corner to close the pop up.
      7. Edit a Date Field field:
        Date Field IM

        1. Required: Click to select the Required checkbox if the field must be filled in before saving.
        2. Label: Edit the text that will be displayed with the field.
        3. Help Text: Edit the text that will be displayed when a user hovers their mouse cursor over the i Blue I in permissionsbeside the field.
        4. Class: Can be used to point to a class in a style sheet or used by JavaScript to make changes to HTML elements with a specific class.
        5. Name: Edit the Date Field name.
          • This name is automatically generated.
        6. Value: The initial, default value of the field.
        7. Access: This field will limit access to selected roles but is currently not implemented.
        8. Click Save.
        9. Click the X in the top-right corner to close the pop up.
      8. Edit a Number field:
        Number field IM

        1. Required: Click to select the Required checkbox if the field must be filled in before saving.
        2. Label: Edit the text that will be displayed with the field.
        3. Help Text: Edit the text that will be displayed when a user hovers their mouse cursor over the i Blue I in permissionsbeside the field.
        4. Type:
          1. Integer: A number without decimal places.
          2. Decimal: Select the number of decimal places, minimum value, maximum value, and step.
          3. Currency.
        5. Min: The minimum value.
        6. Max: The maximum value.
        7. Step: The steps between values, for example, 1.
        8. Class: Can be used to point to a class in a style sheet or used by JavaScript to make changes to HTML elements with a specific class.
        9. Name: Edit the Number field name.
          • The Name field is automatically generated.
        10. Value: The initial, default value of the field.
        11. Access: This field will limit access to selected roles but is currently not implemented.
        12. Click Save.
        13. Click the X in the top-right corner to close the pop up.
      9. Edit a Radio Group field:

        1. Required: Click to select the Required checkbox if the field must be filled in before saving.
        2. Label: Edit the text that will be displayed with the field.
        3. Help Text: Edit the text that will be displayed when a user hovers their mouse cursor over the i Blue I in permissionsbeside the field.
        4. Class: Can be used to point to a class in a style sheet or used by JavaScript to make changes to HTML elements with a specific class.
        5. Name: Edit the Radio Group field name.
          • The name field is automatically generated.
        6. Access: This field is not yet implemented.
        7. Enable “Other”: Allows users to select an option that is not listed.
        8. Display Horizontally: Display the radio group as a row of buttons, rather than a column of radio buttons.
        9. Options:
          • Click Add Option and type a title to add a radio button to the group.
          • Delete a radio button by clicking the red X.
        10. Click Save.
        11. Click the X in the top-right corner to close the pop up.
      10. Edit a Select field:

        1. Required: Click to select the Required checkbox if the field must be filled in before saving.
        2. Label: Edit the text that will be displayed with the field.
        3. Help Text: Edit the text that will be displayed when a user hovers their mouse cursor over the i Blue I in permissionsbeside the field.
        4. Placeholder: Edit the text that will appear in the field before anything is selected.
        5. Class: Can be used to point to a class in a style sheet or used by JavaScript to make changes to HTML elements with a specific class.
        6. Name: Edit the Select field name.
          • The name field is automatically generated.
        7. Access: This field will limit access to selected roles but is currently not implemented.
        8. Options:
          • Allow Multiple Selections: Turns the drop-down menu into a combo box which allows multiple selections.
          • Use Existing Entities: Populate the drop-down menu with:
            • Release Entity: Release Names.
            • System Entity: System Names.
            • Environment Entity: Environment Names.
            • User Entity: User Names.
            • Team Entity: Team Names.
            • Form Entity: Link to other form types.
          • Link drop-down menus by selecting Filter and the top-level menu.
            • For example, create a Select field for Teams, then another for Users, click Save, and select the Filter checkbox for Users so that a Team can be selected, which will then filter and allow selection of the Users in that team.
          • Manage Options:
            • Click Add Option and type a title to add a menu item group.
            • Delete a menu item by clicking the red X.
        9. Click Save.
        10. Click the X in the top-right corner to close the pop up.
      11. Edit a Text field:
        Text field IM

        1. Required: Click to select the Required checkbox if the field must be filled in before saving.
        2. Label: Edit the text that will be displayed with the field.
        3. Help Text: Edit the text that will be displayed when a user hovers their mouse cursor over the i Blue I in permissionsbeside the field.
        4. Type: Text, password, email, color, or telephone.
        5. Placeholder: Edit the text that will appear in the field before anything is selected.
        6. Class: Can be used to point to a class in a style sheet or used by JavaScript to make changes to HTML elements with a specific class.
        7. Name: Edit the Text field Name.
          • The Name field is automatically generated.
        8. Access: This field will limit access to selected roles but is currently not implemented.
        9. Max Length: The maximum number of characters.
        10. Regex Validation: Type a regular expression.
        11. Click Save.
        12. Click the X in the top-right corner to close the pop up.
      12. Edit a Text Area field:
        Text Area field IM

        1. Required: Click to select the Required checkbox if the field must be filled in before saving.
        2. Label: Edit the text that will be displayed with the field.
        3. Help Text: Edit the text that will be displayed when a user hovers their mouse cursor over the i Blue I in permissionsbeside the field.
        4. Placeholder: Edit the text that will appear in the field before anything is selected.
        5. Class: Can be used to point to a class in a style sheet or used by JavaScript to make changes to HTML elements with a specific class.
        6. Name: Edit the Text Area field Name.
          • The Name field is automatically generated.
        7. Access: This field will limit access to selected roles but is currently not implemented.
        8. Max Length: The maximum number of characters.
        9. Regex Validation: Type a regular expression.
        10. Click Save.
        11. Click the X in the top-right corner to close the pop up.
      13. Edit an HTML Editor field:
        HTML Editor field IM

        1. Required: Click to select the Required checkbox if the field must be filled in before saving.
        2. Label: Edit the text that will be displayed with the field.
        3. Help Text: Edit the text that will be displayed when a user hovers their mouse cursor over the i Blue I in permissionsbeside the field.
        4. Class: Can be used to point to a class in a style sheet or used by JavaScript to make changes to HTML elements with a specific class.
        5. Name: Edit the HTML Editor field Name.
          • The Name field is automatically generated.
        6. Access: This field will limit access to selected roles but is currently not implemented.
        7. Regex Validation: Type a regular expression.
        8. Read Only: Select this checkbox to make the text you have entered in the Value field appear as an uneditable text message.
        9. Value: The initial, default value of the field.
        10. Click Save.
        11. Click the X in the top-right corner to close the pop up.
      14. Edit a Data Table field:

        1. Label: Edit the text that will be displayed with the field.
        2. Help Text: Edit the text that will be displayed when a user hovers their mouse cursor over the i Blue I in permissionsbeside the field.
        3. Class: Can be used to point to a class in a style sheet or used by JavaScript to make changes to HTML elements with a specific class.
        4. Name: Edit the Data Table field Name.
          • The Name field is automatically generated.
        5. Data Table:
          • Add a data column: Click + Add Column, then type the Column Name, choose the Data type, type the default Values, and the percentage Column Width.
          • Delete a data column: Click the red X.
        6. Access: This field will limit access to selected roles but is currently not implemented.
        7. Click Save.
        8. Click the X in the top-right corner to close the pop up.
      15. Edit a Dynamic (form) field:
        Dynamic form field IM

        1. Label: Edit the text that will be displayed with the field.
        2. Target Is Ancestor: Looks for related, parent forms.
        3. First Degree Relatives:
          • If selected, looks for related forms that are only one level up or down (parent or child).
          • If not selected, looks for related forms that are any number of levels up or down (grandparents, grandchildren and so on).
        4. Hide Table Controls: Hide the pagination controls if the table only contains a few records and pagination is not necessary.
        5. Target Form: Select the target form.
        6. Click Save.
        7. Click the X in the top-right corner to close the pop up.

 

Back to the top arrow

Related Articles

Contents

Be the first to find out about new features. Subscribe to the Release Notes email.

Subscribe Now

Was this article helpful?

Thanks for your answer!

  • Updated on