Filter Set

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

Note: Individual filters can also be added as elements within other Nintex Apps components. If your page focuses on a single model, especially within one table, table filters may be sufficient. For more information, see General features in Table . However, if your design requires more advanced or flexible filtering, the Filter Set component is recommended due to its unique capabilities.

Jump to:

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 use the filter properties in the properties pane to manage the layout of the filters within the component. For more information see, Component properties.

  • Add one or more individual filters to the component, then configure them using the filter properties. You can choose from several filter types for each filter.

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.

  • Use positioning and labeling to clearly indicate which components are 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. For more information, see General features in Table .
  • By default, Nintex Apps remembers filters and other personalization settings on the server side (on the user record) rather than on the 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.

Component properties

  • Unique-Id: An automatically generated alphanumeric identifier for the component. You can rename it if needed. (Required)

    If you add snippets, custom components, or other developer-related additions to your page, assign a specific DOM (Document Object Model) ID for your button set. For more information, see Nintex Apps and Code.

  • Model: The model that the filters in the Filter Set will apply.

  • 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. Nintex Apps 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 drop-down 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.

  • Reset button: Determines when the filter's Reset button displays. Select one of the following options:

    • 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 one or two filters in the Filter Set.

  • Apply Icon: The icon on the Apply button. To choose the icon you want, click the icon selector. (Optional)

  • Reset Icon: The icon on the Reset button. To choose the icon you want, click the icon selector. (Optional)

  • Apply filters immediately: To apply all changes made to filters or text entered into the search bar immediately, turn on the toggle. If it's turned off, Apply and Cancel buttons will appear, and changes won't be applied until the Apply button is clicked. (Turned on by default.)

  • Apply search as you type: Available if the Apply filters immediately toggle is turned on. To start searching automatically as the user types, turn on the toggle. If it's turned off, the user must press Enter or click the search icon to search.

  • Layout: Determines how filters are placed within the Filter Set container. The following options are available:
    • Horizontal: Filters and Reset buttons appear horizontally.
    • Vertical: Filters appear vertically and each filter stretches to fill the horizontal area of the Filter Set. The Reset button appears below the filters.
    • Vertical with accordions: Filters appear in accordion sections.

  • Justify items: Determines how the row of filters appear justified 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 are evenly spaced 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 visible when the Layout property is set to Vertical.

  • Align items: Determines where filters appear 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: Filters are aligned along the center vertical axis of the Filter Set.
    • Bottom: Filters are aligned with the bottom of the Filter Set.

  • Justify items: Determines how the row of filters appear justified 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 are evenly spaced 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 appear 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: Filter are aligned along the center axis of the Filter Set.
    • Right: Filters are aligned with the right margin of the Filter Set.

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

    • To set margins for all sides, click All.
    • To set margins for each side individually, click 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.

  • Show search box: To display the search box on the component, turn on the toggle.

  • Search method: Determines if a search will query the server and filter its data, or filter local data on the client. Select one of the following options.

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

    • Client: Returns search results only from the data currently loaded on the page. For large datasets, this can reduce filtering time. If users typically filter only the visible data rather than all records on the server, enabling this option may improve performance.

      Note:  If the server contains a large data set that hasn't been fully loaded on the page, and the Search method is set to Client, the filter may return incomplete results, as it can only filter the data currently available. This may lead to unexpected omissions.

  • Search results: Determines which results are displayed based on the search query. Select one of the following options.

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

      For example, if the search text is George Washington, only records that contain George Washington exactly as written, with no additional words in between will 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.

      For example, if the search text is George Washington, any record that contains both George and Washington, regardless of their order or placement will be displayed.

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

      For example, if the search text is George Washington, any record containing either George or Washington will be displayed.

  • Search box placeholder text: Type the custom text to display as placeholder text in the search box until the user starts typing.

  • Search icon display: Determines how the search icon is displayed. Select one of the following options.

    • Button: Appears as an icon inside the search box that users can click to perform a search.

    • Inset icon: Appears inside the search box and not meant to be clicked.

    • None

  • Search icon: Determines the search icon that is displayed inside the search box. To edit and reset the selected icon, click .

  • Empty search behavior: When the search box is cleared, the model is re-queried without any search conditions, so records are likely to be returned. To remove all records from the model when the search box is emptied, select Remove all model data. Select one of the following options.

    • Re-query for model data: Clears the search term and retrieves all records from the model.

    • Remove all model data: Clears the search term and removes all records from the model.

  • 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 fields: Specifies which fields will be searched against from the component's search bar.

    Note: 

    Depending on the connection used for the model attached to the component, this property may not be available.

    • Field: Nintex Apps 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 connections 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

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 see, Make Search Faster.

For more information on using these search options with Salesforce, see Salesforce's SOQL and SOSL Reference Guide.

  • Show Sort Builder: To display the sort builder on the component, turn on the toggle.

    • Button icon: Determines the sort icon that is displayed on the sort builder. To edit and reset the selected icon, click .

    • Button label: The label text that appears on the sort builder. Type the text you want to display to users.

  • Sort client-side: To sort only the field values already loaded on the page, turn on the toggle. This applies sorting only to the data currently in the model, not to any data still on the server.

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

Nested elements

Filter properties

Filter Type: Select one of the following filter types:

  • Date range: Filters the table to show items within the selected date range.

  • Numeric range: Filters the table to show items within the specified numeric range.

  • Multi-select option: Filters the table to show items that match multiple selected criteria.

  • Select option: Filters a table to show items that meet a specified filter criterion.

  • Toggle: Displays a toggle button in the Filter Set. To show only items that meet the filter criteria, turn on the toggle. When turned off, it displays all items.

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

  • Client: Returns filter results from only the data that is currently loaded on the page. Large data sets may require longer time to filter. If users commonly need to sort only the data they have loaded within the page—as compared to every record on the server—this property may speed up filtering.

    Important: If the server has a large data set that hasn’t fully loaded on the page, and the Filter Method is set to Client, filtering will apply only to the loaded subset. This may lead to unexpected omissions in the results.

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

