---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-filter-tabs
widgetname: Filter Tabs
description: "The Filter Tabs widget combines filtering and tab navigation, allowing you to organize filters across multiple views displayed in a dropdown format"
---

# Filter Tabs

:core-static-widgettab-lg:{style="font-size: 100px"}

## Overview

The **Filter Tabs** widget combines the functionality of the **Tabs** widget and the **Filter** widget. It lets you organize filters across multiple views, where each view is displayed as a tab. Each view can have its own entity type and a set of filters, which can be displayed either inside a dropdown button or directly in the filter bar.

An example of a **Filter Tabs** widget is shown below.

![Filter Tabs widget example](images/filter-tabs-widget/filter_tabs_example.png)

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

## General Steps

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

![Filter Tabs general settings](images/filter-tabs-widget/filter_tabs_general.png)

## Widget Customization

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

    ![Filter Tabs style settings](images/filter-tabs-widget/filter_tabs_style.png)

2. In the **Views** tab, define the views that will appear as tabs in the widget. Select the :material-plus: icon to add a new view, and configure the following properties in the **View Details** panel:

    - **Name** of the view
    - **Default** - Set this toggle to `true` to make this the default view when the widget loads. Only one view can be set as default.

    Under the **Filters** section, choose the **Entity Type** to associate with this view. This determines which entity properties are available when configuring filters for this view.

    !!! note
        If the UI page has been configured with the scope Workspace, it is possible to use a template to configure this widget. For more information, see the [[user-guide-uipage-widgets-filter-tabs#using-templates|Using Templates]] section.

    ![Filter Tabs views settings](images/filter-tabs-widget/filter_tabs_views.png)

3. In the **Filters** tab, configure the filters for each view. The left column lists all the configured views, and the center column lists the filters for the selected view. Select a view to see its filters, then select the **+** icon to add a new filter and configure the following properties in the **Filter Details** panel:

    - **Display In** - Choose where the filter appears. Select `FilterBar` to show it directly in the filter bar, or `Dropdown` to show it inside the filter dropdown button.
    - **Is Entity Type Property** - Enable this toggle if the filter property belongs to the entity type associated with the view.
    - **Field** - Enter the property to filter by.
    - **Operator** - Choose the operator for the filter condition, such as `IsEqualTo` or `StartsWith`.
    - **Type** - Select the data type of the property, such as `String`.
    - **Label** - Optionally, enter a label to display for the filter instead of the property name.
    - **Barcode Scanning Enabled** - Enable this toggle to allow barcode scanning as input for this filter.
    - **Barcode Field Name** - If `Barcode Scanning Enabled` is enabled, enter the field name to map the scanned barcode value to. If left empty, the property name is used.
    - **Horizontal Alignment** - Enable this toggle to display the filter label and input side by side instead of stacked.

    ![Filter Tabs filters settings](images/filter-tabs-widget/filter_tabs_filters.png)

4. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![Filter Tabs links settings](images/filter-tabs-widget/filter_tabs_links.png)

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

## Using Templates

When you configure a **Filter Tabs** widget on a **UI Page** with the **Workspace** scope defined, you can apply a template with a predefined set of views and filters. For more information about this scope, see [[user-guide-uipages-workspaces]].

The **Workgroup Relations** template automatically configures the following views:

- **Materials**
- **Resources**
- **Steps**
- **Areas**

Each view includes its corresponding entity type and filters.

To use a template:

1. Drag a **Filter Tabs** widget to an empty builder panel.
2. Open the **Filter Tabs** widget settings.
3. On the **Views** tab, select :iot-synchronize-lg: and choose **Workgroup Relations**.

    ![Screenshot showing the Workgroup Relations option in the Filter Tabs wizard.](images/filter-tabs-widget/template_uipages_workgroup_relations.png)

    The template automatically adds views for **Materials**, **Resources**, **Steps**, and **Areas**, together with the corresponding entity types and filters. Remove the generated views or rearrange their order as needed. After you apply the template, a confirmation message identifies the template that was applied.

    !!! info
        This template can also be applied in the Filters tab.

4. Review the generated views on the **Views** tab and their corresponding filters on the **Filters** tab.

    === "Views tab"

        ![Screenshot showing the Views tab automatically populated from the selected template.](images/filter-tabs-widget/template_uipages_workgroup_relations_views.png)

    === "Filters tab"

        ![Screenshot showing the Filters tab automatically populated from the selected template.](images/filter-tabs-widget/template_uipages_workgroup_relations_filters.png)

5. Select **Save and Close** to complete the widget configuration. The **Filter Tabs** widget is configured automatically and is ready to display information for the selected **Workgroup** context.

## Real Use Cases

### Filtering a Grid with Multiple Views

The following example shows how to filter data in a Grid widget using the Filter Tabs widget, with each view corresponding to a different entity type.

1. Add a Filter Tabs widget to the UI Page. In the **Views** tab, add the views you need. In this example, the views are **Resources** and **Steps**, each with its corresponding entity type set.

    ![Filter Tabs Views tab with Resources and Steps views configured](images/filter-tabs-widget/filter_tabs_usecase_views.png)

2. In the **Filters** tab, select each view and add the desired filters. In this example:

    - The **Steps** view has a filter on the `Name` property using the `StartsWith` operator, displayed in `Dropdown`.
    - The **Resources** view has a filter on the `Name` property using the `Contains` operator, also displayed in `Dropdown`.

    ![Filter Tabs Filters tab with filters configured for the Steps and Resources views](images/filter-tabs-widget/filter_tabs_usecase_filters.png)

3. Add a **Grid** widget to each view in the **Filter Tabs** widget and configure its columns to match the entity properties you want to display.

    ![Screenshot showing a Grid widget with columns configured for the Steps view.](images/filter-tabs-widget/filter_tabs_usecase_grid1.png)

    ![Screenshot showing a Grid widget with columns configured for the Resources view.](images/filter-tabs-widget/filter_tabs_usecase_grid2.png)

4. In the UI page **Links** tab, add two Query tasks, one per view, to receive inputs from the **Filter Tabs** widget and feed data to each **Grid** widget.

    ![Screenshot showing UI Page Links tab with two Query tasks connected to the Filter Tabs widget](images/filter-tabs-widget/filter_tabs_usecase_links.png)

    Verify the connections in the **Filter Tabs** widget **Links** tab. Confirm that:

    - The **Source** is set to `Filter Tabs`, the **Output** to `Resources Tab Filters Changed`, the **Target** to the respective **Resource** Query task, and the **Input** to `Filter Collection`.
    - The **Source** is set to `Filter Tabs`, the **Output** to `Step Tab Filters Changed`, the **Target** to the respective **Step** Query task, and the **Input** to `Filter Collection`.

    ![Screenshot showing a Grid widget with columns configured for the entity properties.](images/filter-tabs-widget/filter_tabs_usecase_filter_links1.png)

    ![Screenshot showing a Grid widget with columns configured for the entity properties.](images/filter-tabs-widget/filter_tabs_usecase_filter_links2.png)

    Similarly, you can verify the connections in the **Links** tab in each **Grid** widget. Ensure that:

    - In the **Grid** widget in the Step Tab of the **Filter Tabs** widget, the **Source** is set to the respective **Step** Query task, the **Output** to `Changed Data`, the **Target** to `Steps Grid`, and the **Input** to `Data`.
    - In the **Grid** widget in the Resource Tab of the **Filter Tabs** widget, the **Source** is set to the respective **Resource** Query task, the **Output** to `Changed Data`, the **Target** to `Resource Grid`, and the **Input** to `Data`.
  
    ![Screenshot showing a Grid widget with columns configured for the entity properties.](images/filter-tabs-widget/filter_tabs_usecase_grid_links1.png)

    ![Screenshot showing a Grid widget with columns configured for the entity properties.](images/filter-tabs-widget/filter_tabs_usecase_grid_links2.png)

5. The final result will resemble the image below. Selecting a view from the dropdown changes the active set of filters, and applying a filter updates the data shown in the Grid.

    === "Final Result"
        ![Screenshot showing the Filter Tabs widget and Grid widget on a UI Page with no filters applied.](images/filter-tabs-widget/filter_tabs_usecase_result.png)

    === "Final Result with Filter Applied"
        ![Screenshot showing the Filter Tabs widget and Grid widget on a UI Page with a filter applied.](images/filter-tabs-widget/filter_tabs_usecase_result_filtered.png)