Page tree

Layouts

Layouts are an important part of your system because they determine what your users see when they work with records. For each table, you can set up a power user layout, end user layout, and summary layout.

  • Power user layout: Determines the form users see in the power user interface.
  • End user layout: Determines the form users see in the end user interface.
  • Summary layout: Determines the form users see in popovers in the table view, if popovers are configured.

Every table must have a layout for users to open or edit records. Summary layouts are only necessary if you use popovers in the table view, or if you want to make that possible for users setting up their own views. For more information about how summary layouts work and when you might use them, see Summary Layouts.

All these layouts are configured in the table wizard on the Layout tab. Each available field is listed on the left sidebar, which you can search to find specific field names. Drag and drop the fields into place on the layout. The top toolbar offers Undo, Redo, options to add or remove rows and columns, controls for section headings and tabs, and more. Fields that aren't dragged onto the layout are not shown to users.

Best Practices

  • The power user and end user layouts usually have some overlap. It's easier to build the Power User layout first so you can copy it to the End User layout and hide any irrelevant fields. On rare occasions, copying a layout may cause the system to insert "_NLS_" on certain tabs or headers. If this occurs, simply edit those items and remove the extra characters.
  • In general, a two-column layout looks best, except when using very short fields that can be shown in three columns.
  • Place wide fields on their own row, but most fields typically look best under 110 characters wide. Short Text and regular Text fields are typically set at 40 or 90 characters wide, depending on the content they hold.
  • If you're using visibility dependent fields that only show up if another field has a certain value, always place them to the right of other fields or on their own row. If you put visibility dependent fields to the left of other fields, the layout will look as if it has empty space when the visibility dependent field is hidden. The same concept applies to fields that only some users can see.
  • Linked fields can skew the alignment because space is reserved for the field before it is populated, pushing other fields to the right. You can fix this by editing the linked field and changing its displayed field length to a smaller value.

Record Layout

You must create a record layout for every table so that users can access the table fields they need to see and edit. For that reason, we'll start with the standard record layout. Summary layouts are covered in the next section.

This is the layout users see when they open a record from the table view. Depending on the interface they use to access the table view, they see either the power user layout or the end user layout. End user layouts typically have fewer fields than power user layouts, so it's easiest to design the power user layout first, copy it to the end user layout, and then remove unnecessary fields from the end user layout.

Common Area

The Common Area is a section that always shows in the record form, even when the user changes tabs. This way, you can make important fields easily accessible from every tab, both for reference and editing purposes. For example, Common Areas often include the record ID and name, a summary field, and a status field. Make sure the Common Area includes fields users frequently need, without making the area too large and overtaking the rest of the form, or requiring users to scroll down a long sidebar.

The Common Area can be formatted as a horizontal section across the top of the form, a sidebar across the right or left side of the form, or not used at all.

To decide how to format the Common Area for a table, consider the fields you want to place there and the way users will interact with the form. For example, if your Common Area will function as a passive reference for the record ID, title, and creator, you might place it at the top so users can always scroll up to see the information. In contrast, if your Common Area houses several action buttons that users might need to click at any time, you might place it as a sidebar so it is always visible and users don't need to scroll up to access the buttons.

Sidebar Display Options

Showing the Common Area as a sidebar might require more trial and error when configuring your layout, especially if you originally designed the Common Area in the default position and want to move it.

Because the sidebar is narrower, field names and content might be too long or look too cluttered. Some common solutions include:

  • Using the Common Area option to show field labels above the input box rather than beside it, especially if there's a lot of open space in the Common Area
  • Moving fields with long names or long values out of the Common Area and onto another tab
  • Changing the field label display in Look & Feel to distinguish it from the input text, such as using bold for field labels, as long as this change is appropriate to apply everywhere in your system

It's also more noticeable if a sidebar Common Area is disproportionate to the rest of the form.

  • Sidebars should have a maximum width set at or near 30%
  • Don't include so many fields that the sidebar requires scrolling

Finally, consider if and how you want to include action buttons.

  • The sidebar Common Area is always visible, unlike the header Common Area. Any action buttons you include will be accessible from any tab at any point in the user's workflow. In some cases, this is beneficial, and makes it easy for users to escalate issues, create new tasks, email reminders, and more. In other cases, users are required to complete certain fields or tabs before clicking action buttons, and including them on the sidebar might set users off course.
  • If you're pressed for space or you want all your Common Area fields to align, you might consider configuring action buttons in your Common Area to display as hyperlinks. These take up less visual space and align with other regular text field labels.

Planning Layout Sections

It can be useful to plan or sketch your form before you begin building, especially for tables with many fields. Think about how users will use the form and what they need to accomplish, in what order. For example, if users need to complete all the fields on the first tab before using any action buttons, you might place the action buttons at the bottom of the first tab. In general, create a layout where users complete forms from top to bottom and move sequentially from the first tab to the last tab.

Here are some questions to guide your planning:

  • What is the workflow for users? What do they fill out first and last, and when do they use action buttons?
  • Should fields be concentrated in one or two tabs with more scrolling, or distributed among many tabs that must be navigated?
  • What information needs to be in the Common Area? Is that enough, or too much?
  • Which fields are required? Usually, these fields are placed on the first tab, so users fill them all out before clicking Save.

