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.

General Steps#

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

1. In any UI Page in Build mode, select the Filter 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 Setup tab, select the entity type and whether to allow support of the inner widget and the advance mode.

   

3. In the Filters tab, configure the filters you desire based in. The list of filters that you configure will be displayed as drop-downs.

   

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.

   

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

   

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

   

   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.

   

5. In the Custom Filters tab, define any custom filters you require. This list of filters will only be available in advanced mode.

   

   You may opt to set the Is Entity Type Property toggle button to true and you will be able to choose a custom Field by selecting the Browse button.

   

   Depending on the Entity Type selected in the Setup tab, you will be presented with numerous choices for custom filters.

   

   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.

   

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

   

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 Grid widget linked with a parameterized 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.

1. Add the Query task to the UI Page.

   

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.

   

3. Link the task to the Filter widget.

   

4. Setup columns as needed for the Grid widget. For more information, see Grid.

   

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

   

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

   

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

   

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

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

   

2. In the Custom Filters tab, add a new filter by selecting the 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.

   

3. In the UI Page settings, add a Query Task by selecting the 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.

   

4. Add a Grid widget to the UI Page and, in the Columns tab, add two columns by selecting the 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).

   

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

   

5. Finally, in the Filter widget Links tab, add two links by selecting the 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).

   

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

   

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