Page tree
Skip to end of metadata
Go to start of metadata

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 table field is displayed as a separate block, which you can drag and drop into the appropriate location. You can move background fields out of your way onto the Hidden tab and they won't display on the layout. You can also leave fields in the Available Fields section to keep them off the layout.

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 reenter the previous value.
  • 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.

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 tab, 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 scroll up on any tab 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 can click the action buttons from anywhere.

Sidebar Display Options

Showing the Common Area as a sidebar can 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.
  3. First, click Power User to edit the power user interface. 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.
  4. If you want to show the Common Area as a sidebar, click Common Area to configure its location and appearance:
    1. In Show Common Area, select whether to place the Common Area on 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, next set the maximum width.
    3. If you set the Common Area to show on the left or right, you can also 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.
  5. Now that you know the location of the Common Area, 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. As you go:
    1. Add or remove tabs by clicking Tab in the New or Delete button row. Click Rename Tab to change the name of a tab you already created. 

      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 or remove columns and rows by clicking Column or Row in the New or Delete button row. Columns are added to the right of the selected cell, and rows are added below it.
    3. Add or remove text headers by clicking Text in the New or Delete button row. Click Edit Text to change a text header you already created.

      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. Remember you can drag fields to the Hidden tab if you know you don't want to use them and you don't want them to clutter the Available Fields pool.
    5. Use the Preview button frequently to see how your layout will look.
  2. When you have all the fields and tabs arranged the way you want, put the finishing touches on your layout:
    1. 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.
    2. Click Buttons to configure whether users can see drop-down options from the Save and Cancel buttons at the top of the form.
  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, click End user to open the end user layout, 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.

To set up a Summary layout:

  1. Click Summary at the top of the Layout tab.
  2. Drag fields from the Available Fields pool onto the Header and Body tabs. In the popover, these sections will 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.

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.