The Property Library¶

Basic tab [[]]¶

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

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

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

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.

  • Route: Set the field to link to a Page URL slug in Skuid Platform. (This will create a link to that page.)

    • Skuid route: The name of the route.

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

Styles tab [[]]¶

Interactions tab [[]]¶

(For template fields on Table and Form components)

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

  • 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 [[]]¶

General tab [[]]¶

• Model ID: The unique name by which components refer to this model. Each model must have a unique name within one Skuid page. If other pages are included within that page—such as through the Page Include component or child pages—then the models in those pages must also have unique names.

• Data source type: The data source type <data/> to use for this model, which narrows the selectable options in the Data Source property.

• Data source: The data source <data/>—a connection to a system that has been configured by the Skuid builder—that the model uses to access records.

• Model Object / Entity: The data object to pull data from. The label for this property can vary based on data source type, but they all mean the same thing:

  • External Object Name
  • Model Entity
  • Salesforce Object Name

• Model behavior: Some data sources allow the builder to select a specific type of model behavior:

  • General: The default Skuid model.
  • Aggregate: A model that collects, groups, and summarizes multiple data records into a single end result, such as a sum or a count.
  • Read-only: (REST data sources) A model that can only query (and not update) data.
  • Read/Write: (REST data sources) A model that can use multiple data source URLs for different data operations.

• Query on page load: If unchecked, no data rows are loaded into the model when the page initially loads. Uncheck this box to use this model to create new records, or to load this model later via the Action Framework (for example, opening it in a drawer, popup, or tab).

• Allow Page Render Before Query Completes: Controls whether Skuid must finish loading the metadata for the model before rendering the Skuid page. (Only available if Query on page load is checked.) By default, Skuid loads metadata for every model prior to rendering a page, even those without visible UI components. A model containing a picklist with hundreds or thousands of values could extend page load times, especially if there are many models on a page. Use this property to tailor which models have a higher priority, giving users access to the most meaningful data and UI elements first.

  • When unchecked, the model is considered synchronous—meaning it is given priority and its query must complete before the page renders.

  • When checked, the model is considered asynchronous, and the page will render even if its query is not yet finished.

    Note

    This model property is unavailable for server-side models.

• Max # of records (limit): The maximum number of records that will be pulled in to this model when it is queried. The smaller this number is, the faster your page will load, but the less data available within the page.

• Fields to order records by: Determines how the rows of records are sorted within the model. For basic models this sort statement is written as FieldName SORT, while for aggregate models it’s written as FUNCTION(FieldName) SORT.

  Two sort commands are available:

  • ASC: Ascending, meaning records of higher “value”—alphabetically or numerically—appear at the bottom of the record list. (If no sort command is specified, ASC is assumed.)
  • DESC: Descending, meaning records of higher “value”—alphabetically or numerically—appear at the top of the record list.

  So to sort a basic model’s rows by its amount field in descending value, use Amount DESC. Or to sort an aggregate model’s rows by an aggregation that sums the amount field in descending value, use SUM(Amount) DESC.

  Multiple sort statements can be used in this property when separated by a comma. Sort statements are applied in the order they appear.

  For example, to order a model’s rows alphabetically—ascending—by the Name field and then by their Number field descending, enter the following:

  Name, Number__c DESC

  (Note that the first sort statement works because ASC is assumed.)

  Note

  If used on a Salesforce data source model, this property is also compatible with the NULLS FIRST and NULLS LAST syntax.

• Create default row if model has none: When checked, a new record will automatically be created if there are no records within the model on page load. Useful for “Create New Record” pages.

Advanced tab [[]]¶

• Prevent users from leaving page if this Model has unsaved changes: When checked, a dialog box will appear to prevent users from leaving the page if there are unsaved changes in this model. If unchecked, users can leave freely but may potentially lose data changes within this model, so determine the best behavior for your use case.

• Model label: If the model’s selected object does not have a singular label—such as Account—this property can be used to specify one. However, if a label is specified for the object within the data source this property has no effect. (Correlates with the {{Model.label}} merge variable for a model.)

• Model plural label: If the model’s selected object does not have a plural label—such as Accounts—this property can be used to specify one. However, if a label is specified for the object within the data source this property has no effect. (Correlates with the {{Model.labelPlural}} merge variable for a model. Commonly appears at the bottom of paginated components—like Tables or Decks—and in Page Title components.)

