Filter Set

The Filter Set component is a container for one or more filters that can be used to filter the data within multiple components, provided they are attached to the same model.

Note

Individual filters can also be created as elements within Skuid’s other components. If your page is focused on one model—especially within one table—table filters may be sufficient. However, due to its exclusive features, using the Filter Set component is best practice for many design scenarios.

Using the Filter Set component

The Filter Set component can hold one or more filters. Filters operate by creating a condition—or interacting with an existing one—within the Filter Set component’s specified model. When a user uses the filter, it activates and sets that condition’s value—filtering and limiting the data pulled into the component by that particular model.

To use the Filter Set:

  • Add a Filter Set to a page, and adjust the Filter properties within the properties pane to govern the layout of the filters within the component.

  • Add one (or more) individual filters to the component, then configure those filters using the Filter properties. (For each filter, you can choose from several filter types.)

    Note

    Each Filter Set component can be attached to one model, and its filters will affect all other components attached to that model.

    To use one filter for multiple components, simply set those components to use the same model.

Best practices

  • Filter buttons arranged vertically will display across the full width of the Filter Set container—which stretches across the page by default. Try using this component within a Responsive Grid to better control the page layout.
  • Filters and search options are automatically disabled when a change is made to a record (but not yet saved to the model). After the change is saved, these options are once again accessible.
  • Make it clear via positioning and labeling which components will be affected by a Filter Set.
  • Use the Filter Set to filter visualizations.
  • If the only component requiring a filter is a table, it might be more efficient to use a Table Filter.
  • By default, Skuid remembers filters and other personalization settings server side (on the user record) rather than client-side (using browser cookies).

Component actions

Component actions are available using Run component action.

Open all accordion sections

(Only applies to Filter Sets with a Vertical with accordions layout)

Opens all accordion sections in the selected Filter Set.

Close all accordion sections

(Only applies to Filter Sets with a Vertical with accordions layout)

Closes all accordion sections in the selected Filter Set.

Properties

(Just need to look up a property? Try going directly to the Property Library.)

Component properties

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 filters immediately: If checked, all changes made to filters, or any text typed into the search bar, will be applied immediately. If unchecked, Skuid displays the Apply and Cancel buttons. The changes will not be applied until the end user selects Apply. (Checked by default.)

  • Apply search as you type: (Available if Apply filters immediately is checked.) If checked, Skuid initiates searches as the user types in search text. If not checked, the user must click Enter or search icon to trigger a search.

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.

  • Search results: Determines which results are displayed based on the end user’s search query.

    • Match exactly: Results are only shown for records that contain the search term verbatim.

      If the user searches for George Washington, only the records containing George Washington exactly as written—with no other terms in between—would be displayed.

    • Contain all terms: Results are shown for records that contain all of the terms in the query, even if they may appear in a different order or disconnected from each other.

      If the user searches for George Washington, any record containing George and Washington would be displayed, as long as both terms were anywhere within the record.

    • Contain at least one term: Results are shown for records that contain any of the terms in the query.

      If the user searches for George Washington, any record containing George or Washington would be displayed.

    • ARIA label: Determines what description will be read by assistive technology, such as screen readers, by setting the aria-label HTML attribute, which is part of the Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) spec.

      Used to describe elements where text may not be visible, this property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

    • 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: Determines 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.
Search fields [[]]

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

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.

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

        • =
Skuid SFX [[]]

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.

Sort tab [[]]

Sort properties [[]]

These properties determine the appearance and behavior of the Sort Builder.

  • Show sort builder: Check to display the Sort Builder in the component at runtime.
    • Button icon: The icon to display next to the label. Click the icon picker to select a different icon.
    • Button label: The label text that appears on the Sort Builder at runtime. Change the text to match what you want to say to your end users.
  • Sort client-side: Check to only sort on field values that are loaded into the page at the time the sort is applied. This means that the sort will be applied to data in the model, not to data still on the server.

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

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

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

