Search filter is a text box control facilitating text-based searches. It empowers users to refine data list searches by specifying attributes. For instance, in a task management system, users can employ search filters to find tasks assigned to a specific team member or due within a certain time frame. In a project database, filters may allow users to narrow down results based on project status or priority. This feature enhances user efficiency by streamlining data retrieval, ensuring a more targeted and relevant outcome.
Add Search Filter to the form
Firstly, find the Search Filter control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Search Filter
Open the Content > Basic block and set the Title's text of this Multiple Metadata control.
For more information about Title for field control, please refer:
Set the Associated variable for this Search 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:
Afterwards, move to Min number of letters section. Set the minimum number of letters need to be input to refresh instances.
Note:
Users need to input from the initial word of when searching for a key field.
Appearance of the Search Filter
Open the Content > Appearance block to set the appearance and layout of this Search Filter control.
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: Understand the label of field controls
Validation of Search filter
Open the Content > Validation block to set the properties of this Search 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 field is changed.
Style the Search 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.
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.
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.