• Defer rendering: When checked, fields specified by the data source type or marked in the Fields to Defer property will load asynchronously—meaning all other fields in the model may load and display in any components as soon as they are loaded. Deferred fields display placeholder text while they load and do not prevent other fields from rendering. Useful for fields that may incur longer load times, such as image fields or other binary files.

  Note

  While some data source types allow for deferred fields to be specified, some will not. For data source types that do not, the Fields to Defer property will not appear.

• Fields to defer: Available for some data source types, this property sets which fields should load asynchronously. Requires Defer Rendering to be checked.

Basic Tab [[]]¶

• Page name: The name given the page when it was created.

• API version: The API version the page is built on.

  Note

  The API version selected at page creation determines the features available to the page. You may only use the components associated with a page’s API version. Also:

  • The API version of both master and child pages must match.
  • The API version of a host page must match the API version of the Page Include component calling that page.

• Page title: The content used in a browser’s title bar or on a tab label. (Optional)

• Max auto-Saves: An auto-save revision is generated each time a Skuid page is saved, allowing builders to undo recent changes. The number of auto-saves a page can generate is limited by the Max auto-saves property. Auto-save revisions are deleted—oldest first—once the page reaches this Max auto-saves limit.

  Note

  Despite the name, Skuid pages do not automatically save as they would in a productivity app, like Microsoft Word or Google Docs. Clicking the Save button generates an auto-save that is available to you as a page revision.

• Design system: The name of the design system that governs the page styling. Choose from the dropdown.

• Warn users if page has unsaved changes: If checked, when a end user tries to close the page when there are unsaved changes, Skuid issues a warning.

  • No
  • Yes (default)

• Personalization mode: Indicates where user personalizations—remembered settings like selected tabs, filter values, etc.—are stored.

  • Client-side: Use for non-authenticated users (visitors to a public-facing website, community and portal users).

    Note

    Even if server-side is chosen for the page, non-authenticated users are defaulted to client-side storage for personalizations.

  • Server-side: Allows Skuid to sync user personalizations across multiple devices. (Default)

• Available as a master page: When checked, the page can be selected as a master page when creating new pages.

Layout tab [[]]¶

• Show custom header and Show Custom footer: When checked, the page displays a custom header or footer, which are separate page elements than the main canvas.

To learn more, see Create a Master and Child Page, which employs a custom header and footer in the master page.

Interactions tab [[]]¶

Adds interactions—actions from the Action Framework—to the page. Page-level interactions extend to the full page—a click anywhere on the page triggers the interaction.

Styles tab [[]]¶

• Background: All Page background properties are the same as the Wrapper background section

Skuid Platform only¶

Skuid Platform includes two additional tabs.

Skuid on Salesforce only¶

Skuid on Salesforce includes one additional tab.

General tab [[]]¶

• One panel open at a time: If checked, only one panel of the accordion can be open at a time. If the end user opens a new panel, the previously-opened one closes.

• Sections initially open: If One panel open at a time is unchecked, builders can determine which panel to open upon page load:

  • First section: Opens the first Accordion section.
  • All sections: Opens all Accordion sections.
  • Determine by section: If selected, opens a new Section property called Initial state (see below) to determine the open state of the selected section.
  • None: No Accordion sections are open upon page load.

• Open panel max height: The height of the component section (minus the section title), measured in pixels, em, rem, percentage, vh, or vw.

• Icons on right: If checked, each section displays clickable icons that allow the user to expand and collapse the section.

• Icon style: There are two ways to format the section icons:

  • One icon: A single icon is used to open and close each section. (The selected icon rotates 45° when the section is open.)
    • Icon: Click the field picker to select the icon.
  • Separate icons for open/close:
    • Icon when opened: Use the field picker to select the icon for an opened section.
    • Icon when closed: Use the field picker to select the icon for a closed section.

Advanced tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General Tab [[]]¶

• Model: Button sets can be attached to one model. Doing so makes all data-related button types—such as Save, Cancel, and Delete—automatically affect the model selected here.
• Position: This field determines the alignment of the buttons within the container. You can choose:
  • Right (default)
  • Left
  • Center
