The Sorting Filter is a versatile component in Yeeflow that allows users to customize sorting rules for displaying data in a specific order. You can easily configure the sorting behavior, appearance, and actions to meet your application's needs.
When to Use Sorting Filter
Use the Sorting Filter when you need to:
Sort Data Dynamically: Allow users to sort a data list based on specific fields like "Lead Source" or "Status".
Enhance User Experience: Provide users with intuitive control over how they view data, whether ascending or descending.
Customize Sorting Rules: Allow multi-layered sorting (e.g., first by "Date", then by "Priority").
The Sorting Filter is ideal for scenarios like:
Sales pipeline management
Task tracking
Inventory or contract management
Add Sorting Filter Control
Firstly, find the Sorting Filter control in the Controls Add Panel. Then, drag and drop it into a section or container on your form or dashboard.
Once added, you can configure its settings under the Content, Style, and Advanced tabs to customize its behavior and appearance.
Note: The Sorting Filter control can be combined with other components like Data Table, Gallery, Horizontal Timeline, Vertical Timeline, Collection, and Kanban Board to enhance data organization and improve user experience.
Content Settings
Basic settings
Title
Set the display title for the sorting filter. Example: "Sorting filter"For more information about Title for field control, please refer: Understand the Title of field controls
Filter Variable
Configure the variable associated with the filter. You can reset or edit this variable.
(Example: filter_Sorting)Apply Type
Choose when the sorting rules are applied:Value Change: Sorting applies automatically when the filter value changes.
Click on Apply Button: Sorting is only applied when the user clicks the apply button.
For more details on Apply types, refer to: Understanding Apply type in Yeeflow Data Filter Controls
Sorting List settings
Application
Choose the application where this sorting filter will be applied. This determines the context in which the sorting rules will take effect. (Example: New empty app)Data Source
Select the data source to sort. The data source provides the list of records or items that will be ordered using the sorting filter. Supported data sources include: Data list, Document library and Data report. (Example: Sales Pipeline Checklist)
Sorting List
Add and configure sorting rules that define how the data will be ordered. You can create one or multiple sorting rules based on your needs.Title:
Define a clear and descriptive label for the sorting rule. The title will be displayed to end users for better understanding. Example: Sort Lead Source (ASC)Order By:
Choose the field on which the data will be sorted. This can be any field available in the selected data source, such as:Lead Source: Categorize leads by their origin.
Created Date: Sort records based on the creation date.
Status: Arrange tasks or records based on their progress or priority.
Order:
Set the order in which the selected field values will be displayed:ASC (Ascending): Sorts values in ascending order (e.g., A → Z, 1 → 9, earliest to latest).
DESC (Descending): Sorts values in descending order (e.g., Z → A, 9 → 1, latest to earliest).
Managing Sorting Rules:
You can click the "+" icon to add multiple sorting rules to create layered sorting (e.g., sort first by "Lead Source" and then by "Lead Status").
Use the clone option to quickly duplicate an existing rule and adjust its parameters for faster configuration.
Use the delete option to remove unnecessary sorting rules.
By configuring multiple sorting rules, you can create more refined and user-friendly data displays to meet your business needs.
Appearance Settings
Placeholder: Set the text of the placeholder for this Sorting filter.
Display Title: Choose display or hide the label of this control. For more information, please refer to: Understand the label of field controls
Dynamic Display Rules: Use conditional rules to control when the sorting filter is displayed. Learn more about the Dynamic display rules.
Validation Settings
Readonly: Turn this ON will make this field control as view only status.
Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field.
Action Settings
Value Changed
Configure a pre-defined action from the drop-down list. This action will be triggered once the value of this field is changed.
Style Settings
The Style tab provides options to customize the appearance of the sorting filter:
Field - Editable
Open the Style > Field - Editable block to set the styles of the field control for it's editable status.
Typography: Set the typography options for the text in the field.
Normal / Focus: Set different styles for normal state and focus state of the dropdown list. Styles below are supported to be set separately for Normal and Focus state.
Color: Choose the color of the dropdown list items text.
Background Color: Set background color of the dropdown list. By default, the background color is set as transparent.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options
Placeholder Color: Choose the color of the placeholder text.
Align: Set the alignment of text inside the field control. Can be Left, Center or Right.
Padding: Set the Padding of the field control.
Field Width: Set the width of the field control in PX , %, em, rem, vw, calc.
Field Alignment: Set the alignment of the field control. This will only be effected when the field width is less than the outside container.
Error Message: Set the styles of the error message,
Typography: Set the typography options for the error message.
Color: Choose the color of the error message's text.
Dropdown
Open the Style > Dropdown block to configure the dropdown appearance:
Typography: Set the font family, size, weight, and style for the dropdown text.
Alignment: Align the dropdown list text. Options include: Left, Center, or Right.
Padding: Adjust the padding around the dropdown control (Top, Right, Bottom, Left).
States:
Normal: Default appearance when no action is being performed.
Hover: Appearance when a user hovers over the dropdown.
Active: Appearance when the dropdown is clicked or active.
Styles for each state include:
Text Color: Set the text color for the dropdown items.
Background Color: Choose the background color for the dropdown list.
Border Type: Select the type of border. Options include Default, Solid, Dotted, Dashed, etc.
Radius: Configure the border radius to control the roundness of dropdown corners.
Shadow: Add a shadow to the dropdown for a more dynamic visual effect.
Field - Read Only
Open the Style > Field - Read Only block to set the styles of the field control for it's view only status.
Typography: Set the typography options for the text in the Search Filter
Color: Choose the color of the field's text.
Background Color: Set background color of the field. By default, the background color is set as transparent.
Align: Set the alignment of text inside the field control. Can be Left, Center or Right.
Padding: Set the Padding of the field control.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Title: Set the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced Settings Tab that are applicable to this control.
With the Sorting Filter component, you can easily configure flexible sorting rules for data display, enhancing user experience and meeting business needs.