Spacing section [[]]

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.

  • Margin: Sets a component’s margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click border-all All.
    • To set margins for each side individually, click border-separate Separate.

    Margin values can be set to any configured spacing variable for the page’s design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Layout section [[]]

  • Layout: Determines how to align the filters within the Filter Set.

    • When the Layout property in the General tab is set to Horizontal:

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

        • Auto: Filters are justified using the browser’s default.
        • Left: Filters are justified with the left margin of the Filter Set.
        • Center: Filters are justified with the center of the Filter Set.
        • Right: Filters are justified with the right margin of the Filter Set.
        • Space between: Filters display spaced evenly across the Filter Set.
        • Space around: Filters are evenly spaced within the Filter Set. There is spacing between the first filter and the left margin, and between the last filter and the right margin.
        • Stretch: Stretches the filter’s contents to fit the filter’s full width.

        Note

        This feature is more visible when the Layout property is set to Vertical.

      • Align items: Determines where filters sit within the Filter Set along a top-to-bottom axis.

        • Auto: Filters are aligned using the browser’s default.
        • Top: Filters are aligned with the top of the Filter Set.
        • Middle: Divisions are aligned along a center left-right axis of the Filter Set.
        • Bottom: Filters are aligned with the bottom of the Filter Set.

    • When the Layout property in the General tab is set to Vertical or Vertical with Accordions:

      • Justify items: Determines how the row of filters will justify along a top-to-bottom axis.

        • Auto: Filters are justified using the browser’s default.
        • Top: Filters are justified with the top margin of the Filter Set.
        • Middle: Filters are justified with the center of the Filter Set.
        • Bottom: Filters are justified with the bottom margin of the Filter Set.
        • Space between: Filters display spaced evenly across the Filter Set.
        • Space around: Filters are evenly spaced within the Filter Set. There is spacing between the first filter and the top margin, and between the last filter and the bottom margin.
        • Stretch: Stretches the filter’s contents to fit the filter’s full width.

      • Align items: Determines where filters sit within the Filter Set along a top-to-bottom axis.

        • Auto: Filters are aligned using the browser’s default.
        • Left: Filters are aligned with the left margin of the Filter Set.
        • Center: Divisions are aligned along the center axis of the Filter Set.
        • Right: Filters are aligned with the right margin of the Filter Set.

Display logic tab [[]]

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

Nested elements

Filter properties

Properties for the individual filters. Skuid includes the following automatic filters:

  • Date range: Filters a table to display items that fall within a selected date range.
  • Numeric range: Filters a table to display items that fall within the designated numeric range.
  • Multi-select option: Select more than one filter criteria; when activated, displays items that meet those criteria.
  • Select option: Filters a table to display items that meet a specified filter criteria.
  • Toggle: Toggle a filter on or off; when activated, displays only items that meet the filter criteria; click the toggle filter again to display all items.

Each filter type includes the Filter method property, which offers two options:

  • Client: Returns filter results from only the data that is currently loaded on the page. Large data sets may require lengthy time to filter. If 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 Filter Method is set to Client, the filter results will be only a subset of the complete data set. This may result in unexpected omissions.

  • Server: (Default) Returns filter results from all data on the server.

Additional properties for the individual filters (by Filter type):

General tab [[]]
Date Range [[]]

Pick options and conditions: Automatically

Skuid uses the chosen Date/Datetime field to filter.

  • Date/datetime field: Select the field (that returns a date) to filter on from the picklist. The Filter button will drop down a set of entry fields for start date and end date.
  • Show label above filter:
    • Yes, use field’s label
    • Yes, use custom label
    • No
  • Filter label: Enter the label for the filter button.
  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.

Pick options and conditions: Manually

