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.

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.

  

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

  

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.

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

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.

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.