Fullscreen Image

Common Form Elements

There are several common elements that our clients incorporate into their forms. This article will go over how to create these elements.

ClosedNavigate to the Manage Forms Page

To navigate to the Manage Forms page:

  1. Click Admin in the toolbar in the upper-right corner of the window.

    The System Administrator Dashboard page opens.

  2. Click Manage Forms link in the Company Administration column.

    The Manage Forms page opens.

  3. Follow a procedure below.

ClosedNavigate to the Manage Page Layouts page

To navigate to the Manage Page Layouts page:

  1. Click Admin in the toolbar in the upper-right corner of the window.

    The System Administrator Dashboard page opens.

  2. Click Manage Page Layouts link in the Company Administration column.

    The Manage Page Layouts page opens.

  3. Follow a procedure below.

ClosedForm Title

We recommend you add a title to each form. This title should correspond with the form's name. If you need to troubleshoot with your users, a form title helps you easily determine which form they are working with.

To add a title to your form:

  1. Follow the Navigate to the Manage Forms Page procedures above.

  2. Click A small, white, square button with a plus symbol in its center. next to the form type whose layout you want to build.

    The layouts associated with the form type appear as child items.

  3. Click Build Layout link in the Actions column for the layout you want to build.

    The Layout Builder opens in a window.

  4. Click A small square gray button with a plus symbol in its center. of the cell where you want the form title.

    The Insert opens.

  5. Select Label Field from the field.

    The Label Field window opens.

  6. Enter your form title in the Enter Label field.

  7. Select or clear the following check boxes:

    • Underline

    • Bold

    • Italic

    • Display as Section Header: Make your title into a section header. A section header is the black header bar with white text.

    • Accept HTML: Allow HTML code in the Enter Label field. For example, you can use HTML to hard-code the size or color of your label. If the HTML you use contains errors, the system suggests valid code.

  8. Select one of the size options to customize the size of your form title.

  9. Select one of the Alignment Options options to set the alignment of the text.

  10. Click Save.

    The window closes. Your title appears in the layout.

  11. Once you are satisfied with your layout, click Save Layout.

    The window closes.Your changes are saved.

ClosedForm Header

 

If you have standard information you want to repeat in multiple forms such as company name, address, and contact information, we recommend you create one or more standard form headers:

  1. Follow the Navigate to the Manage Page Layouts page procedures above.

  2. Select the Manage Sub-pages tab.

    The Manage Sub-pages page opens.

  3. Click Add Item in the lower-right corner of the Sub-Pages table.

    The Add Item window opens.

  4. Enter the name of the sub-page layout in the Page Layout Name field.

    Clearly name the form header with the name [Form Purpose] Form Header—for example, Capital Project Form Header. This will make the proper form header easier to find when you are building your forms.

  5. Select Entity from the Primary Table field.

  6. Select the No option for the Allow Edit setting.

    Since the fields in your form header are for informational purposes, they should not be editable.

  7. Enter a description of the header in the Description field.

    We recommend that you add descriptions to every template, layout, or field you create in Lucernex, so that subsequent administrators will understand the purpose and context of the items you create.

  8. If you want to initialize the layout of this header from an existing layout, select the layout from the Initialize layout from existing layout field.

  9. Click Add.

    The window closes. Your sub-page layout appears in the Sub-Pages table.

  10. Follow the Page Layout Editor procedures.

    This is where you will add the fields which contain your most commonly used information. For example, you might consider adding the following content to a form header used for a project work flow:

    • Your company logo

    • A section header

    • ProjectEntity.ProjectEntityName: Name of your project.

    • ProjectEntity.ClientEntityID: Project ID.

    • ProjectEntity.CodeProjectTypeID: Project type.

    • ProjectEntity.HTMLAddress: Full address of the project.

  11. Once you are satisfied with your header, click Save Layout.

    The window closes. Your changes are saved.

  12. Follow the Navigate to the Manage Forms Page procedures above.

  13. Click A small, white, square button with a plus symbol in its center. next to the form type whose layout you want to build.

    The layouts associated with the form type appear as child items.

  14. Click Build Layout link in the Actions column for the layout you want to build.

    The Layout Builder opens in a window.

  15. Do one of the following:

    • Enter the name of your header sub-page in the Search in the menu on the left side of the window.

      The items matching your search criteria appear in the menu.

    • Navigate to your header sub-page in the Available Fields > Sub Layouts folder.

      The contents of this folder appear in alphabetical order.

  16. Select your header sub-page.

  17. Drag the header to the layout.

  18. Drop the header on a A small square gray button with a plus symbol in its center. icon in the layout.

    The header is added to the cell.

  19. Use the Expand and Collapse buttons described in the table below to adjust the size of your header.

    Button

    Name

    Description

    A small gray square button which looks like an arrow pointing right.

    Expand Right

    This will increase the width of the current cell by one cell width.

    A small gray square button which looks like an arrow pointing left.

    Collapse Left

    This will decrease the width of the current cell by one cell width.

    A small gray square button which looks like an arrow pointing down.

    Expand Down

    This will increase the height of the current cell by one cell height.

    A small gray square button which looks like an arrow pointing up.

    Collapse Up

    This will decrease the height of the current cell by one cell height.

    If you added a section header to your header in step 10, you will need to select the Show Table Header check box for it to display.

  20. To enable the Show Table Header setting:

    1. Click A small square gray button with an ellipses on it. in the field cell that contains your header sub page layout.

      The Edit Field window opens.

    2. Select the Show Table Header check box.

    3. Click Set Options.

      The window closes. Your changes are saved.

  21. Click Save Layout.

    The window closes. Your header has now been added to your form.