Skuid requires a condition to use as the filter.

  • Filter label: Enter the label for the filter button.
  • (Start of range) Model condition to affect and (End of range) Model condition to affect: Appears when Manually is selected. For Data Range and Numeric Range, use model conditions to limit the Start value and End value for the ranges.
  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.
Numeric Range [[]]

Pick options and conditions: Automatically

Skuid uses the chosen Numeric field as the filter.

  • Numeric field: Select the field (that returns a number) to filter on from the picklist. The Filter button will drop down a set of entry fields for minimum and maximum amount.
  • Show label above filter:
    • Yes, use field’s label
    • Yes, use custom label
    • No
  • Filter label: Enter the label for the filter button.
  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.

Pick options and conditions: Manually

Skuid requires a condition to use as the filter.

  • Filter label: Enter the label for the filter button.
  • (Start of range) Model condition to affect and (End of range) Model condition to affect: Appears when Manually is selected. For Data Range and Numeric Range, use model conditions to limit the Start value and End value for the ranges.
  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.
Multi-select option [[]]

Pick options and conditions: Automatically

Note

Automatically generating the list of filter options is the best choice in most situations.

  • Filter field: Select the field to filter on from the picklist. This will populate the Filter dropdown list with filter options.

  • Show label above filter:

    • Yes, use field’s label
    • Yes, use custom label
    • No

  • Filter label: Enter the label for the filter button.

  • Display as:

    • Dropdown

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

    • Checkboxes

  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.

Pick options and conditions: Manually

Note

Manually generating the list of filter options can be more complicated. However for builders working with multiple or complex model conditions, or those desiring a higher degree of granularity, manually creating the option list can be a useful alternative.

  • Filter label: Enter the label for the filter button.
  • Model condition to affect: Select the model condition used to limit the number of displayed values for a filtered field.
  • Display as:
    • Dropdown
    • Checkboxes
  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.
Select option (default) [[]]

Pick options and conditions: Automatically

Note

Automatically generating the list of filter options is the best choice in most situations.

Displays all possible options for a filter:

  • Filter field: Select the field to filter on from the picklist. This will populate the Filter dropdown list with filter options.

  • Show label above filter:

    • Yes, use field’s label
    • Yes, use custom label
    • No

  • Filter label: Enter the label for the filter button.

  • “None Selected” option text: Enter the text displayed on the Filter button if no filter selections have been made.

  • Display as:

    • Dropdown

    • Checkboxes

    • Radio

      • Option limit: Sets limit for the number values shown.

  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.

Pick options and conditions: Manually

Note

Manually generating the list of filter options can be more complicated. However for builders working with multiple or complex model conditions, or those desiring a higher degree of granularity, manually creating the option list can be a useful alternative.

Uses a condition to limit the number of choosable options for the filter:

  • Filter label: Enter the label for the filter button.

  • Model condition to affect: Select the model condition used to limit the number of displayed values for a filtered field.

  • Create “None Selected” option: If checked, Skuid adds a “none selected” option to the filter options list.

  • “None Selected” option text: Enter the text displayed on the Filter button if no filter selections have been made.

  • Display as:

    • Dropdown

    • Checkboxes

    • Radio

      • Option Limit: Sets limit for the number values shown.

  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.

Toggle [[]]
  • Filter label: Enter the label for the filter button.
  • Conditions to toggle: Allows the selection of condition(s) to toggle from a list of available conditions on the model.
  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.
Sources tab [[]]

Choosing Pick options and condition Manually with Select option as the Filter Type activates the Sources feature, which allows you to control where the list of options that are listed on the filter are sourced from.