• Expand to fill: The Button Set component extends across the entire width of its container (whether it’s a page, a grid division, or a tab). By default, Button Groups are clustered together within the Button Set and displayed in the selected Position. When Expand to Fill is checked, Button Groups stretch horizontally across the entire area of the Button Set (even if the Button Group only holds one button).

Advanced tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General tab [[]]¶

• Positioning: Determines how the Masthead behaves when the page is scrolled.
  • Scrolls with Page: The Masthead scrolls with all other components.
  • Fixed: The Masthead is fixed to the top of the page and does not scroll (“sticky masthead”).
  • Fixed when at top: If the masthead is not inherently located at the top of the page (for example, it’s beneath a large banner image), it will scroll until it reaches the top, and then become fixed there.
• Unique ID Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General tab [[]]¶

• Type: Controls the visual orientation of the Navigation component.

  • Horizontal: Navigation items align in a straight line from left to right.

    

    • Overflow to menu navigation: If true, any navigation items that do not fit within the horizontal navigation—based on screen size—will be placed into a dropdown menu.
    • Screen Size to Collapse Item Text:
      • Never: The navigation component will not respond to screen size.
      • Tablets and smaller: Navigation will respond to widths of 1024 pixels or smaller.
      • Phones: Navigation will respond to widths of 480 pixels or smaller.
    • Alternate format: Available if Screen Size to Change Format is set to either Tablets and smaller or Phones.
      • Collapse to Menu: The horizontal list will transform into a dropdown menu type at the set screen size.
      • Wrap Centered: The horizontal list will transform into a vertical menu at the set screen size, with navigation items centered in the navigation menu.
    • Menu Icon: Select the icon of the drop down menu (optional).

  • Drop Down: All navigation items are collapsed into a dropdown menu indicated by a down arrow.

    

    • Use Icon: If true, an icon will display beside items in the drop down.

    • Label: Creates a custom label for the collapsed dropdown menu.

      Note

      If the item source selected is Salesforce Apps, the Navigation defaults to the first app listed. To change the label, insert a custom value for the Label Property.

• Item source: Choose the source of navigation menu items.

  • Skuid Platform:
    • Manual
    • User Menu
    • Apps
  • Skuid on Salesforce:
    • Manual
    • Salesforce tabs for current app
    • Salesforce apps
    • Salesforce apps with tabs
    • Salesforce user menu

  Note

  Other than Manual, all options automatically populate menu items.

Advanced tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

Layout tab [[]]¶

• Main Axis: Determines how to align the Responsive Grid divisions.

  Note

  The Ink Responsive Grid has a variety of values to represent the relationships of divisions within the grid. The easiest place to start? Try:

  • Main axis: Row
  • Justify content: Left
  • Align items: Top

  • Row: Aligns divisions in a row.

    • Justify divisions: Determines how the row of grid divisions will justify along a left-right axis.

      Note

      Useful to locate the divisions within the grid when they have both maximum and minimum width set.

      • Left (default): Divisions are justified with the left margin of the grid.
      • Center: Divisions are justified in the center of the grid.
      • Right: Divisions are justified with the right margin of the grid.
      • Space Between: Divisions are evenly spaced within the grid, with the first division justified to the left margin and the last division justified to the right margin.
      • Space Around: Divisions are evenly spaced within the grid. There is spacing between the first division and the left margin, and between the last division and the right margin.
      • Stretch: Stretches the division’s contents to fit the division’s full width.

    • Align divisions: Determines where divisions sit within the grid, positioning them along a top-to-bottom axis.

      • Top (default): Divisions are aligned with the top of the grid.
      • Middle: Divisions are aligned along a center left-right axis of the grid.
      • Bottom: Divisions are aligned with the bottom of the grid.
      • Stretch: Stretches the division’s contents to fit the division’s full height.

  • Column: Stacks division on top of one another.

    • Justify divisions: Determines how the stacked grid divisions will justify along a top-to-bottom axis.

      Note

      Useful to locate the divisions within the grid when they have both maximum and minimum width set.

      • Top (default): Divisions are justified along the top of the grid.
      • Middle: Divisions are justified in the center of the grid.
      • Bottom: Divisions are justified along the bottom of the grid.
      • Space Between: Divisions are evenly spaced within the grid, with the first division justified to the top margin and the last division justified to the bottom margin.
      • Space Around: Divisions are evenly spaced within the grid. There is spacing between the first division and the top margin, and between the last division and the bottom margin.
      • Stretch: Stretches the division’s contents to fit the division’s full height.

    • Align divisions: Determines where divisions sit within the grid, positioning them along a left-right axis.

      • Left (default): Divisions are aligned with the left margin of the grid.
      • Center: Divisions are aligned along the center top-to-bottom axis of the grid.
      • Right: Divisions are aligned with the right margin of the grid.
      • Stretch: Stretches the division’s contents to fit the division’s full width.