You don't need to place every field ahead of time, but you'll save yourself time if you have an idea of the sections and tabs you want to create, and how you plan to use the Common Area. At a minimum, consider whether to show the Common Area at the top of the form or move it to the right or left sidebar, and consider which fields you want to add to the Common Area to be available on every tab of the form.

Example sketch of a form tab layout

Creating a Layout

When you're ready to create your layout:

  1. Go to Setup [Table] to open the table wizard.
  2. Click the Layout tab. Notice on the left that Power User is selected by default. Later, when you finish the layout for power users, you can click Copy this layout to the End User Layout and simply hide any irrelevant fields to avoid duplicating your efforts.
  3. First, click the edit icon next to Header to review the settings. This controls which Save options are available from the drop-down. Select or clear the checkboxes as desired and click Finish.
  4. If you want to show the Common Area as a sidebar, click the edit icon next to Common Area to configure its location and appearance:
    1. In Show Common Area, select whether to place the Common Area at the top, the left, or the right. By default, it is shown at the top.
    2. If you set the Common Area to show on the left or right, set the maximum width and then adjust the alignment to make your fields fit better in the sidebar. You can change the default to Left or Right alignment, or you can place all the field labels above the values to accommodate slimmer sidebars.

      The layout editor doesn't show the Common Area as a sidebar, even if you configure it that way. It will show as a sidebar when users access actual records.

  5. If you want to show a Graphical Status Bar, click the edit icon next to Graphical Status Display and select the field you want to use.
  6. Now, drag fields from the Available Fields pool into the Common Area and arrange them the way you want. If you're showing the Common Area as a sidebar, remember your fields need to be arranged more vertically than your other tabs.

With your Common Area complete, you can start setting up the rest of your tabs.

  1. Drag fields from the Available Fields pool onto the other tabs of the form. Use the search bar to locate specific fields, or use the drop-down to show only certain field types. As you go:
    1. Add tabs by clicking the plus icon on the rightmost tab. To remove a tab, select that tab and click Delete > Delete Tab. Click Rename Tab to change the name of the current tab. 

      To maximize loading speed, avoid placing related tables on the first tab. This lets them load in the background. Also, try to place all or at least most required fields on the first tab.

    2. Add columns and rows with the Insert buttons on the toolbar. To remove a column or row, select a cell in that column or row and use the Delete menu to remove it.
    3. Use the Heading buttons to insert or edit headings inside a tab. New headings are added above the selected cell. Use the Delete menu to remove the selected heading.

      Text headings help organize the form, so use them liberally. You may also want to have a text heading collapsed by default if the fields it contains aren't typically displayed to users. Note that if the form is refreshed, the default settings will be reapplied.

    4. Use the Preview button to see how your layout will look.
  2. When you have all the fields and tabs arranged the way you want, click Set Alignment to configure the alignment, spacing, and width of field labels, fields, and columns. 

    Alignment selections are critical and have a major impact on the layout, and some trial and error may be necessary to obtain the best result:

    • Aligning all columns gives the cleanest display when there are only two or three columns.
    • Turning off the Expand Input Boxes option is usually best because it can distort narrow fields.
    • Increasing the Width of Multi-column Fields option can sometimes greatly improve a layout’s alignment and appearance.
  3. Finally, if you're working on the power user interface, click Copy this layout to duplicate your layout for the end user interface. Then, use the drop-down to switch from Power User to End User at the top of the field list. Remove any fields end users shouldn't see, and adjust the field arrangement as needed.

If a field on the layout is grayed out and can't be moved, it is likely a link to a deactivated table. You must reactivate the table before moving these fields on the layout.

Summary Layout

You can configure a third layout, the Summary layout, if you plan to use view or edit popovers in your table view. Popovers make it easy to skim records from the table view and make simple changes without opening the full record form. After you add a popover to a table view, users can hover over the popover field to open your configured summary layout.

You can use the summary layout to show more detail about the record than the table view shows, without requiring the user to open the full record. This can be useful for data entry, reassignments, short working notes, related tables which can't be shown in the table view, and much more. It can also make workflows smoother where users would otherwise use multiple Quick Edit fields in the table view.

Example summary layout used in Contract Clauses when shown in the related table in Contracts

To set up a Summary layout:

  1. Select Summary from the drop-down above the field list.
  2. Drag fields from the Available Fields pool onto the Header, Body, and Details tabs. In the popover, these sections appear together. In the example shown above, the service request ID is the only item in the Header tab, and the rest of the fields are added to the Body tab. Choose fields carefully, as popovers are small and it's easy to make them look cluttered. You can also make use of visibility-dependent fields to avoid clutter in popovers.

    Use the Preview button to see how your Summary layout will look.

When you've created a Summary layout, you need to add the popover to a table view.

  1. Go to the table where you configured the Summary layout.
  2. Select the appropriate view and click Edit in the Views drop-down menu.
  3. Locate the field you want to use to open the popover and make sure the Display check box is selected.
  4. In the Cell Link drop-down menu, select Edit Popover or View Popover.
  5. Click Finish.

If you prefer, you can show the Edit Popover or View Popover options in their own columns as icons using the check boxes at the top of the View editor. If you choose this method, make sure to configure icons for the popovers in the Icons tab of the Look and Feel wizard.