Filter Tabs#

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.

General Steps#

To use the Filter Tabs widget in a UI Page, follow the steps below:

1. In any UI Page in Build mode, select the Filter Tabs from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
2. Enter the Settings section of the widget through the three vertical dots.
3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

Widget Customization#

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

   

2. In the Views tab, define the views that will appear as tabs in the widget. Select the 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 Using Templates section.

   

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.

   

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

   

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 Workspace Scope.

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 and choose Workgroup Relations.

   

   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 tabFilters tab

   

   

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.

   

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.

   

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.

   

   

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.

   

   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.

   

   

   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.

   

   

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 ResultFinal Result with Filter Applied