---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-filter
widgetname: Filter
description: "The Filter widget allows data filtering, customizable with various options and integration with queries for dynamic data display"
---

# Filter

![Screenshot showing the Filter widget icon.][filter]

## Overview

The Filter widget enables the filtering of data. For example, it allows to filter a Query result data. In addition, it is also possible to nest another widget inside it for the cases when the data filtered is presented in that widget. An example of a Filter widget is shown below.

![Screenshow showing a Filter widget example.][Filter Example]

!!! smart-barcode "Smart Barcode Scanning"
    This widget supports [[smart-barcode-scanning|Smart Barcodes]].

[filter]: images/uiFilter.png
[Filter Example]: images/uiFilterExample.png

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![Screenshot showing the General tab of the Widget Filter Settings wizard.](images/filter_general.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![Screenshot showing the Style tab in the Widget Filter Settings wizard, where you can customize the border width and color.](images/filter_style.png)

2. In the **Setup** tab, select the entity type and whether to allow support of the inner widget. Optionally, you can enable the Advanced Mode toggle to access the Advanced Filtering panel.

    ![Screenshot showing the Setup tab in the Widget Filter Settings wizard, where you can define specific options.](images/filter_setup.png)

3. In the **Filters** tab, configure the filters desired for the selected entity type. After defining the Field using the **Browse** button, you can select an Operator, enter a Default Value and Label, and enable or disable the following options: Barcode Scanning, Show In Advanced Mode Only, Show Operator, and Horizontal Alignment.

    ![Screenshot showing the Filters tab in the Widget Filter Settings wizard, where you can configure a list of filters.](images/filter_filters.png)

    !!! note
        The list of filters are displayed as drop-downs in the Filter Bar. If Advanced Mode is enabled in the Setup tab, filters are also available in the Advanced Filtering panel. When the `Show In Advanced Mode Only` option is enabled for a specific filter, that filter will only appear in the Advanced Filtering panel.

4. In the **Shortcut Filters** tab, define any shortcuts you desire. This list that you configure as pre-defined filters will appear as shortcuts. You should start by adding the Name of the Shortcut as exemplified below.

    ![Screenshot showing the Shortcut Filters tab in the Widget Filter Settings wizard, where shortcuts can be defined.](images/filter_shortcut_filters.png)

    Then select the **Set Filters** button to access the Select shortcut filters wizard.

    ![Screenshot showing the Select shortcut filters wizard.](images/filter_shortcut_filters_set_filters.png)

    In the Search Entity Property, you can select the desired property for the filter.

    ![Screenshot showing the Search Entity Property wizard.](images/filter_shortcut_filters_set_filters2.png)

    Back in the Select shortcut filters wizard you can tailor how the filter works by choosing from the following options: `contains`, `starts with`, `like`, `not like`, `is equal to`, `is different than`, `in`, `not in`, `is null`, and `is not null`.

    ![Screenshot showing the Select shortcut filters wizard with the available options.](images/filter_shortcut_filters_set_filters3.png)

5. In the **Custom Filters** tab, configure any custom filters you require.

    ![Screenshot showing the Custom Filters tab in the Widget Filter Settings wizard.](images/filter_custom_filters.png)

    !!! info
        If Advanced Mode is enabled in the Setup tab, the configured Custom Filters are also available in the Advanced Filtering panel.

    You can enable the `Is Entity Type Property` toggle button to choose a custom Field by selecting the **Browse** button.

    ![Screenshot showing the Custom Filters tab with the "Is Entity Type Property" toggle button enabled.](images/filter_custom_filters_entity.png)

    Depending on the Entity Type selected in the **Setup** tab, you will be presented with numerous choices for Custom Filters.

    ![Screenshot showing the available properties for Custom Filters when you press "Browse", if "Is Entity Type Property" is enabled.](images/filter_custom_filters_selecting.png)

    Once you choose and confirm your selection on the Property wizard above, the Type and the Reference Type will be automatically populated. You may choose an Operator, a Label, and indicate whether to allow Horizontal Alignment.

    ![Screenshot showing fields populated in the Custom Filters tab, and other available options.](images/filter_custom_filters_selecting2.png)

6. Optionally, define the **Links** between this widget and other elements of the UI Page. To do this, select the :material-plus: icon and choose Link. Then, configure the link by selecting values from the drop-down lists: first select the Source, then its corresponding Output. Next, select the Target and its corresponding Input.

    ![Screenshot showing the Link tab in the Widget Filter Settings wizard, with an example displayed.](images/filter_links.png)

    !!! info
        You can enable Force Change to force the link to perform changes, even when the source output value is equal to the target input value.

7. Select **Save and Close** to complete the widget configuration.

## Real Use Cases

### Linking a Filter and a Query

To help you take full advantage of the Filter widget, the following scenario demonstrates how to applied a Filter to an inner [[user-guide-uipage-widgets-grid]] widget linked with a parameterized [[user-guide-system-tasks-data-sources#query|Query]] task.

The listed scheduled jobs in the inner Grid can be filtered by the outer filter elements for **Resource** or **Material**. The inner Grid data is fed by a Query task for the **Schedule Scenario Job** entity. The system Query task `GetMaterialsForResourceByStateForResourceView` has parameters setup for **Material** and **Resource**.

![Screenshot showing a filter linked to a query in a PDB Assent workflow.](images/filter_example.png)

1. Add the Query task to the UI Page.

    ![Screenshot showing a filter settings page with a query task added to the UI page.](images/filter_example1.png)

2. Add a Filter widget and an inner Grid widget to the UI Page. Drag and drop the Filter widget element to a UI Page first and then drag and drop a the Grid widget to the inner section of it as shown below.

    ![Screenshot showing a Filter widget linked to an inner Grid widget on a UI Page.](images/filter_example2.png)

3. Link the task to the Filter widget.

    ![Screenshot showing a link between a Filter widget and a Query in a data management interface.](images/filter_example3.png)

4. Setup columns as needed for the Grid widget. For more information, see [[user-guide-uipage-widgets-grid]].

    ![Screenshot showing a filter linked to a query in a Grid widget setup.](images/filter_example4.png)

5. Configure the filter for the same entity type, in this case, **Schedule Scenario Job**:

    ![Screenshot showing a filter configuration setup with a link to a query.](images/filter_example5.png)

6. Afterwards, it is possible to add filters, which should match the parameters as configured in the Query:

    ![Screenshot showing a filter added to a query with matching parameters.](images/filter_example6.png)

7. Link the filters to the Query task using the following setup:

    ![Screenshot showing a Wadget Fitter settings page with links and filters setup for linking to a Query task.](images/filter_example7.png)

### Filtering Results with Parameters

Another example of how to link a Filter widget with a system Query is shown below. In this case, the goal is to filter out the Charts shown based on the chosen [[user-guide-parameter-index]].

1. Set up a Filter widget and specify the Entity Type as Chart, as shown below.

    ![Screenshot showing a Filter widget setup for an Entity Type of Chart.](images/filter_setup_chart.png)

2. In the Custom Filters tab, add a new filter by selecting the :material-plus: icon. In the new filter:

    * Enable the Is Entity Type Property toggle button.
    * Specify the Field (in this example, `Parameter`).
    * Specify the Operator (in this example, `IsEqualTo`).
    * Choose the Type (in this example, `ReferenceType`).
    * Choose the Reference Type (in this example, `Entity Type`).
    * Define the Reference Type Name (in this example, `Parameter`).
    * Choose the Query (in this example, the system query `EDCParameters`).

    Select **Save and Close** once all the changes are done.

    ![Screenshot showing a settings page with custom filter options, including "custom Filters" and "custom éilters".](images/filter_parameter_custom_filter.png)

3. In the UI Page settings, add a Query Task by selecting the :material-plus: icon. In the new task:

    * Define the Name (in this example, `Chart Query`).
    * Choose the Type (in this example, `Query`).
    * Use the default settings for the Auto Refresh (`false`), Retrieve Data On Start (`true`), Retrieve Data On Changes (`true`), Show Feedback Messages (`false`), and Show Error Feedback Messages (`false`) toggle buttons.
    * Choose a Query (in this example, the system query `chartByTypeOrParameter`).

    Select **Save and Close** once all the changes are done.

    ![Screenshot showing filtering options on a UI page for setting task parameters.](images/filter_ui_page_settings_tasks.png)

4. Add a Grid widget to the UI Page and, in the Columns tab, add two columns by selecting the :material-plus: icon. For the first column:

    * Specify the Name (in this example, `Name`).
    * Specify the Path (in this example, `Name`).
    * Use the default settings for the View Priority (`AlwaysVisibleInDesktop`), the Is Visible By Default toggle button (`true`), and for the Custom Template toggle button (`false`).
    * Choose the Type (in this example, `String`).
    * Use the default setting for the Use Grouping toggle button (`false`).

    ![Screenshot showing a grid widget with a column named "alums" and a value of "+4".](images/grid_widget_column_name.png)

    For the second column:

    * Specify the Name (in this example, `Parameter`).
    * Specify the Path (in this example, `Parameter`).
    * Use the default settings for the View Priority (`AlwaysVisibleInDesktop`), the Is Visible By Default toggle button (`true`), and for the Custom Template toggle button (`false`).
    * Choose the Type (in this example, `ReferenceType`).
    * Choose the Value Reference Type (in this example, `Entity Type`).
    * Define the Value Entity Type Entity (in this example, `Parameter`).
    * Use the default setting for the Use Grouping toggle button (`false`).

    ![Screenshot showing a grid widget column parameter, labeled "Alums Tat Column Datas".](images/grid_widget_column_parameter.png)

5. Finally, in the Filter widget Links tab, add two links by selecting the :material-plus: icon. For the first link:

    * Specify the Source (in this example, `Filter`).
    * Choose the Output (in this example, `Changed Filters`).
    * Define the Target (in this example, `Chart Query`).
    * Choose the Input (in this example, `Filter Collection`).

    ![Screenshot showing a filtering settings interface with options for "Whedger Filter", "Peavinsy Bot" and "Detas Link".](images/filter_linking_chart_query.png)

    For the second link:

    * Specify the Source (in this example, `Chart Query`).
    * Choose the Output (in this example, `Changed Data`).
    * Define the Target (in this example, `Filter`).
    * Choose the Input (in this example, `inner$Data`).

    ![Screenshot showing a widget settings interface with options for filtering results.](images/chart_query_linking_filter.png)

6. The final result will resemble the image below. Once you add a Parameter to the Filter, the UI Page will only show results that meet the condition.

    === "Final Result"

        ![Screenshot showing a filtered results page with parameters applied, illustrating how only relevant data is displayed.](images/real_use_case_2_final_result.png)

    === "Final Result with Filter Applied"

        ![Screenshot showing a filtered search results page with applied parameters.](images/real_use_case_2_final_result_with_applied_parameter.png)