# JSTab

## Properties Summarized

| Type                                                              | Name                          | Summary                                                                                                 |
| ----------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------- |
| [JSForm](/reference/servoycore/dev-api/solutionmodel/jsform.md)   | [containsForm](#containsform) | The name of the form displayed in the tab.                                                              |
| [String](/reference/servoycore/dev-api/js-lib/string.md)          | [foreground](#foreground)     | The foreground color of the tab.                                                                        |
| [JSMedia](/reference/servoycore/dev-api/solutionmodel/jsmedia.md) | [imageMedia](#imagemedia)     | The name of the image Media file used.                                                                  |
| [String](/reference/servoycore/dev-api/js-lib/string.md)          | [mnemonic](#mnemonic)         | Mnemonic used to switch to tab.                                                                         |
| [String](/reference/servoycore/dev-api/js-lib/string.md)          | [name](#name)                 | The name of the tab.                                                                                    |
| [String](/reference/servoycore/dev-api/js-lib/string.md)          | [relationName](#relationname) | The name of the relation that links the form which contains the tab with the form displayed in the tab. |
| [String](/reference/servoycore/dev-api/js-lib/string.md)          | [text](#text)                 | The text on the tab.                                                                                    |
| [String](/reference/servoycore/dev-api/js-lib/string.md)          | [toolTipText](#tooltiptext)   | The text displayed when hovering over the component with a mouse cursor.                                |
| [Number](/reference/servoycore/dev-api/js-lib/number.md)          | [x](#x)                       | The X coordinate of the tab.                                                                            |
| [Number](/reference/servoycore/dev-api/js-lib/number.md)          | [y](#y)                       | The Y coordinate of the tab.                                                                            |

## Methods Summarized

| Type                                                      | Name                        | Summary                                |
| --------------------------------------------------------- | --------------------------- | -------------------------------------- |
| [String](/reference/servoycore/dev-api/js-lib/string.md)  | [getComment()](#getcomment) | Returns the comment of this component. |
| [UUID](/reference/servoycore/dev-api/application/uuid.md) | [getUUID()](#getuuid)       | Returns the UUID of this component.    |

## Properties Detailed

### containsForm

The name of the form displayed in the tab.

**Type**\
[JSForm](/reference/servoycore/dev-api/solutionmodel/jsform.md)

**Sample**

```js
var childForm = solutionModel.newForm('childForm', 'db:/example_data/child_table', null, false, 400, 300);
var anotherChildForm = solutionModel.newForm('anotherChildForm', 'db:/example_data/child_table', null, false, 400, 300);
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.containsForm = anotherChildForm;
```

### foreground

The foreground color of the tab.

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md)

**Sample**

```js
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.foreground = '#FF0000';
```

### imageMedia

The name of the image Media file used.

**Type**\
[JSMedia](/reference/servoycore/dev-api/solutionmodel/jsmedia.md)

**Sample**

```js
var bytes = plugins.file.readFile('d:/ball.jpg');
var ballImage = solutionModel.newMedia('ball.jpg', bytes);
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.imageMedia = ballImage;
```

### mnemonic

Mnemonic used to switch to tab.

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md)

**Sample**

```js
var childForm = solutionModel.newForm('childForm', 'db:/example_data/child_table', null, false, 400, 300);
var anotherChildForm = solutionModel.newForm('anotherChildForm', 'db:/example_data/child_table', null, false, 400, 300);
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.mnemonic = 'a';
```

### name

The name of the tab.

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md)

**Sample**

```js
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.name = 'firstTabRenamed';
```

### relationName

The name of the relation that links the form which contains the tab with the form displayed in the tab.

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md)

**Sample**

```js
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm);
firstTab.relationName = 'parent_table_to_child_table';
```

### text

The text on the tab.

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md)

**Sample**

```js
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.text = 'Better Title';
```

### toolTipText

The text displayed when hovering over the component with a mouse cursor. NOTE: HTML should be used for multi-line tooltips; you can also use any valid HTML tags to format tooltip text. For example: \<html>This includes**bolded text** and \<font color='blue'>BLUE\</font> text as well.\</html>

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md)

**Sample**

```js
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.toolTipText = 'Tooltip';
```

### x

The X coordinate of the tab. This influences the order in which the tabs are displayed. The tabs are displayed in increasing order of the X coordinate. If two tabs have the same X coordinate, then they are displayed in increasing order of the Y coordinate.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
// Create two tabs, then make the second one be displayed to the left of the first
// by setting their X coordinates in the needed order.
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.x = 10;
var secondTab = tabs.newTab('secondTab', 'Another Child Form', anotherChildForm);
secondTab.x = 0;
```

### y

The Y coordinate of the tab. Together with the X coordinate, this influences the order in which the tabs are displayed. The tabs are displayed in increasing order of the X coordinate, and if two tabs have the same X coordinate, then they are displayed in increasing order of the Y coordinate.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
// Create two tabs, then make the second one be displayed to the left of the first
// by setting their X to the same value and Y coordinates in the needed order. 
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.x = 0;
firstTab.y = 10;
var secondTab = tabs.newTab('secondTab', 'Another Child Form', anotherChildForm);
secondTab.x = 0;
secondTab.y = 0;
```

## Methods Detailed

### getComment()

Returns the comment of this component.

**Returns:** [String](/reference/servoycore/dev-api/js-lib/string.md)

**Sample**

```js
var comment = solutionModel.getForm("my_form").getButton("my_button").getComment();
application.output(comment);
```

### getUUID()

Returns the UUID of this component.

**Returns:** [UUID](/reference/servoycore/dev-api/application/uuid.md)

**Sample**

```js
var button_uuid = solutionModel.getForm("my_form").getButton("my_button").getUUID();
application.output(button_uuid.toString());
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jstab.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
