The Checkbox Filter in Yeeflow is a dynamic feature comprising a list of checkboxes, enabling users to select multiple options simultaneously for refined data retrieval. This functionality is particularly valuable when dealing with datasets that span diverse categories.
For instance, in a project management system, users can utilize the Checkbox Filter to select multiple project statuses such as "In Progress," "Completed," and "On Hold." In an inventory management scenario, checkboxes can represent various product attributes like "High Priority," "Low Stock," or "New Arrivals." This versatile filter empowers users to apply multiple criteria concurrently, enhancing the granularity of search queries. The Checkbox Filter ensures flexibility and precision in data selection, offering an interactive and user-friendly approach to handling complex datasets across various Yeeflow modules.
Add Checkbox Filter
Firstly, find the Checkbox Filter control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Checkbox Filter field
Open the Content > Basic block and set the Title's text of this Checkbox Filter control. For more information about Title for field control, please refer:
Set the Associated variable for this Checkbox Filter control. When you add a new Checkbox 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 Checkbox Filter control to other existing variables. For more information, please refer:
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 Checkbox 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.
Please note: The following types of fields cannot be used in the value field:
Multiple line
Rich text
Multiple select
Multiple Meta
Attachment
Image
User - when set to multiple users
Department - when set to multiple departments
Cost center - when set to multiple cost centers.
Maximum items: the maximum number of items will be presented within the drop-down list.
Appearance of the Checkbox Filter field
Open the Content > Appearance block to set the appearance and layout of this Checkbox Filter control.
Layout: Set the layout of the choices to be displayed horizontal or vertical.
Search enabled: This functionality is beneficial when dealing with an extensive list of options. It conserves space on the form and allows users to search for and reveal specific options by typing in the search bar. When the search is enabled, the Placeholder setting shows toSet the text of the placeholder for this field.
Note:
Users need to input from the initial word of when searching for a key field.
More/Less enabled: This feature is useful when dealing with content that can be expanded or collapsed. It allows users to reveal additional information or reduce content visibility as needed.
Dropdown enabled: This style is suitable when the list of options is long. It saves space on the form and only reveals the options when the user clicks on the dropdown.
Display Title: Choose display or hide the label of this control. For more information, please refer: Understand the title of field controls
Vertical Align: When Title Layout is set to horizontal, you can set the vertical alignment to Top, Center or Bottom.
Title Width: Set the Width for the title in PX or %.
Dynamic Display Rules: When you set a dynamic display rules, it behaves differently based on specific conditions and rules.
Validation of the Checkbox Filter field
Open the Content > Validation block to set the properties of this Checkbox 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 Checkbox 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 Checkbox filter control
Set the styles when the display style is set to Checkbox filter control.
Option items
Open the Style > Option items block to set the styles of the field control.
Space Between: Set the spacing between options of the control.
Gap between control and option label: Set the spacing between the Checkbox Button.
Item width: choose to set the item width inline or customize the item width.
Control size: Set the size of all the chackeboxes.
Items alignment: Set the alignment of this Checkbox filter control as left, center or right.
Normal / Active / Disabled: Set different styles for normal, active and disabled state of the Checkbox filter control. Styles below are supported to be set separately for normal, active and disabled state.
Color: Choose the front color of the Checkbox button.
Background Color: Set background color of the Checkbox button.
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.
Width – Set the Width of the Checkbox filter control.
Option Label: Set the style of the option label after the Checkbox filter control:
Typography: Set the typography options for the text of the option label.
Color: Choose the text color of the option label.
Background Color: Set background color of the option label.
More Less toggle
Open the Style > More Less toggle block to set the styles of the more less toggle.
Padding: Set the Padding of the More Less button in PX or %.
Alignment: Set the alignment of the text in the More Less button area.
Typography: Set the typography options for the More Less button 's text.
Color: Choose the color of the More Less button 's text.
Background Color: Set background color of the More Less button. 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: Set the shadow of the field.
Style of title
Style the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced options that are applicable to this control.