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 and Cross-Object References.

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.

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

Basic tab [[]]

  • Field Id: The label that appears next to editable sections within the Field Editor. Default Field Id is “Description.”

  • Custom Label: Replaces default field label with custom text.

  • Placeholder: Text or prompts that appear inside editable sections within the Field Editor.

  • Read-only: If true, text fields are read only and cannot be edited by users.

  • Required: If true, text input is required.

  • Rows to Display: Controls number of text lines in a field. If blank, text area will auto fit.

  • Horizontal alignment: Adjusts alignment of text or value within a field.

  • Field Renderer: Determines how the column will actually display at runtime. All fields have the option of:

    • Standard: Use standard Skuid field renderers, which are based on the type of field selected. (Default setting.)
    • Password: Marks the field as a password input—hiding all characters as asterisks both in Read and Edit mode for all records in the table.
    • Custom (run a Snippet): Use custom-coded table field renderers to take advantage of Skuid’s JavaScript API.
    • Render Snippet Name: The name of the snippet that serves as the renderer.

    Certain field types have different options:

    • Radio Buttons: (Picklists only) Renders the field as radio buttons.

    Note

    For multi-select picklists, Skuid renders a multi-select list of checkboxes instead.

    • Auto-Complete: (Reference fields only) The default for reference fields, this renderer tries to autocomplete entries based on the options available for this field.
    • Picklist: (Reference fields only) Renders the reference field options as a picklist.

Warning

This feature is best used by advanced users to solve specific user experience needs regarding data display.

Display Logic tab [[]]

Standard conditional rendering options are available.

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.