# JSTab

## Properties Summarized

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

## Methods Summarized

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

## Properties Detailed

### containsForm

The name of the form displayed in the tab.

**Type**\
[JSForm](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsform)

**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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**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](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmedia)

**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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

**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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

**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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

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

### getUUID()

Returns the UUID of this component.

**Returns:** [UUID](https://docs.servoy.com/reference/servoycore/dev-api/application/uuid)

**Sample**

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