ClosedInstructions

We recommend embedding detailed instructions for your user in your forms. Adding instructions will reduce the necessity of distributing separate training materials to your users.

ClosedEmbed Instructions into the Form Itself

If you do not want your instructions to be collapsible or if the instructions are fairly unique, you can embed your instructions into the form itself.

To embed instructions into a form:

  1. Write out your instructions in a word processor.

    We recommend writing the instructions before you start adding them to your form so that you have a better idea of how to format your form.

  2. Follow the Navigate to the Manage Forms Page procedures above.

  3. Click A small, white, square button with a plus symbol in its center. next to the form type whose layout you want to build.

    The layouts associated with the form type appear as child items.

  4. Click Build Layout link in the Actions column for the layout to which you want to add instructions.

    The Layout Builder opens in a window.

  5. Determine where in your layout you want to add the instructions.

  6. Choose between two options:

    • To insert instructions as one paragraph:

      1. Click A small square gray button with a plus symbol in its center. of the cell where you want your instructions.

        The Insert opens.

      2. Select Label Field from the field.

        The Label Field window opens.

      3. Enter your instructions in the Enter Label field.

      4. Select the Accept HTML check box to allow HTML code in the Enter Label field.

        For example, you could use HTML to hard-code the size or color of your label. If the HTML you use is not written correctly, the system will suggest valid code.

      5. Click Save.

        The window closes. Your instructions appear in the layout.

        To learn how to modify the appearance of a label field, follow the Label Field procedures.

    • To insert instructions as multiple lines:

      1. Click A small square gray button with a plus symbol in its center. of the cell where you want the first line of your instructions.

        The Insert opens.

      2. Select Label Field from the field.

        The Label Field window opens.

      3. Enter the first line of your instructions in the Enter Label field.

      4. Select the Accept HTML check box to allow HTML code in the Enter Label field.

      5. Click Save.

        The window closes. The first line of your instructions appear in the layout.

      6. Repeat steps a - e for each step of your instructions.

  7. Click Save Layout.

    The window closes. Your instructions have been added to your form.

ClosedCreate Instructions as a Sub-Form Layout

If you want your users to be able to collapse the instructions when they do not need them or if your instructions are repeated across several forms with the same form type, you can create the instructions as a sub-form layout.

To create your instructions as a sub-form layout:

  1. Write out your instructions in a word processor.

    We recommend writing the instructions before you start adding them to your form so that you have a better idea of how to format your sub-form layout.

  2. Follow the Navigate to the Manage Forms Page procedures above.

  3. Click A small, white, square button with a plus symbol in its center. next to the form type to which you want to add a sub-form layout.

    The layouts associated with the form type appear as child items.

  4. Follow the Add Layout procedures.

  5. Follow steps 4 - 7 of the Embed Instructions into the Form Itself procedures above.

  6. Follow steps 5 - 16 of the Sub-Form Layouts procedures below.

