Field Editor

Skuid’s Field Editor is a data component that allows you to view and edit a single record. In contrast to Tables, which show multiple records and allow for mass updates, the Field Editor shows details for a specific record, which can be updated inline. If multiple records are present in the model, a Field Editor will appear for each separate record.

Using the Field Editor Component

At its most basic level, the Field Editor is used to edit fields on a single record. Using different properties and elements of the Field Editor, however, it is possible to guide users through the entire process of updating a record on a single page

Adding columns and sections to a Field Editor allows for more specific user experiences, guiding users through the exact steps necessary to input or update required information. Columns provide great control of where editable fields appear, but also affect the order in which items are read on a Skuid page. Sections are added within columns to add specific instruction or guidance through labels and additional prompts.

Columns and sections

  • Add columns by clicking fa-plus-circle Add Columns button.
    • The Field Editor defaults to a two-column layout.
    • Columns are adjustable in the Properties pane.
  • Remove columns by clicking the fa-times-circle Delete button on the column.
  • Add sections to columns by highlighting the column and clicking fa-plus-circle Add Sections.
    • You must have at least one column and one section to add fields to the Field Editor.
    • Sections are adjustable in the Properties pane.
      • Turn section titles on/off, edit section titles, and collapsible sections.
  • Select the fields you want users to read, edit, or both.
    • Choose the required fields from the model associated with the Field Editor component, Javascript templates, images, or column sets.

Best Practices

  • While having a Save/Cancel button directly above the Field Editor may be useful in most cases, consider using one save button per page to remove visual clutter and reinforce how to save page data to the user.
  • Field Editors often work best with models with one—or few—records. If your model contains many records or is a related list, consider using a Table component instead.
  • While Field Editors allow for focused form-filling, they are not very interactive. If the records on your page require extensive use of the Action Framework, consider using a Button Set component for those actions, or using the Deck component instead.

Other Features

Currency shortcuts [[]]

Skuid allows the user several shortcuts when entering amounts into a table’s currency fields. While in Edit mode, the user enters the base amount (for example, 30) and adds:

  • K: Skuid interprets the number entered in thousands, appending three zeroes ($30,000)
  • M: Skuid interprets the number entered in millions, appending six zeroes ($30,000,000)
  • B: Skuid interprets the number entered in billions, appending nine zeroes ($30,000,000,000)

Note

The number does not change in format until the user exits Edit mode or saves the update to that record.

Use a character counter in string and textarea fields [[]]

A character counter helps users know when they are approaching the content limit for text entry fields and encourages them to make input more succinct. Skuid property Show Length Counter adds a counter for string fields and the larger textarea fields:

  1. Click the string or textarea field within the component.
  2. In the Field Properties pane, check Show Length Counter.

When editing the field, users will now see a character countdown (“25/ 128”) that indicates the number of characters used (the first number) and how many total characters are allowed (the second number).

Note

  • The counter is enabled by default for standard textarea fields.
  • The counter is not available for Salesforce rich text area type fields.

Change the field character limits [[]]

When using the counter, the character limits are preset by the data source. (For example, Salesforce sets a limit of 128 characters for string fields, and 3200 characters for textarea fields). These limits are set by the field’s metadata.

To change the limit:

  1. Click the model with the field whose limit you want to override, then click Fields.
  2. Click the specific textarea or string field.
  3. In the Field Description pane, check Override field metadata.
    • Under Length, set the length to the desired number of characters.
  4. Click Save.

For more information on field metadata overrides, see Field Metadata Overrides.

Properties

Field Editor Properties

Basic tab [[]]

  • Model: The model that contains the fields the Field Editor displays. Revisions made in the Field Editor affect the model selected here.
  • Show save/cancel: If true, Save/Cancel options will appear allowing users to save changes made within the Field Editor. If false, the Save/Cancel buttons will not appear above the component.
  • Button position: Controls alignment of Save/Cancel buttons above the Field Editor. Options are:
    • Left
    • Right
  • Default mode: Select the default record interaction for users. Options are:
    • Read with Inline-Edit (default): All fields will appear in read mode but can be edited on click if a user has permission to do so.
    • Edit: All available fields appear in edit mode on page load.
    • Read-Only: All fields appear in read-only mode regardless of user permissions.

Display tab [[]]

  • Field Layout: Control where labels appear in the Field Editor
    • Label Beside Field: Field labels will appear to the left field of field data. Default selection for Field Editor
    • Label Above Field: Field labels appear directly above field data. Can be used to save horizontal space to accommodate design needs.
  • Column Layout: Allows you to adjust several aspects of columns in the Field Editor, including:
    • Column Layout Mode: Can be Fixed or Responsive according to end user needs. If Responsive:
      • Column Gutter Size: Adjusts the amount of whitespace between columns in the Field Editor
      • Column Row Size: Adjusts the amount of horizontal whitespace between rows within columns in the Field Editor.
  • Errors: Choose whether error messages appear inline (next to the field), or only inline if the user hover over the field.
  • Advanced:
    • Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.
    • CSS Class (optional): Assign a CSS class to the component’s DOM element.
    • Save Icon: Click the icon selector to choose the icon that displays on the Save button.
    • Cancel Icon: Click the icon selector to choose the icon that displays on the Cancel button.

Rendering tab [[]]

Standard conditional rendering options are available.

Column Properties

Basic tab [[]]

Rendering tab [[]]

Standard conditional rendering options are available.

Section Properties

Basic tab [[]]

  • Show Section Header: Toggle section title text at the top of a section.
  • Section Title: Update text that appears in section header.
  • Collapsible?: Choose how sections will appear on page load. Sections are not collapsed by default.
  • CSS Class: (optional) Assign a CSS class to the component’s DOM element.

Rendering tab [[]]

Standard conditional rendering options are available.

Field Properties

Once fields are added to the Field Editor component, each field has a specific set of properties. These properties vary, depending upon the field type. Click on the field within the Field Editor to reveal and edit its properties.