Basic Functions of Filter Component

Version

Application Scenarios

The filter component has multiple functions. You can perform a series of operations as needed to achieve different effects.

Functions

The basic functions of the filter component are shown in the table below:

Filtering Binding Fields

After adding fields in the filter component settings interface, you can filter the added fields. For example, if you add the Contract Type field, but only want the drop-down list to display three contract types in the dashboard, then you can click Filter... after adding the field.

When you add the filter condition, set the field Contract Type In Purchase Contract, Long-Term Agreement and Long-Term Agreement Order, then click OK to save it.

You can see that the filtering component can only select three contract types.

Note: The time and numeric filter components do not support the above function.

Ascending/Descending Order

1. You can sort the filtered fields according to the ascending or descending order in the field adding area in the filter component settings interface, or perform custom sorting.

2. You can select fields as the sorting standard. For example, we set the Client ID to be sorted in the ascending order according to the Contract Amount. Click OK to save it.

3. After checking the data of the text filter component, you can see that the Client ID field values are sorted by Contract Amount.

If you want to sort data in the descending order, follow the same steps as above.

Custom Sorting

Custom sorting allows you to manually set the order of filter values by dragging the data.

In the filter component editing interface, only certain specified components can be filtered after setting the range. If you do not set the control range, the range will be set by default.

In the Control Range setting, unavailable components are grayed out, and a prompt is given: No bound fields or bound fields cannot control this component.

You can give permissions to different users to log in and view different dashboard data analysis content.

For details, see Passing Default Value for Login Name.

The Allow overlap function allows filter components to be overlapped with other components or controls to achieve free layout. Click, select Allow overlap.

Then you can drag the component to anywhere in the dashboard, including the place inside the Detail Table component.

The filter component allowed to overlap will always stay above the component/filter component not allowed to overlap. If both components are allowed to overlap, you can select Order in the drop-down list and move one to the top and move the other to the bottom.

Click Clear selected data to clear all selected data in the text filter component with filtering conditions. Then you can make selections again.

Showing/Hiding Title

The default state of the filter component is Show Title. Clicking Show Title can hide the title.

Editing Title

You can modify the title displayed by the filter component. The default names of the filter components are Text Drop-Down, Text List, Value Range, etc. For details, see Editing Title.

Click Edit Title to modify its name style.

In the filter component editing interface, you can switch the chosen component to another filter component of the same type. For example, you can switch text drop-down filter component to text list filter Component through the Show Type function.

After you switch the type, the deployed content setting will not be cleared. The specific rules are as follows:

l  If you switch between the text drop-down/text list filter component, the setting options of Set as required, Custom Value List, Binding parameters, Single/Multiple selection, and Actual value display will be retained. All the filtered values will also be retained.

l  If you switch among the date/date interval/date panel filter component, the setting options of Show time and Set as required will be retained while Set optional interval and Binding parameters will be cleared. All the filtered values will be cleared.

l  If you switch among the date/date interval/date panel filter component, and the year/year and month/year month interval/year and quarter filter component, the setting options of Set as required, Set optional interval, and Binding parameters will be cleared. All the filtered values will be cleared as well.

l  If you switch among the tree label/drop-down tree/tree list filter component, the setting option of Set as required will be retained and the filtered values will be cleared.

l  If you switch among the numerical drop-down/numeric interval/interval slider filter component, the setting options of Custom Value List, Set as required, Binding parameters, and Single/Multiple selection will be cleared. All the filtered values will be cleared as well.

l  If the filter component title has not been modified, the component name will dynamically change according to the show type after the show type switch.

In the filter component editing interface, you can set Filter Method as Multiple selection or Single selection to control selecting numbers. For example, set Filter Method as Single selection in the numerical drop-down filter component, then you can select only one filtering value in the drop-down selection.

Set Filter Method as Multiple selection, then you can select multiple filtering values in the drop-down selection.

In the filter component editing interface, you can set the Control Range.

If you have not added any field, move the mouse to the component, a prompt will be given: No bound fields or bound fields cannot control this component.

You can set the style of all filter components in this dashboard in the Filter Component setting, in which you can set the title background, title text, component background, and theme color.

Click Dashboard Style > Passing a value to the jump destination > Filter Component, set the Title Background as pink, the Title Font as Bold, the Component Background as watermelon red, the Rounded Corner as 2, and the Border as 2. Then set the Theme Color of the filter component selection box as gray. 

If you need to set the style of other components in the dashboard, see Dashboard Style.