Click add Add option source, and then configure the Source Type:

  • Manual: Manually create the list of filter options. Choosing this property activates the Option feature.

    Click add Add option on the filter source, then configure. Drag and drop manual filter source entries to reorder them. Each option added has the following properties:

    • What condition(s) will this option affect?:

      • Affect the default condition: The option selected is used as the value in the model’s default condition.

        • Value: The data to be passed from this option item to the model condition. For example, if the value is set as 42 and the end user selects this option from the list, then the value of 42 is passed into the model condition.

      • Affect other condition(s): The option selected is used as the value in other conditions on the model, but not on the default condition.

        • Choosing this property activates the Effect feature.

          Click add Add effect on the filter option, then configure:

          • Action: Activate or deactivate a model condition. This action works in relation to the condition’s state (Always on, Filterable default on, Filterable default off, Always off).

            • Activate and set value: Activate and set the condition to a specific value.
            • Activate: Activate the condition without setting a value. Typically used for conditions with Always off or Filterable default off states.
            • De-activate: Deactivate the condition.

          • Model condition: The model condition to interact with.

          • Value: The value to set the condition to when using the Activate and set value option.

      • Label: A user-friendly label for option.

  • Rows in a model: Use the values in the rows of a model as the source for the filter’s options. Use this feature to create a dynamic picklist that can update with user input.

    Why use this? When accessing the values from a selected model using Pick options and conditions > Automatically, Skuid only lists values that have records associated with them; “empty” values (values with no associated records) do not display on the dropdown. To ensure that all values—even newly-added—are included in the list of filter options, use Pick options and conditions > Manually and select this property for the Source Type.

    Note

    Filter values display according to the default order provided in the model. To change that order: in the model used to provide the filter source, include the API name (StageName, not Stage) for the field in the Fields to order records by property followed by either ASC (Z to A) or DESC (A to Z); for example StageName DESC.

    • Merge source: The model which contains the field employed in the default condition for this filter.

    • Option label template: The label for the filter option. This property accepts typed text or merge syntax (in triple brackets).

    • Which conditions will this source’s options affect?:

      • Just the default condition
      • Default condition and others

    • Value to inject into the default condition: This defaults to {{Id}}, but can be changed to any field in the model associated with the condition.

Warning

Be sure to include the double curly brackets to designate the value as a merge variable; if missing, the condition may misread the merge syntax and throw an error.

  • Picklist options for condition’s field: Use a picklist field as the source for the filter’s options. If there is a specific requirement to Pick options and conditions for the filter manually, this property replicates the results of using Pick options and conditions > Automatically: employing the field designated in the condition as the source of the filter options.

    • Label prefix (optional): Text inserted before the filter’s label. For example, if the filter is on the Status field (with categories such as New, Closed, Pending, etc.), adding a prefix of Status: results in Option labels such as Status: New; Status: Closed; Status: Pending.
    • Label suffix (optional): Similar to Label Suffix, text to be inserted after the filter’s label. If the filter is on the Status field (with categories such as New, Closed, Pending, etc.), adding a suffix of Status results in Option labels such as New Status; Closed Statis; Pending Status.

  • Custom source (Snippet): Use a JavaScript snippet as the source for the filter’s options. The filter options are created from objects within the snippet. To learn more, see Use a JavaScript Snippet as a Filter Option Source.

    • Snippet name: The name of the snippet that contains the list of filter option text.
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.

  • Layout:

    • Align self: (vertically) ability to override container’s value (grid divisions do this)

      • Auto
      • Top
      • Middle
      • Bottom

  • Flex ratio: This sets the size of this filter relative to other filters in the Filter Set. For example, if there are two filters in a Filter Set, and the flex ratio for each is 1, they will each take up 1/2 of the Filter Set. If one has a flex ratio of 2, and the other has a flex ratio of 1, the first one occupies 2/3 of the grid, and the second one occupies 1/3 of it.

  • Minimum width: Sets a minimum width for the filters within the Filter Set. This governs wrapping on smaller screens: when the minimum width is exceeded, the filter will stack above or below other filters. This can be specified using px, em, rem, %, vh, or vw measurements.

  • Maximum width: Sets a maximum width for the division. This can be specified using px, em, rem, %, vh, or vw measurements.

Display logic tab [[]]

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