Using Fields¶

Adding template fields¶

Add template fields to a Table or Form component from the Add fields dropdown on the component.

Then adjust the Template’s properties:

• Use the field picker on the Template property to select fields to combine within the template. The fields selected display in the property surrounded by double curly brackets {{field selected}}.

  • Make any spacing adjustments (add spaces, dashes, or commas).

• If desired, modify the field’s Label. This will re-name the field label (or the column heading in a Table component).

Template fields in runtime¶

Users can double-click on a template field to open a popup where they can see the fields the template includes and edit them (if applicable).

Using HTML in fields¶

When the Allow HTML property is checked, any HTML markup within the field value will be parsed and rendered per the markup.

This can be useful for introducing paragraph formatting in large text fields, or templates that include combinations of fields using merge syntax, such as a mailing address:

<p>{{Name}}</p>
<p>{{MailingStreet}}<br>
{{MailingCity}}, {{MailingState}} {{MailingPostalCode}}<br>
{{MailingCountry}}</p>

It’s also possible to use this feature for other, more advanced HTML elements.

General tab [[]]¶

• Field ID: The API name of the selected field.

• Show inline help (Available on Form components): Determines how Skuid displays any help text associated with this field, whether through its metadata or a field metadata override.

  • As help icon tooltip: When selected, a help icon appears beside the field’s label. Hovering over the icon causes the tooltip to appear and display the help text.

    • Tooltip position: Determines where the tooltip containing the help text appears in relation to the icon/field.

      Note

      Skuid attempts to render the help text in the selected position, but if this is not possible due to height/width constraints at runtime, the help text may render in a different position.

    • Tooltip style: Determines which style variant to use when the tooltip is displayed.

    • Tooltip compact size: Determines whether to use the options specified in the Compact section of the chosen tooltip style variant, which have smaller line height, font, and padding settings by default.

  • As underline tooltip: When selected, the field’s label is underlined to indicate a tooltip is available. Hovering over any part of the label causes the tooltip to appear and display the help text.

    • Tooltip position: Determines where the tooltip containing the help text appears in relation to the icon/field.

      Note

      Skuid attempts to render the help text in the selected position, but if this is not possible due to height/width constraints at runtime, the help text may render in a different position.

    • Tooltip style: Determines which style variant to use when the tooltip is displayed.

    • Tooltip compact size: Determines whether to use the options specified in the Compact section of the chosen tooltip style variant, which have smaller line height, font, and padding settings by default.

  • Below label: When selected, help text appears directly beneath the field label. The help text is always present and can’t be dismissed.

  • Hidden: No help text is displayed.

• Label/Custom label: The name for the field (or template field). Replaces default field label with custom text. Use the field picker to select a field to use as the column label.

  Note

  This feature lets you choose another field’s name and re-label the column with it, to shorten or clarify the column’s identity or purpose for users.

• Placeholder: Text or prompts that appear inside editable sections within the component. Commonly used to provide instruction for more complex field requirements, this field is compatible with merge syntax.

• Read-only: If checked, text fields are read only and cannot be edited by users. This setting does not persist across Skuid pages.

  Note

  Skuid automatically respects the validation rules and field-level security from your data source.

• Required: If checked, text input is required.This setting does not persist across Skuid pages and will not override existing data model settings within the data source.

  Note

  Skuid automatically respects the validation rules and field-level security from your data source.

• Clip heading text: If checked, if a column’s heading text exceeds the size of the column, the text is truncated (with ellipses indicating additional content.)

• Horizontal alignment: Adjusts alignment of text or value within a field to left (default) or right.

• Display as: Determines how values are entered in Edit mode.

  • Text (String fields): Renders the field as text.

  • Password (String fields): Renders the field as a password, with the content hidden by asterisks.

  • Picklist: (Reference fields) Renders the reference field options as a picklist: a dropdown menu of selectable options.

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

    Note

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

  • Button Group: (Picklist fields) Renders the field as a set of buttons.

  • Combobox (Picklist fields): Renders the picklist field options as a combobox, a text box in which user entry triggers a dropdown menu. As users type, the menu narrows available options. Users can also access the dropdown using the combobox’s menu selector (chevron-small-down).

    • Enable autocomplete: When enabled, available options are filtered and suggested to the user based on what they’ve entered in the field. Selecting an option then places that value in the combobox.

      Skuid searches for the user’s input across the entire value, so values do not have to match exactly. For example, inputting Example Value would match First Example Value and Different Example Value

  • Date (Date-time fields): Renders the field as a date.

  • Datetime (Date fields): Renders the field as a datetime.

  • Autocomplete: (Reference fields) The default for reference fields, this renderer tries to autocomplete entries based on the options available for this field.

  • Checkbox (Boolean fields): Renders the field as a checkbox.

  • Switch (Boolean fields): Renders the field as a toggle switch.

  • Custom:

    • Display method: Sets a custom display method defined in JS snippets.

    Numeric field types have different field renderer options:

  • Number: Renders the field as a number.

  • Slider: Allows the user to 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: Allows the user to 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.

