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.
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.
-
If show icon is on, the two additional options will appear.
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.
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.
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.