Edit documentation Edit document
GH-Elements

Filter Tabs

Filter tabs is a gh-element that allows to create different groups of items and to switch them with the help of created tabs. Those groups can be configured using filters.

Functional Characteristics

With this filter you can group items by tabs in your app and easily switch between groups of items.

Value Format

Such as other filters, this one does not have any value.

Element Options

Options of the current element are divided into tabs settings and, actually, settings of the element field.

Field Settings

As usual, the field settings consist of standard and unique additional options.

Settings of filter tabs field

Name Description
App allows to select the application for connection; details...
Bind to table allows to select the element to which the filter will be connected; details...
Show icon allows to display the icon near the filter tab name; details...

App

This is the application whose items will be filtered using tabs.

Bind to Table

This function allows you to select an element to display groups of items filtered in the settings.

Show Icon

This function allows you to add icon near the tab name.

Tabs Settings

These group of settings allows to configure each of your tabs and add the new ones. They vary depending on the Show Icon mode.

  • If show icon is off, tabs settings do not consist extra options.

    Settings of filter tabs without icon

  • If show icon is on, the two additional options will appear.

    Settings of filter tabs with icon

Name Description
Name allows to enter the name of the filter tab; details...
Icon allows to select the icon for the filter tab; details...
Color allows to select the icon color; details...
Filter allows to filter the items that will be displayed in filter tab; details...
Edit allows to edit or delete the tab; details...

Name

THis is the name of the filter tab. You can enter any name you like.

Icon

The icon is displayed near the tab name. It can be displayed or not, depends of Show icon setting.

Color

This is the function that allows to open the color picker and change the icon color.

Filter

Every filter tab has a function that allows to add filters. This is needed to configure which items will be displayed in different tabs. This works as a usual table filter.

Edit

This column contains two buttons for each of filter tab. They allows to edit and delete the tab.

Element Style

The style of the filter tabs can be configured with the help of standard options. They are detail described in Setting Overview. Since each item has unique interpretation types, the current types are shown in end of article.

Style of filter tabs element

Data Model

Since filter tabs has many parts which have to be configured, it also has large data model.

{
    "data_model": {
        "app_id_bind_to": "28704",
        "current_tab": 0,
        "field_id_of_table": "677653",
        "filter_settings": {
            "fields_to_view": [{
                "field_id": 677648,
                "show": 0
            }]
        },
        "interpretation": [],
        "options": [{
            "color": "#05b52c",
            "filters_list": [],
            "icon": "home",
            "name": "All"
        }],
        "send_message": {
            "app_id": "33922",
            "field_id": "239818"
        },
        "show_icon": false,
        "use_default_value": false
    }
}
Name Type Description
app_id_bind_to string contains the ID of the application to which the item is associated with
current_tab number contains the ID of the current filter tab
field_id_of_table string contains the identifier of the table that is associated with the filter
filter_settings object contains all filter settings
fields_to_view array contains all application fields
field_id string contains the field ID
show boolean shows whether the field is displayed in the filter list or not
interpretation array contains all element interpretation type
options array contains all filter tabs and their settings
color string contains the hex code of the icon color
filters_list array contains all filter settings of the option
icon string contains the name of the selected icon
name string contains the name of the tab
send_message object contains the data from settings
app_id string contains ID of the application with that the element is connected
field_id string contains the table field with which the element is connected
show_icon boolean shows whether the icon is displayed or not
use_default_value boolean shows whether the default value is used or not

Filtration

This element is designed to filter other elements, but cannot be filtered itself.

Interpretation

The filter tabs has a big number types of interpretations, but most of them are quite similar.

Types of filter tabs interpretation

Default

This interpretation type allows to display the element as an icon. This is the only one which does not have any action after clicking.

Icon Interpretation

This is the interpretation type that displays the element as an icon that opens the list of filter tabs after clicking.

Icon with Filter Name

This is the same type of interpretation as the previous one, but with the filter name underneath it.

Normal

It allows to display filter tabs above the line. This is useful for placing the element above some table or container.

Column

This element displays the tabs as a column of tabs names in the left side of the container.

Right Column

This is the column of tabs names that is displayed in the right part of the container.

Top

This interpretation type that allows the tabs names to be displayed under the line. It is convenient to place it under some element.