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:

  • Drag and drop a Filter Set onto a page, and adjust the Filters 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.
  • 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.

Properties

Filter Set Properties

The properties for the Filter Set component.

Show all sections

Basic [[]]

  • 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 will appear as tiny buttons arranged horizontally.
    • Vertical: Filters will be arranged vertically, and each filter will stretch to fill the horizontal area of the Filter Set.
  • Position: Used for horizontal layouts, this determines whether filters are placed on the left or right side of the Filter Set container.

Advanced [[]]

Rendering [[]]

Standard conditional rendering options are available.

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

Show all sections

Date Range [[]]

Condition Source: Auto Generate Condition

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.
Condition Source: Specify Existing Conditions

Skuid requires a condition to use as the filter.

  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.
  • Begin Model Condition and End Model Condition: Appears when Specify Existing Conditions is selected. For Data Range and Numeric Range, use model conditions to limit the Start value and End value for the ranges.
  • Show Label above Filter:
    • Yes, use Field’s label
    • Yes, use Custom label
    • No
  • Filter label: Enter the label for the filter button.

Numeric Range [[]]

Condition Source: Auto Generate Condition

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.
Condition Source: Specify Existing Conditions

Skuid requires a condition to use as the filter.

  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.
  • Begin Model Condition and End Model Condition: Appears when Specify Existing Conditions is selected. For Data Range and Numeric Range, use model conditions to limit the Start value and End value for the ranges.
  • Show Label above Filter:
    • Yes, use Field’s label
    • Yes, use Custom label
    • No
  • Filter label: Enter the label for the filter button.

Multi-select Option [[]]

  • Filter Field: Select the field to filter on from the picklist. This will populate the Filter drop-down list with filter options.
  • Filter Condition Operator:
    • in: Display only the data that is within the filter condition.
    • not in: Display only the data that is not within the filter condition.
  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.
  • Show Label above Filter:
    • Yes, use Field’s label
    • Yes, use Custom label
    • No
  • Filter label: Enter the label for the filter button.
  • Create “None Selected” Option Text: If no selections have been made, display call-to-action text on the Filter Button.

Select Option (default) [[]]

Pick Options and Conditions: Automatically

Displays all possible options for a filter:

  • Filter Field: Select the field to filter on from the picklist. This will populate the Filter drop-down list with filter options.
  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.
  • Maximum Height (optional): Choose the size of the Filter button’s drop-down option menu.
  • 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.
Pick Options and Conditions: Manually

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

  • Model Condition to Affect: Select the model condition used to limit the number of displayed values for a filtered field.
  • Remember last-selected filter value: When a user returns to this page, Skuid will remember their previously-selected options.
  • Switch Filter to Autocomplete at X items: If a Filter has more than 25 options, the filter shifts from a button with a drop-down, to an autocomplete field. Change this number to trigger that transition at a higher, or lower, number of options.
  • Show Label above Filter:
    • Yes, use Field’s label
    • Yes, use Custom label
    • No
  • Filter label: Enter the label for the filter button.
  • Create “None Selected” Option Text: If no selections have been made, display call-to-action text on the Filter Button.
  • “None Selected” Option text: Enter the text displayed on the Filter button if no filter selections have been made.

Toggle [[]]

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

Selecting Toggle as the Filter Type activates the Add Effect button. Each effect activates, activates and sets, or deactivates one particular condition. Stacking these effects allows for complex filtering through an easy-to-use on/off filter button.

Each effect includes the following properties:

  • Action: Activate or deactivate a model condition. This action works in relation to the condition’s state (Always On, Filterable Default On, Filtertable Default Off, Always Off).
    • Activate and Set Value: Activate and set the condition to a specific value.
    • Activate: Activate the condition. (Use for conditions with Always Off or Filterable Default Off states.)
    • De-Activate: Deactivate the condition. (Use for conditions with Always On or Filterable Default On states.)
  • Model Condition: The model condition to interact with.
  • Value: The value to set the condition to when using the Activate and Set Value option.