ClosedSection Headers

We recommend adding clear headers to each section of your form so that users understand both the type of information they are viewing and the purpose of the section.

To add a section header:

  1. Follow the Navigate to the Manage Forms Page procedures above.

  2. Click A small, white, square button with a plus symbol in its center. next to the form type whose layout you want to build.

    The layouts associated with the form type appear as child items.

  3. Click Build Layout link in the Actions column for the layout you want to build.

    The Layout Builder opens in a window.

  4. Click A small square gray button with a plus symbol in its center. of the cell where you want the section header.

    The Insert opens.

  5. Select Label Field from the field.

    The Label Field window opens.

  6. Enter the text of your section header in the Enter Label field.

    A good section header is easily understood at a glance, without being too long.

  7. Select the Display as Section Header check box.

  8. Select or clear the following check boxes:

    • Underline

    • Bold

    • Italic

    • Accept HTML: Allow HTML code in the Enter Label field.

      For example, you can use HTML to hard-code the size or color of your section header. If the HTML you use contains errors, the system suggests valid code.

  9. Select one of the size options to customize the size of the text on the section header.

  10. Select one of the Alignment Options options to set the alignment of the section header.

  11. Click Save.

    The window closes. The section header appears in the layout.

  12. Once you are satisfied with your layout, click Save Layout.

    The window closes. Your changes are saved.

ClosedSub-Form Layouts

Similar to a sub-page layout, a sub-form layout is used when you have information that needs to be repeated across several forms. The benefit of a sub-form layout is that you can utilize fields that are unique to the form. The drawback to using a sub-form layout is that it can only be used with its' parent—the form type it belongs to.

To create a sub-form layout:

  1. Follow the Navigate to the Manage Forms Page procedures above.

  2. Click A small, white, square button with a plus symbol in its center. next to the form type to which you want to add a sub-form layout.

    The layouts associated with the form type appear as child items.

  3. Follow the Add Layout procedures.

  4. Follow the Build Layout procedures.

  5. Click Build Layout link in the Actions column for the layout to which you want to add the sub-form layout.

    The Layout Builder opens in a window.

  6. Do one of the following:

    • Enter the name of your sub-form layout in the Search in the menu on the left side of the window.

      The items matching your search criteria appear in the menu.

    • Navigate to your sub-form layout in the Available Fields > Sub Layouts folder.

      The contents of this folder appear in alphabetical order.

  7. Select your sub-form layout.

  8. Drag the sub-form layout to the layout.

  9. Drop the sub-form layout on a A small square gray button with a plus symbol in its center. icon in the layout.

    The sub-form layout is added to the cell.

  10. Use the Expand and Collapse buttons described in the table below to adjust the size of your sub-form layout.

    Button

    Name

    Description

    A small gray square button which looks like an arrow pointing right.

    Expand Right

    This will increase the width of the current cell by one cell width.

    A small gray square button which looks like an arrow pointing left.

    Collapse Left

    This will decrease the width of the current cell by one cell width.

    A small gray square button which looks like an arrow pointing down.

    Expand Down

    This will increase the height of the current cell by one cell height.

    A small gray square button which looks like an arrow pointing up.

    Collapse Up

    This will decrease the height of the current cell by one cell height.

  11. Click A small square gray button with an ellipses on it. in the field cell that contains your sub-form layout.

    The Edit Field window opens.

  12. If you added a section header to your sub-form layout and you want it to display in your form, select the Show Table Header check box.

  13. If you want your sub-form layout to be collapsible, select the Collapsible check box.

    The sub-form layout will be open by default.

  14. Make any other changes you deem necessary.

    For descriptions of common settings that appear in the Edit Field window, see the Modify the Appearance of a Field in a Layout procedures.

  15. Click Set Options.

    The window closes. Your changes are saved.

  16. Click Save Layout.

    The window closes. Your sub-form layout has now been added to your form.

ClosedForm Footer

The Lucernex Professional Services team has provided a form footer that includes descriptions of each of the buttons that may appear at the bottom of the Form window. If you would like to use this footer, download the .xml file.