Skip to main content
Checkbox Filter

Enhance Yeeflow forms with Checkbox Filters for multi-select options, improving data search accuracy and user interaction.

Updated over 4 months ago

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:

  1. Multiple line

  2. Rich text

  3. Multiple select

  4. Multiple Meta

  5. Attachment

  6. Image

  7. User - when set to multiple users

  8. Department - when set to multiple departments

  9. 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.

Show control: You can set whether the option box is displayed or not.

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

Title layout: Set the title layout to Default/ Horizontal/ Vertical. 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 , %, em, rem, vw, calc.

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.

  1. Space Between: Set the spacing between options of the control.

  2. Horizontal offset: This allows the field to be moved a certain distance left or right within its container.

    Option item:

    1. Gap between control and option label: Set the spacing between the Checkbox Button.

    2. Item width: Allows users to select ‘inline(auto)’ to automatically adjust the width of each option to fit the content, or ‘Custom’ to manually set the specific width of each option to meet different layout needs.

    3. Control Size: Set the size of the checkbox.

    4. Items Alignment: Set the alignment of this Checkbox filter control as left, center or right.

    5. Padding: Set the Padding of the option item in PX , %, em, rem, vw, calc.

    6. Typography: Set the typography options for the text of the option item.

    7. 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.

    8. Shadow: Set the shadow of the field.


    Control style:

    Set the style of the option control after the checkbox control:

    • Color: Choose the text color of the option control.

    • Background Color: Set background color of the option 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.

Note:

When the Show control button in Content Settings is turned off, the Controls and Options Spacing, Control Size, and Control Style settings are not displayed.


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.


Did this answer your question?