• Column gutter size (optional): The distance between divisions when they are displayed as columns, side-by-side. (Typically affects devices with larger screens, such as desktops.)

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

• Row gutter size (optional): The distance between divisions when they are stacked as rows atop one another. (Typically affects smaller screen sizes or mobile devices.)

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

• Full width: If checked, the rightmost and leftmost components will ignore margins and instead sit immediately adjacent to the right and left edges of the page (respectively).

Advanced tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Interactions tab [[]]¶

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
• Remember active tab: If true, Skuid’s personalization framework will remember the last tab an end user was on and will automatically reopen that tab when the user returns to this page.
• Aria label: Add a label to be used by access technologies such as screen readers and conforms to Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) specifications. This property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

Note

If no Aria Label is specified, access technologies will use the Tab label.

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
• Remember active tab: If true, Skuid’s personalization framework will remember the last tab an end user was on and will automatically reopen that tab when the user returns to this page.
• Aria label: Add a label to be used by access technologies such as screen readers and conforms to Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) specifications. This property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

Note

If no Aria Label is specified, access technologies will use the Tab label.

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General tab [[]]¶

• Item source: Choose the source of navigation menu items.

  • Skuid Platform:

    • Manual
    • User Menu
    • Apps

  • Skuid on Salesforce:

    • Manual
    • Salesforce tabs for current app
    • Salesforce apps

    Note

    If an item source selected is Salesforce apps, the Navigation defaults to the first app listed. To change the label, insert a custom value for the Label Property.

    • Salesforce apps with tabs
    • Salesforce user menu

Advanced tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General tab [[]]¶

• Wizard layout direction: Controls how the wizard’s steps are displayed.

  • Horizontal
  • Vertical

• Vertical layout on smaller screens: If checked, when Wizard Layout Direction is set to Horizontal, but the user’s screen is too narrow to display all the steps, the steps will stack vertically.

• Hide step labels: If checked, Skuid does not display the clickable progress indicator labels that appear at the top of the Wizard component. Users must navigate the Wizard using the builder-defined Step buttons at the bottom of the wizard.

  Note

  This option is only available with horizontal Wizard Layout Direction.

• Disable step buttons: If checked, disables the clickable progress indicator buttons. These buttons can then be conditionally enabled using display logic.

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General tab [[]]¶

• Model: Select the model that the filters within the Filter Set will affect.

• Layout: This field will determine how filters are placed within the Filter Set container.

  • Horizontal: Filters and the Reset appear as buttons arranged horizontally.
  • Vertical: Filters are arranged vertically; each filter stretches to fill the horizontal area of the Filter Set. The Reset button is below the filters.
  • Vertical with accordions: Filters are arranged vertically in accordion sections.

• Reset button: Determines when the filter’s Reset button displays:

  • Enable when filters activate: The Reset button is present but disabled on the Filter Set. It is enabled when the user interacts with the filter.
  • Render when filters activate: The Reset button does not display on the Filter Set until the user interacts with the filter.
  • Always hide: The Reset button is always hidden.

  Note

  This setting can be useful when there are only 1 or 2 filters in the Filter Set.

Apply search as you type: By default, the user must click the search icon or enter key to initiate the search. If Apply Search As You Type is checked, Skuid will initiate searches as the user types in search text.

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.

Advanced tab [[]]¶

• Unique ID If you’ll be adding snippets, custom components, or other developer-related additions to your page, assign a specific DOM ID for your button set.
• Apply Icon (optional): The icon on the Apply button. Click the icon selector to choose the icon.
• Reset Icon (optional): The icon on the Reset button. Click the icon selector to choose the icon.

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General 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 and cancel buttons: 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 [[]]¶

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General tab [[]]¶

