Table¶

Sticky headers¶

If the height of the Table component is shorter than the amount of data being displayed—in other words, the Table contains more records than can be seen at one time on the screen—the end user can scroll through the data. In this case, the header remains visible at the top of the Table (a “sticky header”) no matter how far a user scrolls down.

Change the field character limits [[]]¶

When using the counter, the character limits are preset by the data source. (For example, Salesforce sets limits for string fields and 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’s description pane, check Override field metadata.
   • Under Length, set the length to the desired number of characters.
4. Click Save.

Basic Tab [[]]¶

• Model: The model the Table will display data from.

  Note

  When you have multiple models, make sure you select the correct one!

• Default Mode:

  • Read with Inline-Editing: Displays records in read mode on page load. End users can click edit Edit to convert to Edit mode. (Checked by default.)
  • Edit: Records display in edit mode on page load; end users can toggle individual records to read mode by clicking edit Edit. Edit mode is best used for new, clone, and edit pages where you want all table rows open for editing.
  • Read-Only: Records display in read mode and cannot be edited.

  Note

  Skuid works with your data source’s security settings so users will not be able to edit records they don’t have permission to edit (even if the table is set to Edit mode). While you should not use this as a security measure, setting the Default Mode to Read-Only ensures that the end user can not edit the Table’s content on the page.

• Allow Users to Sort by Column: Check this box to display buttons that allow end users to sort the table by this column’s values, both ascending and descending. (Checked by default.)

  Note

  Columns with sorting allowed have clickable triangles: up-pointed triangles sort the column in Ascending (Z to A) order; down-pointed triangles sort the column in Descending (A to Z) order.

  Warning

  To retain record cohesion, sorting an individual column simultaneously reorders the rest of the table. For this reason, sorting should be used judiciously. It is also recommended not to use more than one sorted column per table.

• Sort Columns client-side: If a field on a table has Allow Sorting checked in the Field properties, additionally checking Sort Columns client-side means that Skuid will only sort the column field data that is currently loaded on the page. If end users commonly need to sort only the data they have loaded within the page—as opposed to every record on the server—this property may speed the filter process.

  Warning

  If the server contains a large data set not yet loaded into the page, but Sort Columns client-side is set to Client, the data in the column will represent only a subset of the complete data set. This may result in unexpected omissions.

• Enable Export: Check to display the Export Table Data option in the More Actions dialog, allowing end users to export the entire table (or selected rows) as a spreadsheet. See Export properties.

• Show Save/Cancel: Check to display the Save/Cancel buttons above the table. (Checked by default.)

• Table Title: The title that displays above the Table. (If left blank, the Table does not have a title.)

Search tab [[]]¶

In this tab are properties that control whether or not you have a search box, and when search terms and conditions are applied.

Display tab [[]]¶

Styles tab [[]]¶

Global styles for this component are set in the :docs_url:`Design System Studio <skuid/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.

Basic tab [[]]¶

• Field ID: The name of the selected field.

• Custom Label: Use the field picker to select a field to use as the column label. 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 end users.

• Read-only: Check this box to prevent end users from editing this field on this specific Skuid Table. This setting does not persist across Skuid pages.

  Note

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

• Required: Check this box to require end users to have data within this column when saving on this specific Skuid Table. 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.

• Column Width (Fixed): The fixed width of the column, in percentages (indicated as %) or pixels (indicated as px).

  Warning

  Do not mix the use percentages and pixels across columns. Choose one measurement format and stick with it.

• Horizontal Alignment: Choose whether the column content is aligned left (default) or right.

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

• Placeholder: Whenever a new row is created within the Table, this placeholder text appears until the end user enters a value. Commonly used to provide instruction for more complex field requirements. This field is compatible with merge syntax.

• Show Length Counter: 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.

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

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

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

Search tab [[]]¶

The Search tab is available for reference fields when the Table 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.

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

Link tab [[]]¶

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

  • Route: Set the field to link to a route in Skuid Platform.

    • Skuid Route: The name of the route.

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

    • URL: The URL that a 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.

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.

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

Advanced tab [[]]¶

The Advanced tab includes properties for date- or time-related fields.

• Show Today Button: If checked, the month/year pickers include a Today button that allows users to quickly jump to the current date.
• 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.
• 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.

Template Field properties [[]]¶

• Label: The label for the Template field.
• Template: 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.
• Read-only: Records display in read mode and cannot be edited.

Using Template fields¶

Template fields—much like the Text component—provide a way to display arbitrary text 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.

Export Options [[]]¶

• Use Table Columns as Export Columns: If checked, the Table will export all columns added to the Table. If unchecked, Export Columns is displayed in the Properties Pane allowing users to add new columns and customize which fields are exported.

  Note

  Checking Allow Users to Show/Hide Column on a field’s properties will not affect which columns are exported. If users hide columns within a Table, their export will still include all columns within the component.

• Append Row Id Column: If checked, a column will be added to the export which contains the Id of each exported row.

• Attempt to Load in all Records Before Export: If checked, Skuid will load every available record before exporting.

  Warning

  Some data sources may limit how many records are returned in one call. If a call tries to return records that exceed a data source’s stated limit, an error will be returned and the export will fail.

• Custom File Name: If set, the value of this field will be used as custom name for the exported CSV file.

Export Columns [[]]¶

These properties allow end users to configure and customize the columns they’d like to export into a CSV file.

• Column Type: The type of column used in the export:
  • Field: This option allows you to select a single field for export. Unselected columns will not be exported.
    • Field: The specific model field to export, selectable from picklist populated with fields from the connected model.
    • Header type: Determines what column header text is displayed in the exported CSV:
      • Use Field Label: If checked, the exported CSV will display the field’s Label metadata, which is often a less-technical, human-readable name. For example: Account Name or Employees
      • Use Field API name: If checked, the exported CSV will display the field API name, which is often used by systems for data import or other backend processes. For example: Name or NumberOfEmployees.
      • Custom label: If checked, the exported CSV will display a custom label instead of any associated label or API name.
        • Label: The custom text to be displayed as a column header.
  • Template: Use template column types to include multiple fields in one column through merge syntax.
    • Template: Specifies which fields the template should include by either selecting them from the field picker, manually entering their merge variables, or using custom text.
    • Label: The custom text to be displayed as a column header.