List

A data component, the List displays a roster of record items, which can be formatted in a template using merge syntax to control how the items render. This component allows end users to employ on-click actions from the List items to launch actions in other components on the page.

Using the List Component

While typically employed with the Action Framework to update Page Includes on the page, the List can be used for a variety of purposes.

One common use case for this component is to put a List in a Responsive Grid section that lists records by name. When a name is selected, data from a different Skuid page is displayed via a Page Include (in another section of the grid).

Note

The content below assumes you have a Skuid page and at least one working model.

To add a List component to the page. Just drag and drop, then:

  • Ensure that the List is accessing the correct model and name the List (if desired). (Basic tab)
  • Determine what items display on the list by clicking Add Field(s) on the component.
  • Choose whether to include a search box. (Filters and Search tab)
  • Add Interactions that allow users to launch action when they select a List item.

Every List includes a header and a footer. These sections include:

  • Header
    • the List’s title
    • a search box
  • Footer
    • an indicator of which set of rows are showing

The component’s header and footer can be hidden using properties in the Basic tab.

Filtering a List

You can add a filter to the List using either the Filter Set component, or the filter option on the List itself (Add Features > Add List Filter). Learn more about creating and configuring filters.

Add items to a list

The power of the List component is in the items you choose to on that List. Skuid gives you a lot of options from the Add Field(s) drop down menu on the List component.

Add (or more) of the following List items to customize the List display.

  • Model Fields: Displays a field’s name on the list.
  • Template: Allows builders to add multiple field names (along with punctuation or symbols such as “+”) and display on the List.

Note

HTML formatting is not supported.

  • Avatar: Displays a small “avatar” image on the List.
  • Icon: Displays an icon on the list.
  • Image: Displays an image on the list.

When multiple items are added to the List, they are displayed in the order they appear in the App Composer. To change the order, drag and drop the item by clicking on the Item’s column header.

In addition to adding multiple items to the List, you can also add fields to any item creating a “column” within the List:

  • From the item’s column header, click Add Field(s).

Configure List items

Configure the item’s properties (including formatting a Template or selecting the image source for Avatars, Icons, and Images) by clicking the Item’s name to open the Field Properties pane.

Configure the layout of individual item columns in the List by clicking the item’s column header to open the Column Properties pane.

Properties

List Properties

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

Basic 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 [[]]

Pagination section [[]]
  • Visible Rows: Controls how many rows are visible in the table, or you can select “Show All.” The default setting is 10 rows; this choice is displayed at the bottom of the table and can be overridden by the end users, who can also navigate through the “pages” of records.

Note

Searches, sorting, and filters will query the entire set of records—even the rows that haven’t been loaded into the List yet.

  • Show Page Size Dropdown: Checked by default, this displays a page size indicator at the bottom of the list. This indicator allows users to chose to display more or fewer records per page, overriding the Visible Rows setting.
  • Reset pagination on Query: Click to reset to the first page after any edits or queries to the model.
Advanced section [[]]
  • Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.
Other section [[]]
  • Row Actions on Left: By default, Row Actions are displayed on the right. If checked, they will be displayed on the left.

  • Show “Load more” button: If the Max # of records property on the model is set to a limiting number, checking this allows the end user to load additional records.

  • Show Header: If checked, the List header will display.

  • Show Footer: If checked, the List footer will display.

    Note

    Hide Header/Hide Footer supersedes any settings for individual elements in the Header or Footer. For example, if Show Search Box is checked in the Filters and Search tab, but Hide Header is also checked, the search box (which sits within the header) will not display because the header is hidden.

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

