{hidden}
DO NOT EDIT THE CONTENT OF THIS PAGE DIRECTLY, UNLESS YOU KNOW WHAT YOU'RE DOING.
THE STRUCTURE OF THE CONTENT IS VITAL IN BEING ABLE TO EXTRACT CHANGES FROM THE PAGE AND MERGE THEM BACK INTO SERVOY SOURCE{hidden}
{sub-section:description|text=}{sub-section}\\
{table:id=|class=servoy sSummery}{colgroup}{column:padding=0px|width=80px}{column}{column}{column}{colgroup}{tr:style=height: 30px;}{th:colspan=2}Property Summery{th}{tr}{tbody}{tr}{td}[JSForm]{td}{td}[#containsForm]
The name of the form displayed in the tab.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#foreground]
The foreground color of the tab.{td}{tr}{tbody}{tbody}{tr}{td}[JSMedia]{td}{td}[#imageMedia]
The name of the image Media file used.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#name]
The name of the tab.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#relationName]
The name of the relation that links the form which contains the tab
with the form displayed in the tab.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#text]
The text on the tab.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#toolTipText]
The text displayed when hovering over the component with a mouse cursor.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#x]
The X coordinate of the tab.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#y]
The Y coordinate of the tab.{td}{tr}{tbody}{table}\\
{table:id=property|class=servoy sDetail}{colgroup}{column:padding=0px|width=100%}{column}{colgroup}{tr:style=height: 30px;}{th:colspan=1}Property Details{th}{tr}{tbody:id=containsForm|class=node}{tr:id=name}{td}h6.containsForm{td}{tr}{tr:id=des}{td}{sub-section:containsForm_des|text=|trigger=button}{sub-section}{sub-section:containsForm_des|trigger=none|class=sIndent}
Cache
index
true
refresh
100d
showRefresh
true
id
doc
title
Refresh page
showDate
true
retry
Enable
servoy sReturnTypes2100%height: 30px;2Supported ClientssWordListSmartClientsWordListWebClientsWordListNGClientservoy sSummary12%30%58%height: 30px;3Property SummaryThe name of the form displayed in the tab.The foreground color of the tab.The name of the image Media file used.Mnemonic used to switch to tab.The name of the tab.The name of the relation that links the form which contains the tab with the form displayed in the tab.The text on the tab.The text displayed when hovering over the component with a mouse cursor.The X coordinate of the tab.The Y coordinate of the tab.servoy sSummary12%30%58%height: 30px;3Methods SummaryReturns the comment of this component.Returns the UUID of this component.propertyservoy sDetail2100%height:30px2Property DetailscontainsFormname
containsForm
dessIndent
The name of the form displayed in the tab.
{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:containsForm_snc|text=|trigger=button}{sub-section}{sub-section:containsForm_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:containsForm_prs|text=|trigger=button}{sub-section}{sub-section:containsForm_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:containsForm_ret|text=|trigger=button}{sub-section}{sub-section:containsForm_ret|trigger=none|class=sIndent}[JSForm]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:containsForm_see|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:containsForm_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:containsForm_link|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:containsForm_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:containsForm_sam|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:containsForm_sam|trigger=none}{code:language=javascript}
var childForm = solutionModel.newForm('childForm', 'example_data', 'child_table', 'null', false, 400, 300);
var anotherChildForm = solutionModel.newForm('anotherChildForm', 'example_data', 'child_table', 'null', false, 400, 300);
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.containsForm = anotherChildForm;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=foreground|class=node}{tr:id=name}{td}h6.foreground{td}{tr}{tr:id=des}{td}{sub-section:foreground_des|text=|trigger=button}{sub-section}{sub-section:foreground_des|trigger=none|class=sIndent}ret
Returns
sIndentclients
Supported Clients
sIndentSmartClient,WebClient,NGClientsam
Sample
sIdentjavascriptlastDetailRowforegroundname
foreground
dessIndent
The foreground color of the tab.
{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:foreground_snc|text=|trigger=button}{sub-section}{sub-section:foreground_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:foreground_prs|text=|trigger=button}{sub-section}{sub-section:foreground_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:foreground_ret|text=|trigger=button}{sub-section}{sub-section:foreground_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:foreground_see|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:foreground_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:foreground_link|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:foreground_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:foreground_sam|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:foreground_sam|trigger=none}{code:language=javascript}
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.foreground = '#FF0000';
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=imageMedia|class=node}{tr:id=name}{td}h6.imageMedia{td}{tr}{tr:id=des}{td}{sub-section:imageMedia_des|text=|trigger=button}{sub-section}{sub-section:imageMedia_des|trigger=none|class=sIndent}ret
Returns
sIndentclients
Supported Clients
sIndentSmartClient,WebClient,NGClientsam
Sample
sIdentjavascriptlastDetailRowimageMedianame
imageMedia
dessIndent
The name of the image Media file used.
{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:imageMedia_snc|text=|trigger=button}{sub-section}{sub-section:imageMedia_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:imageMedia_prs|text=|trigger=button}{sub-section}{sub-section:imageMedia_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:imageMedia_ret|text=|trigger=button}{sub-section}{sub-section:imageMedia_ret|trigger=none|class=sIndent}[JSMedia]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:imageMedia_see|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:imageMedia_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:imageMedia_link|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:imageMedia_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:imageMedia_sam|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:imageMedia_sam|trigger=none}{code:language=javascript}
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;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=name|class=node}{tr:id=name}{td}h6.name{td}{tr}{tr:id=des}{td}{sub-section:name_des|text=|trigger=button}{sub-section}{sub-section:name_des|trigger=none|class=sIndent}ret
Returns
sIndentclients
Supported Clients
sIndentSmartClient,WebClient,NGClientsam
Sample
sIdentjavascriptlastDetailRowmnemonicname
mnemonic
dessIndent
Mnemonic used to switch to tab.
ret
Returns
sIndentclients
Supported Clients
sIndentSmartClient,WebClient,NGClientsam
Sample
sIdentjavascriptlastDetailRownamename
name
dessIndent
The name of the tab.
{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:name_snc|text=|trigger=button}{sub-section}{sub-section:name_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:name_prs|text=|trigger=button}{sub-section}{sub-section:name_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:name_ret|text=|trigger=button}{sub-section}{sub-section:name_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:name_see|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:name_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:name_link|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:name_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:name_sam|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:name_sam|trigger=none}{code:language=javascript}
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.name = 'firstTabRenamed';
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=relationName|class=node}{tr:id=name}{td}h6.relationName{td}{tr}{tr:id=des}{td}{sub-section:relationName_des|text=|trigger=button}{sub-section}{sub-section:relationName_des|trigger=none|class=sIndent}ret
Returns
sIndentclients
Supported Clients
sIndentSmartClient,WebClient,NGClientsam
Sample
sIdentjavascriptlastDetailRowrelationNamename
relationName
dessIndent
The name of the relation that links the form which contains the tab
with the form displayed in the tab.
{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:relationName_snc|text=|trigger=button}{sub-section}{sub-section:relationName_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:relationName_prs|text=|trigger=button}{sub-section}{sub-section:relationName_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:relationName_ret|text=|trigger=button}{sub-section}{sub-section:relationName_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:relationName_see|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:relationName_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:relationName_link|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:relationName_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:relationName_sam|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:relationName_sam|trigger=none}{code:language=javascript}
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm);
firstTab.relationName = 'parent_table_to_child_table';
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=text|class=node}{tr:id=name}{td}h6.text{td}{tr}{tr:id=des}{td}{sub-section:text_des|text=|trigger=button}{sub-section}{sub-section:text_des|trigger=none|class=sIndent}ret
Returns
sIndentclients
Supported Clients
sIndentSmartClient,WebClient,NGClientsam
Sample
sIdentjavascriptlastDetailRowtextname
text
dessIndent
The text on the tab.
{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:text_snc|text=|trigger=button}{sub-section}{sub-section:text_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:text_prs|text=|trigger=button}{sub-section}{sub-section:text_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:text_ret|text=|trigger=button}{sub-section}{sub-section:text_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:text_see|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:text_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:text_link|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:text_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:text_sam|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:text_sam|trigger=none}{code:language=javascript}
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.text = 'Better Title';
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=toolTipText|class=node}{tr:id=name}{td}h6.toolTipText{td}{tr}{tr:id=des}{td}{sub-section:toolTipText_des|text=|trigger=button}{sub-section}{sub-section:toolTipText_des|trigger=none|class=sIndent}ret
Returns
sIndentclients
Supported Clients
sIndentSmartClient,WebClient,NGClientsam
Sample
sIdentjavascriptlastDetailRowtoolTipTextname
toolTipText
dessIndent
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<b>bolded text</b> and
<font color='blue'>BLUE</font> text as well.</html>
{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:toolTipText_snc|text=|trigger=button}{sub-section}{sub-section:toolTipText_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:toolTipText_prs|text=|trigger=button}{sub-section}{sub-section:toolTipText_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:toolTipText_ret|text=|trigger=button}{sub-section}{sub-section:toolTipText_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:toolTipText_see|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:toolTipText_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:toolTipText_link|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:toolTipText_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:toolTipText_sam|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:toolTipText_sam|trigger=none}{code:language=javascript}
var firstTab = tabs.newTab('firstTab', 'Child Form', childForm, relation);
firstTab.toolTipText = 'Tooltip';
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=x|class=node}{tr:id=name}{td}h6.x{td}{tr}{tr:id=des}{td}{sub-section:x_des|text=|trigger=button}{sub-section}{sub-section:x_des|trigger=none|class=sIndent}ret
Returns
sIndentclients
Supported Clients
sIndentSmartClient,WebClient,NGClientsam
Sample
sIdentjavascriptlastDetailRowxname
x
dessIndent
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.
{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:x_snc|text=|trigger=button}{sub-section}{sub-section:x_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:x_prs|text=|trigger=button}{sub-section}{sub-section:x_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:x_ret|text=|trigger=button}{sub-section}{sub-section:x_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:x_see|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:x_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:x_link|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:x_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:x_sam|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:x_sam|trigger=none}{code:language=javascript}
// 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;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=y|class=node}{tr:id=name}{td}h6.y{td}{tr}{tr:id=des}{td}{sub-section:y_des|text=|trigger=button}{sub-section}{sub-section:y_des|trigger=none|class=sIndent}ret
Returns
sIndentclients
Supported Clients
sIndentSmartClient,WebClient,NGClientsam
Sample
sIdentjavascriptlastDetailRowyname
y
dessIndent
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.
{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:y_snc|text=|trigger=button}{sub-section}{sub-section:y_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:y_prs|text=|trigger=button}{sub-section}{sub-section:y_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:y_ret|text=|trigger=button}{sub-section}{sub-section:y_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:y_see|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:y_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:y_link|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:y_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:y_sam|text=|trigger=button}{sub-section}{div:class=sIndent}{sub-section:y_sam|trigger=none}{code:language=javascript}
// 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;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{table}ret