• Model: The model the Header is connected to, providing fields and context to any merge variables used in the Title and Subtitle properties.
• Title: The text to be displayed as a top-level heading within the component. This property can be a specific string of text, the merge variables of one or more fields chosen with the field picker, or a combination of the two.
• Subtitle: The text to be displayed as a second-level heading above the title. This property can be a specific string of text, the merge variables of one or more fields chosen with the field picker, or a combination of the two.
• Add border separator: Adds a thin rule at the bottom of the component to visually separate it from the component that follows.
• Heading level: Indicates the hierarchical position for this Header component relative to others on the page, with 1 being the highest level. In effect, this wraps the Header’s title in HTML tags. Heading Level 1 = <h1> tags; Heading Level 2 = <h2> tags, and so on. This helps assistive technologies correctly navigate the page using the Header components as outline levels.

Advanced tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Styles tab [[]]¶

• Style variant: The font sizing for Titles and Subtitles is set in the theme using the Design System Studio. To adjust sizes in a specific instance, use the Style Variant. Options are:

  • Default
  • Small
  • Medium
  • Large
  • Extra Large
  • Huge
  • Gigantic

  Note

  These sizes are relative to the baseline determined by the Design System settings.

Display logic tab [[]]¶

Nested elements¶

General tab [[]]¶

• Model: The List will draw and display data from this model.
• Title: The title that displays above the List. (If left blank, the List does not have a title.)

Display tab [[]]¶

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.

Interactions tab [[]]¶

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

When you add items to a List, there are several properties you can modify:

General tab [[]]¶

• Model:
  • None: Select this to add message block content without referencing context or using merge syntax.
  • [Specific models]: All models within the page will be listed as options. To utilize context—for example, to reference a particular field—select a model.

Advanced tab [[]]¶

• Unique ID Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General 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 (default): Displays records in read mode on page load. End users can click edit Edit to convert to Edit mode.
  • 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 dots-vertical More actions dialog, allowing end users to export the entire table (or selected rows) as a spreadsheet. See Export properties.

Warning

Data export is not supported when using the Salesforce Mobile app.

• Show save and cancel buttons: Check to display the Save and 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 [[]]¶

Export tab [[]]¶

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

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

General tab [[]]¶

• Model:
  • None: Select this to add text to the component without referencing context or using merge syntax.
  • [Specific models]: All models within the page will be listed as options. To utilize context in the Text component—for example, to reference a particular field—select a model.

Advanced tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

• Allow HTML: The template—text, HTML, or merge syntax—to use for this page. Use the picker to insert fields from the component’s chosen model as merge syntax. (Fields must be included in the model to be selectable.)

  Note

  Need more space?

  • Click and drag the slash marks at the bottom of the entry field to enlarge that field.
  • Want even more space? Click code-block Resource Editor to open the Edit Inline Code dialog, especially useful when writing HTML code.

Styles tab [[]]¶

Display Logic tab [[]]¶

General tab [[]]¶

• Title: A descriptive name for the modal that will appear in the modal’s header.

• Full screen modal: If checked, the modal displays across the available width of the screen.

  • Width: Adjust the width of the modal using percentage, pixel, or other forms of measurement.

    Note

    This property is not available if Full screen modal is checked.

• Show close icon: If checked, the modal displays an icon at the corner that can be used to close the modal.

  • Close icon (optional): The icon used to close the modal. Click the field picker to select an icon.

• Show header: If checked, the modal includes a header with the Title contained within it. If unchecked, the header (and title) does not display.

• Show button footer: If the Builder clicks add Add Button in the modal, this determines whether that button displays. If checked, the modal includes a footer with one (or more) button. If unchecked, the footer—and the buttons–do not display.

  • Footer button alignment: Choose the alignment of the added buttons:

    • Left
    • Middle
    • Right

Advanced tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the modal; if preferred, give it a practical name.
• Moveable: If checked, end users can move the modal to a different location on the screen.
• Resizable: If checked, end users can resized the modal.

Styles tab [[]]¶

After-close actions tab [[]]¶

Set actions that will occur once the modal is closed.

Nested elements¶