• Add “None” option: Includes a null value in the list.

  • None Option Label: Sets the text for the “None” option.

• Limit # values to: For reference fields rendered as picklists, restricts the number of allowed values on the picklist.

  Note

  The default behavior displays all values for the field. However, if the field includes a large number of distinct values, the page may need to query a lot of data, resulting in a slow page load. Limiting the number of picklist options reduces the query and load time.

• Allow user to hide/show?: Permits the user to show or hide columns using the Table Setting modal, and determines whether the selected column is shown by default.

  • Yes, and show the field by default
  • Yes, and hide the field by default
  • No

  Note

  This property is available when Allow column hiding is checked in the Display tab’s Configuration section (in Table properties).

• Column summaries: (Number fields) Add summaries to the bottom of each column: Sum, Average, Min, Max, or Median. Enter the value as a:

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

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

• Show length counter (Textarea fields): When the field is in Edit mode, it displays a character countdown (“25/ 128”) indicating the number of characters used and how many total characters are allowed.

  Note

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

• Template: (Template fields) Specifies which fields the template field should include by either selecting them from the field picker, manually entering their merge variables, or using custom text.
• Sort field: (Template fields) When sorting is enabled for the table, specifies which of the template’s fields to use for sorting.

Search tab [[]]¶

(For reference fields)

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

Search properties [[]]¶

• Option source:

  • Automatic: Searches for and lists possible content options from within the object the reference field is referencing.

  • Model: Searches for and lists possible content options from any model on the page.

    • Option model: If using “Model” as the Option source, the name of the model.

• Display template: Determines how the reference field’s selected value is displayed. Configure the template with fields (via merge syntax), text, and formatting.

• Search template: Determines how reference fields display in the search dropdown. Configure the template with fields (via merge syntax), text, and formatting.

In this example, the display and search templates are configured with merge syntax and text.

Notice where the display and search templates appear at runtime.

• Visible Rows: Determines the amount of results available from the model (5, 10, 25, 50, Show all)
• 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.

Link tab [[]]¶

(For reference fields)

The Link tab determines whether an end user can navigate to a referenced record’s detail page (or some other custom URL) by clicking on the record in the table. If using the field as a link, you can set the following properties:

• Navigation type:

  • Data source default: If a data source type has default behaviors configured for reference fields—for example, navigating to a detail page using the record ID a la Salesforce—then that behavior will be used in Skuid.

  • No link: The reference fields will display as unclickable plain text.

  • Skuid page: Set the field to link to a Skuid page.

    • Skuid page: The name of the linked Skuid page.

  • Custom URL: Set the field to link to a specified URL.

    • URL: The URL that an end user will be taken to. Can accept merge syntax, which can be particularly useful for URL parameters.

    • Open URL in:

      • Current Window:

        • Opens the URL in the current window.
        • If using the Skuid page is within an iFrame, opens the URL in the current iFrame.

        Note

        Other content blocks on the page will remain the same.

      • New Tab: Opens the URL in a new tab.

    Note

    Custom URL navigation links are not fully supported in Lightning apps with console navigation and behave differently than other navigation types.

    To accomplish the tab-opening behavior expected in the console, we recommend using the Go to URL action.

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.

  Note

  To refresh available style variant options, click refresh Refresh style variants.

  This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

Interactions tab [[]]¶

(For template fields on Table and Form components)

Click add Add interaction then select:

• Action type: To initialize the display of the record details, choose the interaction:
  • Click: Best for desktop, as well as mobile.
  • Right-click: The right-click interaction will launch the actions added here. A common pattern is to create a customized context menu by using the Show/hide menu action.
    • Disable the browser’s default menu?: Override the browser’s context menu for the Skuid page, component, or element. If the browser’s context menu is not disabled, then the actions will run while the browser’s context menu appears on screen.

In the dots-vertical More Options menu on the selected interaction, click Add action, then edit the Action Type:

• Action Type: Use the Action Framework to launch actions.

Filters tab [[]]¶

(For reference fields)

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

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

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

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

    • Userinfo Property: 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 role 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.

Advanced tab [[]]¶

(For date- or time-related fields)

• Show month & year picker: If checked, Skuid displays month and year pickers during Edit Mode, to make it easy to jump to a specific year.

  • Year picker lower bound and Year picker upper bound: Sets the upper and lower boundaries of the list of possible years. Options include:

    • “Selected” measures from a date selected on the Date Picker. Increments are 1-10, 20, 30 40, 50, 60, 70, 80, 90, and 100.
    • “Today” measures from the current date. Increments are 1-10, 20, 30 40, 50, 60, 70, 80, 90, and 100.

• Show today button: If checked, the month/year pickers include a Today button that allows users to quickly jump to the current date.

• Minute picker increment: For editable date-time fields, select the minute increments (1, 5, 10, 15, 20, 30) for the displayed Time Picker.

Display logic tab [[]]¶

Standard display logic options are available to display or hide the component or feature.