Select Filter in Yeeflow is a dropdown list enabling users to choose a single option, refining data searches. For instance, in a project management module, users can employ a Select Filter to narrow down tasks by priority—options like "High," "Medium," or "Low." In an HR system, the filter may assist in categorizing employee requests, such as "Vacation," "Training," or "Leave." This feature enhances precision and user experience by simplifying the selection of specific attributes within a dataset. Select Filter can be seamlessly applied to analogous controls tied to data sources, promoting a consistent approach across diverse functionalities.
When to use this filed?
A Select Filter with a dropdown list is useful when you want users to choose a single option from a predefined set of values to refine data searches or selections. Use it when:
Categorization: You want to categorize data into specific groups or types, like priority levels, status, or categories.
Uniformity: Ensuring data consistency by allowing users to select from a standardized list of options, preventing input errors.
Limited Choices: When the number of options is manageable, and you want to simplify the selection process by presenting a concise list.
User-friendly Interface: Dropdown lists provide a clean and organized interface, especially when dealing with a large dataset, improving user experience.
Add Select Filter to the form
Firstly, find the Single select control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Select Field
Open the Content > Basic block and set the Title's text of this Select Filter control.
For more information about Title for field control, please refer:
Set the Associated variable for this Select Filter control. When you add a new Search Filter control, a default variable will be generated automatically. You can click the Edit Button to change the name or click the Reset button to bind this Search Filter control to other existing variables.
Then, in the Apply type section. Choose on typing or click on apply button. For more details on Apply types, refer to:
Choice options of Select Filter
In the Application section, select current application or a different application from the dropdown list.
Afterward, move on to the Data Source section. Select the data list under the selected application.
In the Data Filters section, click the condition button to filter the data from the selected data list.
Display Field: Select the field which will be displayed as the value of selected items.
Value Field: Select the field which will be filtered by the value of selected items.
Maximum items: the maximum number of items will be presented within the drop-down list.
Note:
Users need to input from the initial word of when searching for a key field.
Appearance of the Select Filter
Placeholder: Set the text of the placeholder for this Search Filter.
Display Title: Choose display or hide the label of this control. For more information, please refer:
Validation of the Select Filter field
Open the Content > Validation block to set the properties of this Select filter control.
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 call of the Search Filter field
Open the Content > Action block to call a pre-defined action from the drop-down list. This action will be triggered once the value of this image field is changed.
Style the Select 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 or %.
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 set the style of the dropdown list items (choices).
Typography: Set the typography options for the text of dropdown list items.
Align: Set the alignment of text inside each of the dropdown list items. Can be Left, Center or Right.
Padding: Set the Padding of the dropdown list items.
Normal / Hover / Active: Set different styles for normal state hover and active state of each dropdown list items. Styles below are supported to be set separately for normal, hover and active state.
Text Color: Choose the color of the list items' text.
Background Color: Set background color of the drop down list.
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
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 Select 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.
Style of 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.