---
url: https://gudhub.com/ru/docs/gh-elements/view-tab/
title: "View Tab\n                #"
description: "View tab is a gh element that works with view container. It is designed for switching the views. That's why it doesn't work properly on its own. The main purpos"
lang: uk
updated: 2026-09-11T23:34:47.298Z
---

# View Tab [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#view-tab)

**View tab** is a gh-element that works with [view container](https://gudhub.com/ru/docs/gh-elements/view-container/). It is designed for switching the views. That's why it doesn't work properly on its own.

## Functional Characteristics [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#functional-characteristics)

The main purpose of this element is to switch views in the [View Container](https://gudhub.com/ru/docs/gh-elements/view-container/). A tab should be created for each species. You can use this element to create a menu in your application.

## Value Format [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#value-format)

This element has no field value.

## Element Options [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#element-options)

Three groups of settings allows to configure the element and tabs.

### Field and View Settings [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#field-and-view-settings)

The first group is Field Settings that consists of only standard options. The second one is View Settings. They allow to select the application and the field with which the element will be connected.

![Settings of view tab field](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/view-tab-field-view-settings.jpg "View tab field settings")

| Name | Description |
| :-- | :-- |
| Application | allows to select the source application; [details...](#application) |
| Field Send Message | allows to select the field with which the element will be connected; [details...](#field-send-message) |
| Show icon | allows to add icon to the tab name; [details...](#show-icon) |

#### **Application** [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#application)

This ias the application from which the list of fields will be taken.

#### **Field Send Message** [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#field-send-message)

This is the field that will be associated with the tabs. This means that the tabs will allow you to switch views in this particular field. Therefore, you need to select the [view container](https://gudhub.com/ru/docs/gh-elements/view-container/) here.

#### **Show icon** [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#show-icon)

This is the function that allows to display the icon selected in [Tabs Settings](#tabs-settings) near the tab name.

### Tabs Settings [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#tabs-settings)

This is a group of settings that allows you to configure each tab separately. Depends of [Show icon](#show-icon) function, the number of settings may vary.

![Settings of view tab](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/view-tab-settings.jpg "Tabs settings")

When it is on, appears the additional [Icon](#icon) and [Color](#color).

![Settings of view tab with icon](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/view-tab-settings-with-icon.jpg "View tab settings with icon")

The order of the view tabs must match the order of the views in the [view container](https://gudhub.com/ru/docs/gh-elements/view-container/).

| Name | Description |
| :-- | :-- |
| Name | allows to enter the tab name; [details...](#name) |
| Icon | allows to select the tab icon; [details...](#icon) |
| Color | allows to select the icon color; [details...](#color) |
| Application | allows to select the source application; [details...](#application) |
| View name | allows you to select the view to which the tab will be linked; [details...](#view-name) |
| Edit | allows to update or delete the tab; [details...](#edit) |

#### **Name** [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#name)

This is the name which will be displayed in the tabs.

#### **Icon** [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#icon)

This is the icon which will be displayed in element near the tab name.

#### **Color** [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#color)

This function allows to open the color picker and select the color of the [icon](#icon).

#### **Tab Application** [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#tab-application)

This is the application from which the views for connecting will be taken.

#### **View name** [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#view-name)

This is the view that is connected with certain tab.

#### **Edit** [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#edit)

This column contains two buttons for updating and deleting tabs.

## Element Style [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#element-style)

This element have no additional options that could customize its style. You can read about standard settings of element style in [Setting Overview](https://gudhub.com/ru/docs/understanding-gudhub/gh-elements-structure/setting-overview/) and about interpretation [below](#interpretation).

![Style of view tab element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/view-tab-element-style.jpg "View tab element style")

## Data Model [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#data-model)

The view tab has a rather large data model.

Копировать

```json
{
    "data_model": {
        "current_tab": 0,
        "interpretation": [],
        "options": [{
            "app_id": "23790",
            "color": "#0b73b0",
            "icon": "lock",
            "name": "View 1",
            "view_id": "1524761"
        }],
        "send_message": {
            "app_id": "27290",
            "field_id": "677581"
        },
        "show_icon": 1,
        "use_default_value": false
    }
}
```

| Name | Type | Description |
| :-- | :-- | :-- |
| current\_tab | `number` | _contains ID of the application that is shown by default_ |
| interpretation | `array` | _contains all element interpretation types_ |
| options | `array` | _contains all data about application options_ |
| app\_id | `string` | _contains the ID of the source application_ |
| color | `string` | _contains the hex code of the icon color_ |
| icon | `string` | _contains name of the tab icon_ |
| name | `string` | _contains the name of the tab_ |
| view\_id | `string` | _contains ID of the view which is connected with the tab_ |
| send\_message | `object` | _contains data needed for sending message_ |
| app\_id | `string` | _contains ID of the destination application for sending message_ |
| field\_id | `string` | _contains ID of the destination field for sending message_ |
| show\_icon | `boolean` | _shows whether the icon is displayed near the tab name or not_ |
| use\_default\_value | `boolean` | _shows whether the default value is used or not_ |

## Filtration [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#filtration)

This is one of that elements which have no ways to be filtered.

## Interpretation [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#interpretation)

Most types of interpretation differ only in the location in the container.

![Types of view tab interpretation](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/view-tab-interpretation-types.jpg "View tab interpetation types")

### Default [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#default)

This interpretation allows the element to be displayed as an icon. It is the only type that does not allows to switch the tabs.

### Form [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#form)

This is the interpretation type that allows to display tabs names above the line. It can be used above the view container.

### Column [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#column)

This type of interpretation allows tabs to be displayed on the left side.

### Right Column [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#right-column)

This interpretation type allows the tabs to be displayed on the right side.

### Top [#](https://gudhub.com/ru/docs/gh-elements/view-tab/#top)

The last type allows to display tabs names below the line. It is useful when you need to place the tab names below the view container.