Form

Skuid’s Form 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 Form shows details for a specific record, which can be updated inline.

Using the Form Component

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

Adding sections and fields to a Form allows for a more specific user experience, guiding users through the exact steps necessary to input or update required information. Sections and Rows provide great control of where editable fields appear, but also affect the order in which items are read on a Skuid page. When a Field is added within Sections, a Row is generated containing that field. Fields add specific instruction or guidance through labels and additional prompts.

Sections

  • Add Sections by highlighting the Form component and clicking Add Sections.

    • Sections are adjustable in the Properties pane where you can turn section titles on/off and edit section titles.

  • Remove Sections by clicking delete Delete on the section

  • Add Fields to sections by highlighting the section, clicking Add, and selecting Model Field(s) from the dropdown menu.

    • Add a Field you want end users to read, edit, or both from the model associated with the Form component, Javascript templates, images, or column sets.
    • Adding a field will generate a Row. You can add multiple fields to a row by highlighting the row and clicking Add.

    Note

    Rows have no configurable properties. When a Row is selected, the Properties Pane will be be blank.

Best Practices

  • While having a Save/Cancel button directly above the Form 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.
  • If your model contains many records or is a related list, consider using a Table component instead.
  • While Forms 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.
  • There is no limit on how many fields you can add to a row, but it’s best to only use two to three. Adding more than three fields makes the form content difficult to read and navigate.
  • Form components only display data for a single row, based on context. If there are multiple rows in the model, the component will not render a new instance for each row, in contrast to Skuid’s v1 Field Editor component. If you wish to display information about multiple rows, consider using a Deck component to iterate over rows and nesting this component within it.

Other Features

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

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

Component Properties

Basic tab [[]]

  • Model: The model that contains the fields the Form displays. Revisions made in the Form affect the model selected here.

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

    Note

    Forms are most easily read in Edit mode.

    • Read-Only: All fields appear in read-only mode regardless of user permissions.

  • Show save/cancel: If true, Save/Cancel options will appear allowing end users to save changes made within the Form. If false, the Save/Cancel buttons will not appear above the component.

Display tab [[]]

Errors section
  • Show Errors Inline: Display messages next to the field
  • Show Inline Error Only on Hover: Only displays the message inline if the end user hovers over the field.
Advanced section
  • Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.

Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • Style Variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid Builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

  • Spacing: Sets the spacing of the Header relative to other components on the page. Spacing can be managed for Top Margin, Bottom Margin, Left Margin, Right Margin. All margins can be set to one of the following:

    • None
    • Extra Small
    • Small
    • Reduced
    • Regular
    • Increased
    • Large
    • Extra Large
    • Huge

    Note

    These sizes are relative to one another; the baseline is determined by Design System settings.

Display Logic tab [[]]

Standard display logic options are available.

Section Properties

Basic tab [[]]

  • Show Section Heading: Toggle section title text at the top of a section.
  • Section Heading: Update text that appears in section header.

Display Logic tab [[]]

Standard display logic 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

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.

Troubleshooting

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

Using the Chatter Feed component in the same page as a Form 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.