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 end users through the process of updating a record on a single page

After you add a Form to the page, adding columns, sections, fields, buttons, and images to the Field Editor allows for more specific user experiences, directing 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. Buttons and Images can be added directly onto the Field Editor within a column or section—like a field itself.

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 end 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
  • Add an image or button by clicking fa-tasks Add Image or fa-tasks Add Button.

    • When you add buttons to the Form component, these buttons have their own properties. All Form button properties are the same as those for Ink Button Set buttons
    • When you add an image to the Form component, the image has its own properties. All Form image properties are the same as those for Ink Image components.

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 end 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 end 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)


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 end 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, end 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).


  • 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.


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 end 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 end 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 end 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.

Display Logic tab [[]]

Standard conditional rendering options are available.

Column Properties

Basic tab [[]]

Display Logic 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.

Display Logic tab [[]]

Standard conditional rendering options are available.

Field Properties

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

Template Fields

Add Template fields from the Add Fields dropdown on the Table.

Template fields—much like the Template component—provide a way to display arbitrary text or HTML alongside field data. Other fields may be included within a template field through the use of merge syntax.

A basic template field for a full name may look like this:

{{FirstName}} {{LastName}}

It is also possible to update any fields included within a template field at runtime by double-clicking the Template field within the component.

For additional information, see the Template component topic.


Chatter Feed and Rich Text Field Incompatibilities in Visualforce [[]]

Using the Chatter Feed component in the same page as a Field Editor with a rich text field is not supported when the Skuid page is published in Visualforce.

This is due to incompatibilities in the rich text editor plugin (CKEditor) used by each component when in the Visualforce runtime. Consider publishing in Lightning experience or separating these components into different pages if you must publish in Visualforce.