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. If multiple records are present in the model, a Form will appear for each separate record.

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

Other Features

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

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

Rendering [[]]

Standard conditional rendering 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.

Rendering [[]]

Standard conditional rendering options are available.

Field Properties

Basic Tab [[]]

Note

Available properties may vary by field type

  • Field Id: The label that appears next to editable sections within the Form. Default Field Id is “Description.”
  • Custom Label: Replaces default field label with custom text.
  • Show Inline Help: Will add a tooltip to your form field when help text is set within the Override Field Metadata prop on the model. For more information on field metadata overrides, see Field Metadata Overrides and Cross-Object References.
  • Read-only: If true, text fields are read only and cannot be edited by users.
  • Placeholder: Text or prompts that appear inside editable sections within the Form.
  • Rows to Display: Set the number of visible lines of text to display for text area fields. If left blank, the text area will auto-expand to display the full content.
  • Required: If true, text input is required.
  • Max Characters to Display: The maximum amount of characters displayed in a textarea before an ellipsis is added
  • Show Length Counter: If true, indicates the number of characters used (the first number) and how many total characters are allowed (the second number).
  • # of Decimal Places: (Currency and measurement fields) Choose the number of decimal places. Options: 0-8 or use the field’s metadata to determine the number of decimal places.
  • Display As: Determines how numeric values are entered in Edit mode.
    • Number: Enter the value as a number.
    • Slider: Enter the value as a position on a slider.
      • Minimum Value: The starting numerical range for the slider.
      • Maximum Value: The ending numerical range for the slider
      • Step: The increments used in the slider.
    • Stepper: Enter the value via an entry box with “+” and “-” handles to increment or decrement the numeric value
      • Minimum Value: The starting numerical range for the stepper.
      • Maximum Value: The ending numerical range for the stepper
      • Step: The increments used in the stepper.
  • Tokenize autocomplete search: If checked, each word typed into the search bar is “tokenized” — meaning each word is searched for individually. A tokenized search for “George Washington” returns any record with “George” and “Washington”. For example, “George Washington,” “George Michael Washington,” and “George is headed to Washington”. An untokenized search for “George Washington” returns only records with “George Washington” exactly.

Search tab [[]]

The Search tab is available on reference fields and allows users to search for content from within the model (or from a selected model) when editing a reference field.

This tab lets you format the field search experience. (Looking for standard Search properties? See the Filters and Search tab.)

Search Properties [[]]
  • Option Source:
    • Automatic: Searches for and lists possible content options from within the object/entity the reference field is referencing.
    • Model: Searches for and lists possible content options from any model on the page.
  • Display Template: Select fields to use (via merge syntax) as the template for the returned list of items for a search.
  • Search Template: Select fields to use (via merge syntax) as the template for the Search list.
  • Visible Rows: Determines the amount of results available from the model (5, 10, 25, 50, Show all)
Search Fields [[]]

Note

Depending on the data source used for the model attached to the component, this property may not be available.

  • Use SOSL to improve search performance (Salesforce data sources only): SOSL quickly can search multiple objects at a time within a single search query. SOSL does not directly search the database, but instead queries an index of Salesforce text fields. Individual search fields may not be added when this property is enabled.

    Warning

    Because the search is against the index, results are limited to what is present in the index, and will not include data that may have been recently updated in the database. The index updates very quickly, but expect a delay of up to 30 seconds between changes made to the database, and their appearance in the search results.

    Note

    SOSL can search Text fields (including Long Text fields), but not Picklist fields and Reference fields.

    • Fields to Search: Sets which Types of fields to query with SOSL. The options are:

      • Name Fields (default)
      • All Text Fields
      • Email Field
      • Phone Fields
      • SideBar Fields (Name, Phone, Email, External Ids)

      Searches on Salesforce data sources can use one of two query languages: SOQL or SOSL. SOQL can only search one object at a time in a single query, but searches all searchable fields in that object in real-time.

  • Fields: Skuid searches on searchable fields by default. Search can be narrowed to individual fields by clicking add Add new Search Field, and then using the field picker to select the field.

    Note

    • (Salesforce data sources only) SOQL can search Picklist fields and Reference fields, but not Long Text fields.
    • You can add multiple search fields.
    • Search Operator: Select from the following logical operators:

      • =
      • starts with
      • Contains
Skuid on Salesforce [[]]

By default, Salesforce Objects use SOQL. To ensure proper functionality, enable the Allow Search property on any Salesforce objects to be included in the search.

For more information on using these search options with Salesforce, check out Salesforce’s SOQL and SOSL Reference Guide.

Filters tab [[]]

In partnership with the settings in the Search Tab, the Filters tab lets you create Lookup Filters for the reference fields to limit the search/display content provided when editing reference fields. returned in reference field lookups.

Click add Add New Lookup Filter and set the following properties for Lookup Filter conditions:

  • Field: The field in the current model to use as a filter for the searchable reference field.
  • Operator: The relationship between the field and its filter content.
  • Content: The type of value used to filter the reference field’s data.
    • Single specified value: Returns records that meet the specified value.
      • Value: Indicate the value to filter by.
    • Multiple Specified Values: Returns records that meet at least one of the several specified values.
      • Values: Indicate the values to filter by; for each separate value click Add Another Value.
    • Field from another model: Use a field from another model as the filter for the Lookup field.
      • Source Model: The name of the model.
      • Source Field: Field on the source model.
      • If no row in Source Model, then …
        • Deactivate this Condition
        • Abort this Model’s Query
    • Page/URL Parameter value (Skuid on Salesforce): Returns records that meet the specified Salesforce Lightning page or URL parameter, for example, the id parameter.
      • Parameter: Indicates the specific parameter to filter by.
      • If this Parameter is not provided, then …
        • Set its value to Blank
        • Deactivate this Condition
        • Abort this Model’s Query
    • Skuid user attribute: Returns records if the value of a field on the model matches the value of a field on the current user’s record.
      • Specify User Attribute: The value on the current user’s record to be used as a filter, usually an Id property. Options include:
        • Default Currency
        • First Name
        • Last Name
        • Email
        • Locale
        • Name
        • Organization Id
        • Organization Name
        • Profile Id
        • Profile Name
        • Session Id
        • User Id (default)
        • User Name
        • Use Rowl Id
        • User Type
        • Is Multi Currency Org
    • None - blank value: Returns records only if the specified field is empty.
    • Another field from row: Returns records only if the field on the referenced record matches a separate field on that same record.
      • Depends On: Select the field to compare with.

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.

Rendering [[]]

Standard conditional rendering options are available.

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.