Additional properties for the individual filters by Filter type:

Nintex Apps uses the chosen Date/Datetime field to filter. The Filter button will display a set of entry fields for start date and end date.

  • Show label above filter: Select one of the following options:
    • Yes, use field's label
    • Yes, use custom label
    • No
  • Filter label: Type the label for the filter button.
  • Remember last-selected filter value: To display the previously selected options when a user returns to this page, turn on the toggle.
  • Date/datetime field: Click Add field to add the field that returns a date for filtering.

Nintex Apps requires a condition to use as the filter.

  • Show label above filter: Select one of the following options:
    • Yes, use field's label
    • Yes, use custom label
    • No
  • Filter label: Type the label for the filter button.
  • Remember last-selected filter value: To display the previously selected options when a user returns to this page, turn on the toggle.
  • (Start of range) Model condition to affect and (End of range) Model condition to affect: For Date Range and Numeric Range, use model conditions to limit the Start value and End value for the ranges.

Nintex Apps uses the chosen Numeric field as the filter.

  • Show label above filter: Select one of the following options:
    • Yes, use field's label
    • Yes, use custom label
    • No
  • Filter label: Type the label for the filter button.
  • Remember last-selected filter value: To display the previously selected options when a user returns to this page, turn on the toggle.
  • Numeric field: Click Add field to add the field that returns a number for filtering. The Filter button will display a set of entry fields for minimum and maximum amount.

Nintex Apps requires a condition to use as the filter.

  • Show label above filter: Select one of the following options.
    • Yes, use field's label
    • Yes, use custom label
    • No
  • Filter label: Type the label for the filter button.
  • Remember last-selected filter value: To display the previously selected options when a user returns to this page, turn on the toggle.
  • (Start of range) Model condition to affect and (End of range) Model condition to affect: For Data Range and Numeric Range, use model conditions to limit the Start value and End value for the ranges.

Note:  Automatically generating the list of filter options is the best choice in most situation

  • Show label above filter: Select one of the following options:

    • Yes, use field's label

    • Yes, use custom label

    • No

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

  • Remember last-selected filter value: To display the previously selected options when a user returns to this page, turn on the toggle.

  • Filter field: Click Add field to add the fields for filtering. This will display the dropdown list with filter options.

  • "None Selected" option text: Type the text to display on the Filter button when no filters are selected.
  • Display as:

    • Dropdown

      • Enable autocomplete: To filter and suggest options based on user input and place the selected value in the combobox, turn on the toggle.

        Nintex Apps 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

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

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.

  • Show label above filter: Select one of the following options:
    • Yes, use field's label
    • Yes, use custom label
    • No
  • Filter label: Type the label for the filter button.
  • Remember last-selected filter value: To display the previously selected options when a user returns to this page, turn on the toggle.
  • Model condition to affect: Select the model condition used to limit the number of displayed values for a filtered field.

  • Create "None Selected" option: To add a None selected option to the filter options list, turn on the toggle.

  • "None Selected" option text: Type the text to display on the Filter button when no filters are selected.
  • Display as:

    • Dropdown

    • Checkboxes  

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

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

Displays all possible options for a filter:

  • Show label above filter:

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

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

  • Remember last-selected filter value: To display the previously selected options when a user returns to this page, turn on the toggle.

  • Filter field: Click Add field to add the fields for filtering. This will display the dropdown list with filter options.

  • "None Selected" option text: Type the text to display on the Filter button when no filters are selected.

  • Display as:

    • Dropdown

      • Enable autocomplete: To filter and suggest options based on user input and place the selected value in the combobox, turn on the toggle.

        Nintex Apps 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.

    • Radi

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

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 available options for the filter:

  • Show label above filter:

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

  • Remember last-selected filter value: To display the previously selected options when a user returns to this page, turn on the toggle.

  • Filter label: Type 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: To add a None selected option to the filter options list, turn on the toggle.

  • "None Selected" option text: Type the text to display on the Filter button when no filters are selected.

  • Display as:

    • Dropdown

    • Radio

      • Option Limit: Sets limit for the number values shown.
  • Show label above filter:
    • Yes, use field's label
    • Yes, use custom label
    • No
  • Filter label: Type the label for the filter button.
  • Remember last-selected filter value: To display the previously selected options when a user returns to this page, turn on the toggle.

Selecting Select option for Filter Type and Manually for Pick options and condition, enables the Sources tab, which allows you to control where the filter’s option list is sourced from.

Click Add Source to configure the Source type:

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

    Click Add Option on the filter source to 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 Effect on the filter option, then configure:

          • Action: Activates or deactivates a model condition. This action works in relation to the condition's state (Always on, Dynamic (Default on), Dynamic (Default off), Always off).

            • Activate and set value: Activates and sets the condition to a specific value.
            • Activate: Activates the condition without setting a value. Typically used for conditions with Always off or Dynamic (Default off) states.
            • De-activate: Deactivates 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: The label for option.

  • Rows in a model: Uses 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.

    When accessing the values from a selected model using Pick options and conditions > Automatically, Nintex Apps 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 used 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.

Important:  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, using the field designated in the condition as the source of the filter options.

    • Label prefix: 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, or Status: Pending. (Optional)
    • Label suffix: Text 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 Status, or Pending Status. (Optional)

  • 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. For more information, 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.

  • Layout:

    • Align self: Allows a grid division to override the container’s vertical alignment setting.

      • 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. For more information, see measurements.

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