Search Properties [[]]
  • Show Search Box: If checked, Skuid displays a search box above the component.

  • Search Method: Determines if a search will query the server and filter its data, or filter local data on the client.

    • Server (default): Returns search results from all data on the server.

    • Client: Returns search results from only the data that is currently loaded on the page. Large data sets may require lengthy time to filter. 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 Search Method is set to Client, the filter may return incomplete results because it’s filtering incomplete data. This may result in unexpected omissions.

  • Tokenize Search Terms: 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 box placeholder text: The text that appears in the search box before the end user starts a search. (The default is “Search.”)

  • Empty Search Behavior lets you determine what happens when the search box is emptied.

    • Re-query for Model Data (default): The data displayed in the component returns to the state it was in when you first loaded the page.

    • Remove all Model Data: The data is removed from the component and its associated model (but not from the data object/entity).

      Note

      Why do this? If you want to use a component to display the list of search results—handy when you have a lot of search results—you need to have an empty component each time you do a new search, so you can display the newly returned results in it. Without this property, the component’s model will be re-queried when the text is cleared from the search box.

Search Fields [[]]

Specifies which fields will be searched against from the component’s search bar.

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.

Interactions tab [[]]

Click add Add Interaction, then select:

  • Action/Interaction Types: Choose from three possible interactions:
    • Click—best for desktop as well as mobile
    • Swipe—best for mobile
    • Press—best for mobile

Click add Add Action on the selected interaction type to add actions, then edit the Action Types:

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

    Note

    Using a Page Include with your List? There’s a specific action for that:

  • Skuid Page: The name of the associated page.

  • Page Include Component Id: Click to select the Page Include from the list. (If you have given the Page Include a unique name, it will appear here). When a Page Include is selected, a flashing yellow outline will indicate the chosen item within the canvas.

  • Query String: Use id={{Id}}. This tells the the Page Include to load the record whose Id matches the Id of the record the end user clicked.

Styles tab [[]]

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

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

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

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

    Note

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

Display Logic tab [[]]

Standard display logic options are available.

Added Items Properties

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

Column Properties [[]]

Click the item (Field, Template, Avatar, Icon, or Image) element to configure the following options:

  • Width Behavior: Determines the way items fill the List.
    • Fill: Allots a percentage of the space to the selected item, based on the fill ratio.
      • Fill Ratio: This sets the amount of space for this item relative to other items in the List. For example, a flex ratio of 2 will be double the width of an item with a flex ratio of 1.
    • Fixed: Allots a fixed amount of the space to the selected item, based on the Width settings.
      • Width
        • Extra Small
        • Small (default)
        • Medium
        • Large
        • Extra Large
        • Custom
          • Custom width amount: This can be specified using px, em, %, vh, or vw measurements.

Field Properties [[]]

Click the item (Field, Template) element to configure the following options:

  • Type:
    • Field: Uses the field Id, i.e. {{Name}}
    • Field Label: Uses the plain language field name, ie., Account Name.
    • Template: Opens the Template property field.
      • Template: The fields (selected using the field picker) to display in the queue.
  • Display Style Override: By default, any additional fields added to an item use the default text styling. To override that, select from the following, all of which are set in the Design System Studio:
    • None
    • Primary
    • Secondary
    • Tertiary
  • Field: The field to use for the list item. Select from the picklist.

Click the item (Avatar, Icon, or Image) element to configure the following options:

  • Style Variant: The format of the Avatar

  • Image URL: The URL for the image to be used as the Avatar. Or, pick an Image field from the picklist.

  • Icon: The image to be used as the icon. Select from the picklist.

  • Alternate Text: Add descriptive text about the image that can be used by access/assistive 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. Alt text also increases a search engine’s ability to index the image.

    Note

    If no Alternative Text is specified, access/assistive technologies will either ignore the image, or (in some cases) speak a generic label, such as “Image displayed.”

  • Size: The size of the Avatar or Icon.

    • X-Small
    • Small
    • Medium
    • Large
  • Fallback Type: An alternative if there is not an Avatar available.

    • Text: Replacement text for the Avatar.
      • Fallback Text: The text to be displayed instead of the Avatar.
    • Icon: Replacement text for the Avatar.
      • Fallback Icon: The icon to be displayed instead of the Avatar.