Page History

{hiddendiv:style=display:none}
DO NOT EDIT THE CONTENT OF THIS PAGE DIRECTLY (EXCEPT INSIDE THE DIV BELOW WITH ID=DESCRIPTION), UNLESS YOU KNOW WHAT YOU'RE DOING.
		THE STRUCTURE OF THE CONTENT IS VITAL IN BEING ABLE TO EXTRACTAUTO CHANGESUPDATE FROM THE PAGECONTENT ANDTHROUGH MERGETHE THEM BACK INTO SERVOY SOURCE{hiddenDOC GENERATOR{div}
{sub-sectiondiv:id=description|text=}{sub-sectiondiv}\\ 

{table:id=|class=servoy sReturnTypes}{tr:style=height: 30px;}{th}Extends{th}{tr}{tr}{td}{span:class=sWordList}[JSComponent]{span}{td}{tr}{table}\\ 

{table:id=|class=servoy sSummary}{colgroup}{column:width=80px|padding=0px}{column}{column}{column}{colgroup}{tr:style=height: 30px;}{th:colspan=2}Constants Summary{th}{tr}{tbody}{tr}{td}[Number]{td}{td}[#ACCORDION_PANEL]
Constant used for creating accordion panel from tab panel, by setting its tabOrientation.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#DEFAULT_ORIENTATION]
Constant used for restoring a tab panel orientation to it's initial state.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#HIDE]
Constant used for creating a tab panel that does not show tabs, by setting its tabOrientation.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#SPLIT_HORIZONTAL]
Constant used for creating horizontal split pane from tab panel, by setting its tabOrientation.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#SPLIT_VERTICAL]
Constant used for creating vertical split pane from tab panel, by setting its tabOrientation.{td}{tr}{tbody}{table}\\ 

{table:id=|class=servoy sSummary}{colgroup}{column:width=80px|padding=0px}{column}{column}{column}{colgroup}{tr:style=height: 30px;}{th:colspan=2}Property Summary{th}{tr}{tbody}{tr}{td}[Number]{td}{td}[#anchors]
Enables a component to stick to a specific side of form and/or to 
grow or shrink when a window is resized.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#background]
The background color of the component.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#borderType]
The type, color and style of border of the component.{td}{tr}{tbody}{tbody}{tr}{td}[Boolean]{td}{td}[#enabled]
The enable state of the component, default true.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#fontType]
The font type of the component.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#foreground]
The foreground color of the component.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#formIndex]
The Z index of this component.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#groupID]
A String representing a group ID for this component.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#height]
The height in pixels of the component.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#name]
The name of the component.{td}{tr}{tbody}{tbody}{tr}{td}[JSMethod]{td}{td}[#onChange]
Method to be executed when the selected tab is changed in the tab panel or divider position is changed in split pane.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#printSliding]
Enables an element to resize based on its content and/or move when printing.{td}{tr}{tbody}{tbody}{tr}{td}[Boolean]{td}{td}[#printable]
Flag that tells if the component should be printed or not when the form is printed.{td}{tr}{tbody}{tbody}{tr}{td}[Boolean]{td}{td}[#scrollTabs]
Flag that tells how to arrange the tabs if they don't fit on a single line.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#styleClass]
The name of the style class that should be applied to this component.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#tabOrientation]
Specifies either the position of the tabs related to the tab panel or the type of tab\-panel.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#tabSeq]
An index that specifies the position of the component in the tab sequence.{td}{tr}{tbody}{tbody}{tr}{td}[Boolean]{td}{td}[#transparent]
Flag that tells if the component is transparent or not.{td}{tr}{tbody}{tbody}{tr}{td}[Boolean]{td}{td}[#visible]
The visible property of the component, default true.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#width]
The width in pixels of the component.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#x]
The x coordinate of the component on the form.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#y]
The y coordinate of the component on the form.{td}{tr}{tbody}{table}\\ 

{table:id=|class=servoy sSummary}{colgroup}{column:width=80px|padding=0px}{column}{column}{column}{colgroup}{tr:style=height: 30px;}{th:colspan=2}Method Summary{th}{tr}{tbody}{tr}{td}[Object]{td}{td}[#getDesignTimeProperty]\()
Get a design\-time property of an element.{td}{tr}{tbody}{tbody}{tr}{td}[JSTab]{td}{td}[#getTab]\(name)
Returns a JSTab instance representing the tab which has the specified name.{td}{tr}{tbody}{tbody}{tr}{td}[JSTab]\[]{td}{td}[#getTabs]\()
Returns an array of JSTab instances holding the tabs of the tab panel.{td}{tr}{tbody}{tbody}{tr}{td}[UUID]{td}{td}[#getUUID]\()
Returns the UUID of this component.{td}{tr}{tbody}{tbody}{tr}{td}[JSTab]{td}{td}[#newTab]\(name, text, form)
Adds a new tab with the text label and JSForm.{td}{tr}{tbody}{tbody}{tr}{td}[JSTab]{td}{td}[#newTab]\(name, text, form, relation)
Adds a new tab with the text label and JSForm and JSRelation (can be null for unrelated).{td}{tr}{tbody}{tbody}{tr}{td}[Object]{td}{td}[#putDesignTimeProperty]\()
Set a design\-time property of an element.{td}{tr}{tbody}{tbody}{tr}{td}[Object]{td}{td}[#removeDesignTimeProperty]\()
Clear a design\-time property of an element.{td}{tr}{tbody}{tbody}{tr}{td}void{td}{td}[#removeTab]\(name)
Removes the tab with the specified name from the tab panel.{td}{tr}{tbody}{table}\\ 

{table:id=constant|class=servoy sDetail}{colgroup}{column:width=100%|padding=0px}{column}{colgroup}{tr:style=height: 30px;}{th:colspan=1}Constants Details{th}{tr}{tbody:id=ACCORDION_PANEL|class=node}{tr:id=name}{td}h6.ACCORDION_PANEL{td}{tr}{builder-show:permission=edit}{tr:id=desret}{td}{sub-section:ACCORDION_PANEL_des|trigger=button|text=}{sub-section}{sub-section:ACCORDION_PANEL_des|trigger=none|*Returns*\\{div:class=sIndent}Replace with description{sub-section[Number]{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=sncsam}{td}*SinceSample*\\{sub-section:ACCORDION_PANEL_snc|trigger=button|text=}{sub-section}{sub-section:ACCORDION_PANEL_snc|trigger=none|class=sIndent} Replace with version info{sub-section{div:class=sIndent}{code:language=javascript}
var accordion = myForm.newTabPanel('accordion', 10, 10, 620, 460);
accordion.tabOrientation = JSTabPanel.ACCORDION_PANEL;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-show}{builder-show:permission=edittbody}{tbody:id=DEFAULT_ORIENTATION}{tr:id=name}{td}h6.DEFAULT_ORIENTATION{td}{tr}{tr:id=prsret}{td}*ParametersReturns*\\{sub-section:ACCORDION_PANEL_prs|trigger=button|text=}{sub-section}{sub-section:ACCORDION_PANEL_prs|trigger=none|class=sIndent}{sub-sectiondiv:class=sIndent}[Number]{div}{td}{tr}{builder-show}{tr:id=retsam}{td}*ReturnsSample*\\{sub-section:ACCORDION_PANEL_ret|trigger=button|text=}{sub-section}{sub-section:ACCORDION_PANEL_ret|trigger=none|div:class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:ACCORDION_PANEL_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:ACCORDION_PANEL_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit{code:language=javascript}
var splitPane = myForm.newTabPanel('splitPane', 10, 10, 620, 460);
splitPane.tabOrientation = JSTabPanel.SPLIT_HORIZONTAL;
// (...) some code when you decide it's better to revert the orientation
splitPane.tabOrientation = JSTabPanel.DEFAULT_ORIENTATION;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=HIDE}{tr:id=name}{td}h6.HIDE{td}{tr}{tr:id=linkret}{td}*External linksReturns*\\{sub-section:ACCORDION_PANEL_link|trigger=button|text=}{sub-section}{div:div:class=sIndent}{sub-section:ACCORDION_PANEL_link|trigger=none}{sub-section}{[Number]{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:ACCORDION_PANEL_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:ACCORDION_PANEL_sam|trigger=none}{code:language=javascript}
var accordionsplitPane = myForm.newTabPanel('accordionsplitPane', 10, 10, 620, 460);
accordionsplitPane.tabOrientation = JSTabPanel.ACCORDION_PANELHIDE;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=DEFAULT_ORIENTATION|class=nodeSPLIT_HORIZONTAL}{tr:id=name}{td}h6.DEFAULTSPLIT_ORIENTATIONHORIZONTAL{td}{tr}{builder-showtr:permissionid=editret}{tr:id=destd}*Returns*\\{div:class=sIndent}[Number]{div}{td}{sub-section:DEFAULT_ORIENTATION_des|trigger=button|text=}{sub-section}{sub-section:DEFAULT_ORIENTATION_des|trigger=none|class=sIndent}Replace with description{sub-sectiontr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
var splitPane = myForm.newTabPanel('splitPane', 10, 10, 620, 460);
splitPane.tabOrientation = JSTabPanel.SPLIT_HORIZONTAL;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-showtbody}{builder-showtbody:permissionid=editSPLIT_VERTICAL}{tr:id=snc}name}{td}h6.SPLIT_VERTICAL{td}*Since*\\{sub-section:DEFAULT_ORIENTATION_snc|trigger=button|text=}{sub-section}{sub-section:DEFAULT_ORIENTATION_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs{tr}{tr:id=ret}{td}*ParametersReturns*\\{sub-section:DEFAULT_ORIENTATION_prs|trigger=button|text=}{sub-section}{sub-section:DEFAULT_ORIENTATION_prs|trigger=none|div:class=sIndent}{sub-section[Number]{div}{td}{tr}{builder-show}{tr:id=retsam}{td}*ReturnsSample*\\{sub-section:DEFAULT_ORIENTATION_ret|trigger=button|text=}{sub-section}{sub-section:DEFAULT_ORIENTATION_ret|trigger=none|class=sIndent}[Number]{sub-sectiondiv:class=sIndent}{code:language=javascript}
var splitPane = myForm.newTabPanel('splitPane', 10, 10, 620, 460);
splitPane.tabOrientation = JSTabPanel.SPLIT_VERTICAL;
{code}{div}{td}{tr}{builder-showtr:permission=editclass=lastDetailRow}{td}{td}{tr:id=see}{tbody}{tdtable}*Also see*\\{sub-section:DEFAULT_ORIENTATION_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:DEFAULT_ORIENTATION_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit 

{table:id=property|class=servoy sDetail}{colgroup}{column:width=100%|padding=0px}{column}{colgroup}{tr:style=height: 30px;}{th:colspan=1}Property Details{th}{tr}{tbody:id=anchors}{tr:id=linkname}{td}*External links*\\{sub-section:DEFAULT_ORIENTATION_link|trigger=button|text=}{sub-section}h6.anchors{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}{sub-section:DEFAULT_ORIENTATION_link|trigger=none}{sub-section}{[Number]{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:DEFAULT_ORIENTATION_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:DEFAULT_ORIENTATION_sam|trigger=none}{code:language=javascript}
var splitPaneform = myFormsolutionModel.newTabPanel('splitPanenewForm('mediaForm', 'db:/example_data/parent_table', null, false, 400, 300);
var strechAllDirectionsLabel = form.newLabel('Strech all directions', 10, 10, 620380, 460280);
splitPanestrechAllDirectionsLabel.tabOrientationbackground = JSTabPanel.SPLIT_HORIZONTAL;
// (...) some code when you decide it's better to revert the orientation
splitPane.tabOrientation = JSTabPanel.DEFAULT_ORIENTATION;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=HIDE|class=node}{tr:id=name}{td}h6.HIDE{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:HIDE_des|trigger=button|text=}{sub-section}{sub-section:HIDE_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:HIDE_snc|trigger=button|text=}{sub-section}{sub-section:HIDE_snc|trigger=none|class=sIndent} Replace with version info{sub-section'red';
strechAllDirectionsLabel.anchors = SM_ANCHOR.ALL;	
var strechVerticallyLabel = form.newLabel('Strech vertically', 10, 10, 190, 280);
strechVerticallyLabel.background = 'green';
strechVerticallyLabel.anchors = SM_ANCHOR.WEST | SM_ANCHOR.NORTH | SM_ANCHOR.SOUTH;
var strechHorizontallyLabel = form.newLabel('Strech horizontally', 10, 10, 380, 140);
strechHorizontallyLabel.background = 'blue';
strechHorizontallyLabel.anchors = SM_ANCHOR.NORTH | SM_ANCHOR.WEST | SM_ANCHOR.EAST;
var stickToTopLeftCornerLabel = form.newLabel('Stick to top-left corner', 10, 10, 200, 100);
stickToTopLeftCornerLabel.background = 'orange';
stickToTopLeftCornerLabel.anchors = SM_ANCHOR.NORTH | SM_ANCHOR.WEST; // This is equivalent to SM_ANCHOR.DEFAULT 
var stickToBottomRightCornerLabel = form.newLabel('Stick to bottom-right corner', 190, 190, 200, 100);
stickToBottomRightCornerLabel.background = 'pink';
stickToBottomRightCornerLabel.anchors = SM_ANCHOR.SOUTH | SM_ANCHOR.EAST;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-showtbody}{builder-showtbody:permissionid=editbackground}{tr:id=prs}name}{td}h6.background{td}*Parameters*\\{sub-section:HIDE_prs|trigger=button|text=}{sub-section}{sub-section:HIDE_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:}{tr}{tr:id=ret}{td}*Returns*\\{sub-section:HIDE_ret|trigger=button|text=}{sub-section}{sub-section:HIDE_ret|trigger=none|div:class=sIndent}[NumberString]{sub-sectiondiv}{td}{tr}{builder-show:permission=edit}{tr:id=seesam}{td}*Also seeSample*\\{sub-section:HIDE_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:HIDE_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:HIDE_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:HIDE_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:HIDE_sam|trigger=button|text=}{sub-section}code:language=javascript}
// This property can be used on all types of components.
// Here it is illustrated only for labels and fields.
var greenLabel = form.newLabel('Green',10,10,100,50);
greenLabel.background = 'green'; // Use generic names for colors.	
var redField = form.newField('parent_table_text',JSField.TEXT_FIELD,10,110,100,30);
redField.background = '#FF0000'; // Use RGB codes for colors.
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=borderType}{tr:id=name}{td}h6.borderType{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[String]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{sub-section:HIDE_sam|trigger=none}{code:code:language=javascript}
//HINT: To know exactly var splitPanethe notation of this property set it in the designer and then read it once out through the solution model.
var field = myFormform.newTabPanelnewField('splitPane'my_table_text', JSField.TEXT_FIELD, 10, 10, 620100, 46020);
splitPanefield.tabOrientationborderType = JSTabPanel.HIDEsolutionModel.createLineBorder(1,'#ff0000');
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=SPLIT_HORIZONTAL|class=nodeenabled}{tr:id=name}{td}h6.SPLIT_HORIZONTALenabled{td}{tr}{builder-showtr:permission=edit}{tr:id=desid=ret}{td}*Returns*\\{div:class=sIndent}[Boolean]{div}{td}{sub-section:SPLIT_HORIZONTAL_des|trigger=button|text=}{sub-section}{sub-section:SPLIT_HORIZONTAL_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=sncsam}{td}*SinceSample*\\{sub-section:SPLIT_HORIZONTAL_snc|trigger=button|text=}{sub-section}{sub-section:SPLIT_HORIZONTAL_snc|trigger=none|class=sIndent} Replace with version info{sub-sectiondiv:class=sIndent}{code:language=javascript}
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300);
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.enabled = false;
{code}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prstr:class=lastDetailRow}{td}{td}*Parameters*\\{sub-section:SPLIT_HORIZONTAL_prs|trigger=button|text=}{sub-section}{sub-section:SPLIT_HORIZONTAL_prs|trigger=none|class=sIndent}{sub-section}{tr}{tbody}{tbody:id=fontType}{tr:id=name}{td}h6.fontType{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:SPLIT_HORIZONTAL_ret|trigger=button|text=}{sub-section}{sub-section:SPLIT_HORIZONTAL_ret|trigger=none|class=sIndent}[Number]{sub-sectiondiv:class=sIndent}[String]{div}{td}{tr}{builder-show:permission=edit}{tr:id=seesam}{td}*Also seeSample*\\{sub-section:SPLIT_HORIZONTAL_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:SPLIT_HORIZONTAL_see|trigger=none}{sub-section}{divdiv:class=sIndent}{code:language=javascript}
var label = form.newLabel('Text here', 10, 50, 100, 20);
label.fontType = solutionModel.createFont('Times New Roman',1,14);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-showtbody}{builder-showtbody:permissionid=editforeground}{tr:id=linkname}{td}*External links*\\{sub-section:SPLIT_HORIZONTAL_link|trigger=button|text=}{sub-section}h6.foreground{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}{sub-section:SPLIT_HORIZONTAL_link|trigger=none}{sub-section}{[String]{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:SPLIT_HORIZONTAL_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:SPLIT_HORIZONTAL_sam|trigger=none}{code:language=javascript}
var// splitPaneThis = myForm.newTabPanel('splitPaneproperty can be used on all types of components.
// Here it is illustrated only for labels and fields.
var labelWithBlueText = form.newLabel('Blue text', 10, 10, 620100, 46030);
splitPane.tabOrientation = JSTabPanel.SPLIT_HORIZONTAL;
{code}{sub-section}{labelWithBlueText.foreground = 'blue'; // Use generic names for colors.
var fieldWithYellowText = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 50, 100, 20);
fieldWithYellowText.foreground = '#FFFF00'; // Use RGB codes for colors.
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=SPLIT_VERTICAL|class=nodeformIndex}{tr:id=name}{td}h6.SPLIT_VERTICALformIndex{td}{tr}{builder-show:permission=edit}{tr:id=desret}{td}{sub-section:SPLIT_VERTICAL_des|trigger=button|text=}{sub-section}{sub-section:SPLIT_VERTICAL_des|trigger=none|*Returns*\\{div:class=sIndent}Replace with description{sub-section[Number]{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=sncsam}{td}*SinceSample*\\{sub-section:SPLIT_VERTICAL_snc|trigger=button|text=}{sub-section}{sub-section:SPLIT_VERTICAL_snc|trigger=none|class=sIndent} Replace with version info{sub-sectiondiv:class=sIndent}{code:language=javascript}
var labelBelow = form.newLabel('Green', 10, 10, 100, 50);
labelBelow.background = 'green';	
labelBelow.formIndex = 10;
var fieldAbove = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 30);
fieldAbove.background = '#FF0000';
fieldAbove.formIndex = 20;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-showtbody}{builder-showtbody:permissionid=editgroupID}{tr:id=prsname}{td}*Parameters*\\{sub-section:SPLIT_VERTICAL_prs|trigger=button|text=}{sub-section}{sub-section:SPLIT_VERTICAL_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{trh6.groupID{td}{tr}{tr:id=ret}{td}*Returns*\\{sub-section:SPLIT_VERTICAL_ret|trigger=button|text=}{sub-section}{sub-section:SPLIT_VERTICAL_ret|trigger=none|div:class=sIndent}[NumberString]{sub-sectiondiv}{td}{tr}{builder-show:permission=edit}{tr:id=seesam}{td}*Also seeSample*\\{sub-section:SPLIT_VERTICAL_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:SPLIT_VERTICAL_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:SPLIT_VERTICAL_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:SPLIT_VERTICAL_link|trigger=none}{sub-section}{divcode:language=javascript}
var form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 400, 300);
var label = form.newLabel('Green', 10, 10, 100, 20);
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20);
label.groupID = 'someGroup';
field.groupID = 'someGroup';	
forms['someForm'].elements.someGroup.enabled = false;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-showtbody}{tbody:id=height}{tr:id=sam}name}{td}h6.height{td}*Sample*\\{sub-section:SPLIT_VERTICAL_sam|trigger=button|text=}{sub-section}}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}{sub-section:SPLIT_VERTICAL_sam|trigger=none[Number]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
var splitPanefield = myFormform.newTabPanelnewField('splitPaneparent_table_text', JSField.TEXT_FIELD, 10, 10, 620100, 46020);
splitPane.tabOrientation = JSTabPanel.SPLIT_VERTICAL;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{table}\\ 

{table:id=property|class=servoy sDetail}{colgroup}{column:width=100%|padding=0px}{column}{colgroup}{tr:style=height: 30px;}{th:colspan=1}Property Details{thapplication.output('original width: ' + field.width);
application.output('original height: ' + field.height);
field.width = 200;
field.height = 100;
application.output('modified width: ' + field.width);
application.output('modified height: ' + field.height);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=anchors|class=nodename}{tr:id=name}{td}h6.anchorsname{td}{tr}{builder-show:permission=edit}{tr:id=desret}{td}{sub-section:anchors_des|trigger=button|text=}{sub-section}{sub-section:anchors_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:anchors_snc|trigger=button|text=}{sub-section}{sub-section:anchors_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:anchors_prs|trigger=button|text=}{sub-section}{sub-section:anchors_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show*Returns*\\{div:class=sIndent}[String]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
var form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 620, 300);
var label = form.newLabel('Label', 10, 10, 150, 150);
label.name = 'myLabel'; // Give a name to the component.
forms['someForm'].controller.show()
// Now use the name to access the component.
forms['someForm'].elements['myLabel'].text = 'Updated text';
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=onChange}{tr:id=name}{td}h6.onChange{td}{tr}{tr:id=ret}{td}*Returns*\\{sub-section:anchors_ret|trigger=button|text=}{sub-section}{sub-section:anchors_ret|trigger=none|div:class=sIndent}[NumberJSMethod]{sub-sectiondiv}{td}{tr}{builder-show:permission=edit}{tr:id=seesam}{td}*Also seeSample*\\{sub-section:anchors_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:anchors_see|trigger=none}{sub-section}{code:language=javascript}
var onChangeMethod = form.newMethod('function onTabChange(previousIndex, event) { application.output("Tab changed from previous index " + previousIndex + " at " + event.getTimestamp()); }');
var tabPanel = form.newTabPanel('tabs', 10, 10, 620, 460);
tabPanel.newTab('tab1', 'Child Two', childOne);
tabPanel.newTab('tab2', 'Child Two', childTwo);
tabPanel.onChange = onChangeMethod;
{code}{div}{td}{tr}{builder-show}{builder-show:permission=edittr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=printSliding}{tr:id=linkname}{td}*External links*\\{sub-section:anchors_link|trigger=button|text=}{sub-section}h6.printSliding{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}{sub-section:anchors_link|trigger=none}{sub-section}{[Number]{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:anchors_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:anchors_sam|trigger=none}{code:language=javascript}
var form = solutionModel.newForm('mediaFormprintForm', 'db:/example_data/parent_table', null, false, 400, 300);
var strechAllDirectionsLabelslidingLabel = form.newLabel('StrechSome long alltext directionshere', 10, 10, 3805, 2805);
strechAllDirectionsLabelslidingLabel.backgroundprintSliding = 'red';
strechAllDirectionsLabel.anchors =SM_PRINT_SLIDING.GROW_HEIGHT | SM_ANCHOR.ALL;	
var strechVerticallyLabel = form.newLabel('Strech vertically', 10, 10, 190, 280);
strechVerticallyLabel.background = 'green';
strechVerticallyLabel.anchors = SM_ANCHOR.WEST | SM_ANCHOR.NORTH | SM_ANCHOR.SOUTH;
var strechHorizontallyLabel = form.newLabel('Strech horizontally', 10, 10, 380, 140);
strechHorizontallyLabel.background = 'blue';
strechHorizontallyLabel.anchors = SM_ANCHOR.NORTH | SM_ANCHOR.WEST | SM_ANCHOR.EAST;
var stickToTopLeftCornerLabel = form.newLabel('Stick to top-left corner', 10, 10, 200, 100);
stickToTopLeftCornerLabel.background = 'orange';
stickToTopLeftCornerLabel.anchors = SM_ANCHOR.NORTH | SM_ANCHOR.WEST; // This is equivalent to SM_ANCHOR.DEFAULT 
var stickToBottomRightCornerLabel = form.newLabel('Stick to bottom-right corner', 190, 190, 200, 100);
stickToBottomRightCornerLabel.background = 'pink';
stickToBottomRightCornerLabel.anchors = SM_ANCHOR.SOUTH | SM_ANCHOR.EAST;
{code}{sub-sectionPRINT_SLIDING.GROW_WIDTH;
slidingLabel.background = 'gray';
forms['printForm'].controller.showPrintPreview();
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=printable}{tr:id=name}{td}h6.printable{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Boolean]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300);
var printedField = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
var notPrintedField = form.newField('parent_table_id', JSField.TEXT_FIELD, 10, 40, 100, 20);
notPrintedField.printable = false; // This field won't show up in print preview and won't be printed.
forms['printForm'].controller.showPrintPreview()
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=background|class=nodescrollTabs}{tr:id=name}{td}h6.backgroundscrollTabs{td}{tr}{builder-show:permission=edit}{tr:id=desret}{td}{sub-section:background_des|trigger=button|text=}{sub-section}{sub-section:background_des|trigger=none|*Returns*\\{div:class=sIndent}Replace with description{sub-section[Boolean]{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=sncsam}{td}*SinceSample*\\{sub-section:background_snc|trigger=button|text=}{sub-section}{sub-section:background_snc|trigger=none|class=sIndent} Replace with version info{sub-sectiondiv:class=sIndent}{code:language=javascript}
var tabPanel = form.newTabPanel('tabs', 10, 10, 200, 200);
tabPanel.newTab('tab1', 'Child Two', childOne, parentToChild); // The first form uses the relation.
tabPanel.newTab('tab2', 'Child Two', childTwo);
tabPanel.scrollTabs = true;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-showtbody}{builder-showtbody:permissionid=editstyleClass}{tr:id=prsname}{td}*Parameters*\\{sub-section:background_prs|trigger=button|text=}{sub-section}{sub-section:background_prs|trigger=none|class=sIndent}{sub-section}{h6.styleClass{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:background_ret|trigger=button|text=}{sub-section}{sub-section:background_ret|trigger=none|div:class=sIndent}[String]{sub-sectiondiv}{td}{tr}{builder-show:permission=edit}{tr:id=seesam}{td}*Also seeSample*\\{sub-section:background_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:background_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:background_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:background_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:background_sam|trigger=button|text=}{sub-section}code:language=javascript}
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300);
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
var style = solutionModel.newStyle('myStyle','field.fancy { background-color: yellow; }');
form.styleName = 'myStyle'; // First set the style on the form.
field.styleClass = 'fancy'; // Then set the style class on the field.
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=tabOrientation}{tr:id=name}{td}h6.tabOrientation{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}{sub-section:background_sam|trigger=none[Number]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
// This property can be used on all types of components.
// Here it is illustrated only for labels and fields.
var greenLabelvar tabPanel = form.newLabelnewTabPanel('Greentabs', 10, 10,100 620,50 460);
greenLabel.background = 'green'tabPanel.newTab('tab1', 'Child Two', childOne, parentToChild); // The Usefirst genericform namesuses forthe colorsrelation.	
var redField = form.newField('parent_table_text',JSField.TEXT_FIELD,10,110,100,30);
redField.background = '#FF0000'; // Use RGB codes for colors.
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=borderType|class=node}{tr:id=name}{td}h6.borderType{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:borderType_des|trigger=button|text=}{sub-section}{sub-section:borderType_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:borderType_snc|trigger=button|text=}{sub-section}{sub-section:borderType_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:borderType_prs|trigger=button|text=}{sub-section}{sub-section:borderType_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:borderType_ret|trigger=button|text=}{sub-section}{sub-section:borderType_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:borderType_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:borderType_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:borderType_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:borderType_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:borderType_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:borderType_sam|trigger=none}{code:language=javascript}
//HINT: To know exactly the notation of this property set it in the designer and then read it once out through the solution model.
var field = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.borderType = solutionModel.createLineBorder(1,'#ff0000');
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=enabled|class=node}{tr:id=name}{td}h6.enabled{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:enabled_des|trigger=button|text=}{sub-section}{sub-section:enabled_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:enabled_snc|trigger=button|text=}{sub-section}{sub-section:enabled_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:enabled_prs|trigger=button|text=}{sub-section}{sub-section:enabled_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:enabled_ret|trigger=button|text=}{sub-section}{sub-section:enabled_ret|trigger=none|class=sIndent}[Boolean]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:enabled_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:enabled_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:enabled_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:enabled_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:enabled_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:enabled_sam|trigger=none}{code:language=javascript}
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300);
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.enabled = false;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=fontType|class=node}{tr:id=name}{td}h6.fontType{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:fontType_des|trigger=button|text=}{sub-section}{sub-section:fontType_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:fontType_snc|trigger=button|text=}{sub-section}{sub-section:fontType_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:fontType_prs|trigger=button|text=}{sub-section}{sub-section:fontType_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:fontType_ret|trigger=button|text=}{sub-section}{sub-section:fontType_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:fontType_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:fontType_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:fontType_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:fontType_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:fontType_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:fontType_sam|trigger=none}{code:language=javascript}
var label = form.newLabel('Text here', 10, 50, 100, 20);
label.fontType = solutionModel.createFont('Times New Roman',1,14);
{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}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:foreground_des|trigger=button|text=}{sub-section}{sub-section:foreground_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:foreground_snc|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:foreground_sam|trigger=none}{code:language=javascript}
// This property can be used on all types of components.
// Here it is illustrated only for labels and fields.
var labelWithBlueText = form.newLabel('Blue text', 10, 10, 100, 30);
labelWithBlueText.foreground = 'blue'; // Use generic names for colors.
var fieldWithYellowText = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 50, 100, 20);
fieldWithYellowText.foreground = '#FFFF00'; // Use RGB codes for colors.
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=formIndex|class=node}{tr:id=name}{td}h6.formIndex{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:formIndex_des|trigger=button|text=}{sub-section}{sub-section:formIndex_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:formIndex_snc|trigger=button|text=}{sub-section}{sub-section:formIndex_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:formIndex_prs|trigger=button|text=}{sub-section}{sub-section:formIndex_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:formIndex_ret|trigger=button|text=}{sub-section}{sub-section:formIndex_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:formIndex_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:formIndex_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:formIndex_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:formIndex_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:formIndex_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:formIndex_sam|trigger=none}{code:language=javascript}
var labelBelow = form.newLabel('Green', 10, 10, 100, 50);
labelBelow.background = 'green';	
labelBelow.formIndex = 10;
var fieldAbove = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 30);
fieldAbove.background = '#FF0000';
fieldAbove.formIndex = 20;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=groupID|class=node}{tr:id=name}{td}h6.groupID{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:groupID_des|trigger=button|text=}{sub-section}{sub-section:groupID_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:groupID_snc|trigger=button|text=}{sub-section}{sub-section:groupID_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:groupID_prs|trigger=button|text=}{sub-section}{sub-section:groupID_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:groupID_ret|trigger=button|text=}{sub-section}{sub-section:groupID_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:groupID_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:groupID_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:groupID_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:groupID_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:groupID_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:groupID_sam|trigger=none}{code:language=javascript}
var form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 400, 300);
var label = form.newLabel('Green', 10, 10, 100, 20);
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20);
label.groupID = 'someGroup';
field.groupID = 'someGroup';	
forms['someForm'].elements.someGroup.enabled = false;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=height|class=node}{tr:id=name}{td}h6.height{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:height_des|trigger=button|text=}{sub-section}{sub-section:height_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:height_snc|trigger=button|text=}{sub-section}{sub-section:height_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:height_prs|trigger=button|text=}{sub-section}{sub-section:height_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:height_ret|trigger=button|text=}{sub-section}{sub-section:height_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:height_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:height_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:height_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:height_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:height_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:height_sam|trigger=none}{code:language=javascript}
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
application.output('original width: ' + field.width);
application.output('original height: ' + field.height);
field.width = 200;
field.height = 100;
application.output('modified width: ' + field.width);
application.output('modified height: ' + field.height);
{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}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:name_des|trigger=button|text=}{sub-section}{sub-section:name_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:name_snc|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:name_sam|trigger=none}{code:language=javascript}
var form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 620, 300);
var label = form.newLabel('Label', 10, 10, 150, 150);
label.name = 'myLabel'; // Give a name to the component.
forms['someForm'].controller.show()
// Now use the name to access the component.
forms['someForm'].elements['myLabel'].text = 'Updated text';
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=onChange|class=node}{tr:id=name}{td}h6.onChange{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:onChange_des|trigger=button|text=}{sub-section}{sub-section:onChange_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:onChange_snc|trigger=button|text=}{sub-section}{sub-section:onChange_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:onChange_prs|trigger=button|text=}{sub-section}{sub-section:onChange_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:onChange_ret|trigger=button|text=}{sub-section}{sub-section:onChange_ret|trigger=none|class=sIndent}[JSMethod]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:onChange_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:onChange_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:onChange_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:onChange_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:onChange_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:onChange_sam|trigger=none}{code:language=javascript}
var onChangeMethod = form.newMethod('function onTabChange(previousIndex, event) { application.output("Tab changed from previous index " + previousIndex + " at " + event.getTimestamp()); }');
var tabPanel = form.newTabPanel('tabs', 10, 10, 620, 460);
tabPanel.newTab('tab1', 'Child Two', childOne);
tabPanel.newTab('tab2', 'Child Two', childTwo);
tabPanel.onChange = onChangeMethod;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=printSliding|class=node}{tr:id=name}{td}h6.printSliding{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:printSliding_des|trigger=button|text=}{sub-section}{sub-section:printSliding_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:printSliding_snc|trigger=button|text=}{sub-section}{sub-section:printSliding_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:printSliding_prs|trigger=button|text=}{sub-section}{sub-section:printSliding_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:printSliding_ret|trigger=button|text=}{sub-section}{sub-section:printSliding_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:printSliding_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:printSliding_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:printSliding_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:printSliding_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:printSliding_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:printSliding_sam|trigger=none}{code:language=javascript}
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300);
var slidingLabel = form.newLabel('Some long text here', 10, 10, 5, 5);
slidingLabel.printSliding = SM_PRINT_SLIDING.GROW_HEIGHT | SM_PRINT_SLIDING.GROW_WIDTH;
slidingLabel.background = 'gray';
forms['printForm'].controller.showPrintPreview();
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=printable|class=node}{tr:id=name}{td}h6.printable{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:printable_des|trigger=button|text=}{sub-section}{sub-section:printable_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:printable_snc|trigger=button|text=}{sub-section}{sub-section:printable_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:printable_prs|trigger=button|text=}{sub-section}{sub-section:printable_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:printable_ret|trigger=button|text=}{sub-section}{sub-section:printable_ret|trigger=none|class=sIndent}[Boolean]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:printable_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:printable_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:printable_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:printable_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:printable_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:printable_sam|trigger=none}{code:language=javascript}
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300);
var printedField = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
var notPrintedField = form.newField('parent_table_id', JSField.TEXT_FIELD, 10, 40, 100, 20);
notPrintedField.printable = false; // This field won't show up in print preview and won't be printed.
forms['printForm'].controller.showPrintPreview()
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=scrollTabs|class=node}{tr:id=name}{td}h6.scrollTabs{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:scrollTabs_des|trigger=button|text=}{sub-section}{sub-section:scrollTabs_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:scrollTabs_snc|trigger=button|text=}{sub-section}{sub-section:scrollTabs_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:scrollTabs_prs|trigger=button|text=}{sub-section}{sub-section:scrollTabs_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:scrollTabs_ret|trigger=button|text=}{sub-section}{sub-section:scrollTabs_ret|trigger=none|class=sIndent}[Boolean]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:scrollTabs_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:scrollTabs_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:scrollTabs_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:scrollTabs_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:scrollTabs_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:scrollTabs_sam|trigger=none}{code:language=javascript}
var tabPanel = form.newTabPanel('tabs', 10, 10, 200, 200);
tabPanel.newTab('tab1', 'Child Two', childOne, parentToChild); // The first form uses the relation.
tabPanel.newTab('tab2', 'Child Two', childTwo);
tabPanel.scrollTabs = true;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=styleClass|class=node}{tr:id=name}{td}h6.styleClass{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:styleClass_des|trigger=button|text=}{sub-section}{sub-section:styleClass_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:styleClass_snc|trigger=button|text=}{sub-section}{sub-section:styleClass_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:styleClass_prs|trigger=button|text=}{sub-section}{sub-section:styleClass_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:styleClass_ret|trigger=button|text=}{sub-section}{sub-section:styleClass_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:styleClass_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:styleClass_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:styleClass_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:styleClass_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:styleClass_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:styleClass_sam|trigger=none}{code:language=javascript}
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300);
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
var style = solutionModel.newStyle('myStyle','field.fancy { background-color: yellow; }');
form.styleName = 'myStyle'; // First set the style on the form.
field.styleClass = 'fancy'; // Then set the style class on the field.
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=tabOrientation|class=node}{tr:id=name}{td}h6.tabOrientation{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:tabOrientation_des|trigger=button|text=}{sub-section}{sub-section:tabOrientation_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:tabOrientation_snc|trigger=button|text=}{sub-section}{sub-section:tabOrientation_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:tabOrientation_prs|trigger=button|text=}{sub-section}{sub-section:tabOrientation_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:tabOrientation_ret|trigger=button|text=}{sub-section}{sub-section:tabOrientation_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:tabOrientation_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:tabOrientation_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:tabOrientation_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:tabOrientation_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:tabOrientation_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:tabOrientation_sam|trigger=none}{code:language=javascript}
var tabPanel = form.newTabPanel('tabs', 10, 10, 620, 460);
tabPanel.newTab('tab1', 'Child Two', childOne, parentToChild); // The first form uses the relation.
tabPanel.newTab('tab2', 'Child Two', childTwo);
// The SM_ALIGNMENT constants TOP, RIGHT, BOTTOM and LEFT can be used to put the
// tabs into the needed position. Use HIDE to hide the tabs. Use DEFAULT_ORIENTATION to restore it to it's initial state.
// The constants SPLIT_HORIZONTAL, SPLIT_VERTICAL can be used to create a split pane,
// where the first tab will be the first component and the second tab will the second component.
// ACCORDION_PANEL can be used to create an accordion pane.
tabPanel.tabOrientation = SM_ALIGNMENT.BOTTOM;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=tabSeq|class=node}{tr:id=name}{td}h6.tabSeq{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:tabSeq_des|trigger=button|text=}{sub-section}{sub-section:tabSeq_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:tabSeq_snc|trigger=button|text=}{sub-section}{sub-section:tabSeq_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:tabSeq_prs|trigger=button|text=}{sub-section}{sub-section:tabSeq_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:tabSeq_ret|trigger=button|text=}{sub-section}{sub-section:tabSeq_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:tabSeq_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:tabSeq_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:tabSeq_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:tabSeq_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:tabSeq_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:tabSeq_sam|trigger=none}{code:language=javascript}
// Create three fields. Based on how they are placed, by default they will come one
// after another in the tab sequence.
var fieldOne = form.newField('parent_table_id', JSField.TEXT_FIELD, 10, 10, 100, 20);
var fieldTwo = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20);
var fieldThree = form.newField('parent_table_id', JSField.TEXT_FIELD, 10, 70, 100, 20);
// Set the third field come before the first in the tab sequence, and remove the 
// second field from the tab sequence.
fieldOne.tabSeq = 2;
fieldTwo.tabSeq = SM_DEFAULTS.IGNORE;
fieldThree.tabSeq = 1;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=transparent|class=node}{tr:id=name}{td}h6.transparent{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:transparent_des|trigger=button|text=}{sub-section}{sub-section:transparent_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:transparent_snc|trigger=button|text=}{sub-section}{sub-section:transparent_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:transparent_prs|trigger=button|text=}{sub-section}{sub-section:transparent_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:transparent_ret|trigger=button|text=}{sub-section}{sub-section:transparent_ret|trigger=none|class=sIndent}[Boolean]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:transparent_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:transparent_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:transparent_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:transparent_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:transparent_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:transparent_sam|trigger=none}{code:language=javascript}
// Load an image from disk an create a Media object based on it.
var imageBytes = plugins.file.readFile('d:/ball.jpg');
var media = solutionModel.newMedia('ball.jpg', imageBytes);
// Put on the form a label with the image.
var image = form.newLabel('', 10, 10, 100, 100);
image.imageMedia = media;
// Put two fields over the image. The second one will be transparent and the
// image will shine through.
var nonTransparentField = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 20, 100, 20);
var transparentField = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 50, 100, 20);
transparentField.transparent = true;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=visible|class=node}{tr:id=name}{td}h6.visible{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:visible_des|trigger=button|text=}{sub-section}{sub-section:visible_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:visible_snc|trigger=button|text=}{sub-section}{sub-section:visible_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:visible_prs|trigger=button|text=}{sub-section}{sub-section:visible_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:visible_ret|trigger=button|text=}{sub-section}{sub-section:visible_ret|trigger=none|class=sIndent}[Boolean]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:visible_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:visible_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:visible_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:visible_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:visible_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:visible_sam|trigger=none}{code:language=javascript}
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300);
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.visible = false;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=width|class=node}{tr:id=name}{td}h6.width{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:width_des|trigger=button|text=}{sub-section}{sub-section:width_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:width_snc|trigger=button|text=}{sub-section}{sub-section:width_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:width_prs|trigger=button|text=}{sub-section}{sub-section:width_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:width_ret|trigger=button|text=}{sub-section}{sub-section:width_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:width_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:width_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:width_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:width_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:width_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:width_sam|trigger=none}{code:language=javascript}
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
application.output('original width: ' + field.width);
application.output('original height: ' + field.height);
field.width = 200;
field.height = 100;
application.output('modified width: ' + field.width);
application.output('modified height: ' + field.height);
{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}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:x_des|trigger=button|text=}{sub-section}{sub-section:x_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:x_snc|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:x_sam|trigger=none}{code:language=javascript}
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
application.output('original location: ' + field.x + ', ' + field.y);
field.x = 90;
field.y = 90;
application.output('changed location: ' + field.x + ', ' + field.y);
{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}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:y_des|trigger=button|text=}{sub-section}{sub-section:y_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:y_snc|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{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|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:y_sam|trigger=none}{code:language=javascript}
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
application.output('original location: ' + field.x + ', ' + field.y);
field.x = 90;
field.y = 90;
application.output('changed location: ' + field.x + ', ' + field.y);
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{table}\\ 

{table:id=function|class=servoy sDetail}{colgroup}{column:width=100%|padding=0px}{column}{colgroup}{tr:style=height: 30px;}{th:colspan=1}Method Details{th}{tr}{tbody:id=getDesignTimeProperty|class=node}{tr:id=name}{td}h6.getDesignTimeProperty{td}{tr}{tr:id=sig}{td}{span:style=float: left; margin-right: 5px;}[Object]{span}{span:id=iets|style=float: left; font-weight: bold;}getDesignTimeProperty{span}{span:id=iets|style=float: left;}\(){span}{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:getDesignTimeProperty_des|trigger=button|text=}{sub-section}{sub-section:getDesignTimeProperty_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:getDesignTimeProperty_snc|trigger=button|text=}{sub-section}{sub-section:getDesignTimeProperty_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:getDesignTimeProperty_prs|trigger=button|text=}{sub-section}{sub-section:getDesignTimeProperty_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:getDesignTimeProperty_ret|trigger=button|text=}{sub-section}{sub-section:getDesignTimeProperty_ret|trigger=none|class=sIndent}[Object]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:getDesignTimeProperty_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getDesignTimeProperty_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:getDesignTimeProperty_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getDesignTimeProperty_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:getDesignTimeProperty_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getDesignTimeProperty_sam|trigger=none}{code:language=javascript}
var frm = solutionModel.getForm('orders')
var fld = frm.getField('fld')
var prop = fld.getDesignTimeProperty('myprop')
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=getTab-String|class=node}{tr:id=name}{td}h6.getTab{td}{tr}{tr:id=sig}{td}{span:style=float: left; margin-right: 5px;}[JSTab]{span}{span:id=iets|style=float: left; font-weight: bold;}getTab{span}{span:id=iets|style=float: left;}\(name){span}{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:getTab-String_des|trigger=button|text=}{sub-section}{sub-section:getTab-String_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:getTab-String_snc|trigger=button|text=}{sub-section}{sub-section:getTab-String_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{tr:id=prs}{td}*Parameters*\\{sub-section:getTab-String_prs|trigger=button|text=}{sub-section}{sub-section:getTab-String_prs|trigger=none|class=sIndent}\{[String]} name -- The name of the tab that should be returned.
{sub-section}{td}{tr}{tr:id=ret}{td}*Returns*\\{sub-section:getTab-String_ret|trigger=button|text=}{sub-section}{sub-section:getTab-String_ret|trigger=none|class=sIndent}[JSTab] -- A JSTab instance represented the requested tab.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:getTab-String_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getTab-String_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:getTab-String_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getTab-String_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:getTab-String_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getTab-String_sam|trigger=none}{code:language=javascript}
var tabPanel = form.newTabPanel('tabs', 10, 10, 620, 460);
tabPanel.newTab('tab1', 'Child Two', childOne);
tabPanel.newTab('tab2', 'Child Two', childTwo);
tabPanel.getTab('tab2').text = 'Child Two Changed';
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=getTabs|class=node}{tr:id=name}{td}h6.getTabs{td}{tr}{tr:id=sig}{td}{span:style=float: left; margin-right: 5px;}[JSTab]\[]{span}{span:id=iets|style=float: left; font-weight: bold;}getTabs{span}{span:id=iets|style=float: left;}\(){span}{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:getTabs_des|trigger=button|text=}{sub-section}{sub-section:getTabs_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:getTabs_snc|trigger=button|text=}{sub-section}{sub-section:getTabs_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:getTabs_prs|trigger=button|text=}{sub-section}{sub-section:getTabs_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:getTabs_ret|trigger=button|text=}{sub-section}{sub-section:getTabs_ret|trigger=none|class=sIndent}[JSTab]\[] -- An array of JSTab instances representing all tabs of this tabpanel.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:getTabs_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getTabs_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:getTabs_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getTabs_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{
tabPanel.newTab('tab2', 'Child Two', childTwo);
// The SM_ALIGNMENT constants TOP, RIGHT, BOTTOM and LEFT can be used to put the
// tabs into the needed position. Use HIDE to hide the tabs. Use DEFAULT_ORIENTATION to restore it to it's initial state.
// The constants SPLIT_HORIZONTAL, SPLIT_VERTICAL can be used to create a split pane,
// where the first tab will be the first component and the second tab will the second component.
// ACCORDION_PANEL can be used to create an accordion pane.
tabPanel.tabOrientation = SM_ALIGNMENT.BOTTOM;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=tabSeq}{tr:id=name}{td}h6.tabSeq{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{sub-section:getTabs_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getTabs_sam|trigger=none}{code:language=javascript}
var tabPanelcode:language=javascript}
// Create three fields. Based on how they are placed, by default they will come one
// after another in the tab sequence.
var fieldOne = form.newTabPanelnewField('tabsparent_table_id', JSField.TEXT_FIELD, 10, 10, 620100, 46020);
tabPanel.newTab('tab1', 'Child Two', childOne);
tabPanel.newTab('tab2', 'Child Two', childTwo);
var tabs = tabPanel.getTabs();
for (var i=0; i<tabs.length; i++)
	application.output("Tab " + i + " has text " + tabs[i].text);
{code}{sub-section}{var fieldTwo = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20);
var fieldThree = form.newField('parent_table_id', JSField.TEXT_FIELD, 10, 70, 100, 20);
// Set the third field come before the first in the tab sequence, and remove the 
// second field from the tab sequence.
fieldOne.tabSeq = 2;
fieldTwo.tabSeq = SM_DEFAULTS.IGNORE;
fieldThree.tabSeq = 1;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=getUUID|class=nodetransparent}{tr:id=name}{td}h6.getUUIDtransparent{td}{tr}{tr:id=sigret}{td}*Returns*\\{span:style=float: left; margin-right: 5px;}[UUID]{span}{span:id=iets|style=float: left; font-weight: bold;}getUUID{span}{span:id=iets|style=float: left;}\(){spandiv:class=sIndent}[Boolean]{div}{td}{tr}{builder-show:permission=edit}{tr:id=dessam}{td}{sub-section:getUUID_des|trigger=button|text=}{sub-section}{sub-section:getUUID_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:getUUID_snc|trigger=button|text=}{sub-section}{sub-section:getUUID_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:getUUID_prs|trigger=button|text=}{sub-section}{sub-section:getUUID_prs|trigger=none|class=sIndent}{sub-section*Sample*\\{div:class=sIndent}{code:language=javascript}
// Load an image from disk an create a Media object based on it.
var imageBytes = plugins.file.readFile('d:/ball.jpg');
var media = solutionModel.newMedia('ball.jpg', imageBytes);
// Put on the form a label with the image.
var image = form.newLabel('', 10, 10, 100, 100);
image.imageMedia = media;
// Put two fields over the image. The second one will be transparent and the
// image will shine through.
var nonTransparentField = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 20, 100, 20);
var transparentField = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 50, 100, 20);
transparentField.transparent = true;
{code}{div}{td}{tr}{builder-show}{tr:idclass=retlastDetailRow}{td}*Returns*\\{sub-section:getUUID_ret|trigger=button|text=}{sub-section}{sub-section:getUUID_ret|trigger=none|class=sIndent}[UUID]{sub-section}{td}{tr}{builder-show:permission=edittbody}{trtbody:id=seevisible}{td}*Also see*\\{sub-section:getUUID_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getUUID_see|trigger=none}{sub-section}{div}tr:id=name}{td}h6.visible{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=linkret}{td}*External linksReturns*\\{sub-section:getUUID_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getUUID_link|trigger=none}{sub-section}{[Boolean]{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:getUUID_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:getUUID_sam|trigger=none}{code:language=javascript}
var button_uuid = solutionModel.getForm("my_form").getButton("my_button").getUUID();
application.output(button_uuid.toString())code:language=javascript}
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300);
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.visible = false;
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=newTab-String_String_JSForm|class=nodewidth}{tr:id=name}{td}h6.newTab{td}{tr}{tr:id=sig}{td}{span:style=float: left; margin-right: 5px;}[JSTab]{span}{span:id=iets|style=float: left; font-weight: bold;}newTab{span}{span:id=iets|style=float: left;}\(name, text, form){span}h6.width{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{builder-showtr:permission=edit}{tr:id=des}{td}{sub-section:newTab-String_String_JSForm_des|trigger=button|text=}{sub-section}{sub-section:newTab-String_String_JSForm_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:newTab-String_String_JSForm_snc|trigger=button|text=}{sub-section}{sub-section:newTab-String_String_JSForm_snc|trigger=none|class=sIndent} Replace with version info{sub-sectionid=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
application.output('original width: ' + field.width);
application.output('original height: ' + field.height);
field.width = 200;
field.height = 100;
application.output('modified width: ' + field.width);
application.output('modified height: ' + field.height);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-showtbody}{tbody:id=x}{tr:id=prsname}{td}*Parameters*\\{sub-section:newTab-String_String_JSForm_prs|trigger=button|text=}{sub-section}{sub-section:newTab-String_String_JSForm_prs|trigger=none|class=sIndent}\{[String]} name -- The name of the new tab.
\{[String]} text -- The text to be displayed on the new tab.
\{[JSForm]} form -- The JSForm instance that should be displayed in the new tab.
{sub-sectionh6.x{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{tr:id=retsam}{td}*ReturnsSample*\\{sub-section:newTab-String_String_JSForm_ret|trigger=button|text=}{sub-section}{sub-section:newTab-String_String_JSForm_ret|trigger=none|class=sIndent}[JSTab] -- A JSTab instance representing the newly created and added tab.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:newTab-String_String_JSForm_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:newTab-String_String_JSForm_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:newTab-String_String_JSForm_link|trigger=button|text=}{sub-section}div:class=sIndent}{code:language=javascript}
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
application.output('original location: ' + field.x + ', ' + field.y);
field.x = 90;
field.y = 90;
application.output('changed location: ' + field.x + ', ' + field.y);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=y}{tr:id=name}{td}h6.y{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}{sub-section:newTab-String_String_JSForm_link|trigger=none}{sub-section}{[Number]{div}{td}{tr}{builder-showtr}{tr:id=sam}{td}*Sample*\\{sub-section:newTab-String_String_JSForm_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:newTab-String_String_JSForm_sam|trigger=none}{code:language=javascript}
// Create a parent form.
var form = solutionModel.newForm('parentForm', 'db:/example_data/parent_table', null, false, 640, 480);
// Create a first child form.
var childOne = solutionModel.newForm('childOne', 'db:/example_data/child_table', null, false, 400, 300);
childOne}
var field = form.newField('childparent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
// Create a relation to link the parent form to the first child form.
var parentToChild = solutionModel.newRelation('parentToChild','db:/example_data/parent_table','db:/example_data/child_table',JSRelation.INNER_JOIN);
parentToChild.newRelationItem('parent_table_id','=','child_table_parent_id');
// Create a second child form.
var childTwo = solutionModel.newForm('childTwo', 'db:/example_data/my_table', null, false, 400, 300);
childTwo.newField('my_table_image', JSField.IMAGE_MEDIA, 10, 10, 100, 100);
// Create a tab panel and add two tabs to it, with the two child forms.
var tabPanel = form.newTabPanel('tabs', 10, 10, 620, 460);
tabPanel.newTab('tab1', 'Child Two', childOne, parentToChild); // The first form uses the relation.
tabPanel.newTab('tab2', 'Child Two', childTwo);
{code}{sub-section}{
application.output('original location: ' + field.x + ', ' + field.y);
field.x = 90;
field.y = 90;
application.output('changed location: ' + field.x + ', ' + field.y);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{table}\\ 

{table:id=function|class=servoy sDetail}{colgroup}{column:width=100%|padding=0px}{column}{colgroup}{tr:style=height: 30px;}{th:colspan=1}Method Details{th}{tr}{tbody:id=getDesignTimeProperty}{tr:id=name}{td}h6.getDesignTimeProperty{td}{tr}{tr:id=sig}{td}{span:style=margin-right: 5px;}[Object]{span}{span:style=font-weight: bold;}getDesignTimeProperty{span}{span}\(){span}{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Object]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
var frm = solutionModel.getForm('orders')
var fld = frm.getField('fld')
var prop = fld.getDesignTimeProperty('myprop')
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=newTabgetTab-String_String_JSForm_Object|class=node}{tr:id=name}{td}h6.newTabgetTab{td}{tr}{tr:id=sig}{td}{span:style=float: left; margin-right: 5px;}[JSTab]{span}{span:id=iets|style=float: left; font-weight: bold;}newTabgetTab{span}{span}\(name){span}{td}{tr}{tr:id=iets|style=float: left;}\(name, text, form, relation){span=prs}{td}*Parameters*\\{div:class=sIndent}\{[String]} name -- The name of the tab that should be returned.
{div}{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[JSTab] -- A JSTab instance represented the requested tab.{div}{td}{tr}{builder-show:permission=edit}{tr:id=dessam}{td}{sub-section:newTab-String_String_JSForm_Object_des|trigger=button|text=}{sub-section}{sub-section:newTab-String_String_JSForm_Object_des|trigger=none|class=sIndent}Replace with description{sub-section*Sample*\\{div:class=sIndent}{code:language=javascript}
var tabPanel = form.newTabPanel('tabs', 10, 10, 620, 460);
tabPanel.newTab('tab1', 'Child Two', childOne);
tabPanel.newTab('tab2', 'Child Two', childTwo);
tabPanel.getTab('tab2').text = 'Child Two Changed';
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-showtbody}{builder-showtbody:permissionid=editgetTabs}{tr:id=sncname}{td}*Since*\\{sub-section:newTab-String_String_JSForm_Object_snc|trigger=button|text=}{sub-section}{sub-section:newTab-String_String_JSForm_Object_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{tr:id=prs}{td}*Parameters*\\{sub-section:newTab-String_String_JSForm_Object_prs|trigger=button|text=}{sub-section}{sub-section:newTab-String_String_JSForm_Object_prs|trigger=none|class=sIndent}\{[String]} name -- The name of the new tab.
\{[String]} text -- The text to be displayed on the new tab.
\{[JSForm]} form -- The JSForm instance that should be displayed in the new tab.
\{[Object]} relation -- A JSRelation object that relates the parent form with the form
                         that will be displayed in the new tab.
{sub-sectionh6.getTabs{td}{tr}{tr:id=sig}{td}{span:style=margin-right: 5px;}[JSTab]\[]{span}{span:style=font-weight: bold;}getTabs{span}{span}\(){span}{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[JSTab]\[] -- An array of JSTab instances representing all tabs of this tabpanel.{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
var tabPanel = form.newTabPanel('tabs', 10, 10, 620, 460);
tabPanel.newTab('tab1', 'Child Two', childOne);
tabPanel.newTab('tab2', 'Child Two', childTwo);
var tabs = tabPanel.getTabs();
for (var i=0; i<tabs.length; i++)
	application.output("Tab " + i + " has text " + tabs[i].text);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=getUUID}{tr:id=name}{td}h6.getUUID{td}{tr}{tr:id=sig}{td}{span:style=margin-right: 5px;}[UUID]{span}{span:style=font-weight: bold;}getUUID{span}{span}\(){span}{td}{tr}{tr:id=ret}{td}*Returns*\\{sub-section:newTab-String_String_JSForm_Object_ret|trigger=button|text=}{sub-section}{sub-section:newTab-String_String_JSForm_Object_ret|trigger=none|class=sIndent}[JSTab] -- A JSTab instance representing the newly created and added tab.{sub-sectiondiv:class=sIndent}[UUID]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
var button_uuid = solutionModel.getForm("my_form").getButton("my_button").getUUID();
application.output(button_uuid.toString());
{code}{div}{td}{tr}{builder-showtr:permission=editclass=lastDetailRow}{td}{td}{tr:id=see}{td}*Also see*\\{sub-section:tbody}{tbody:id=newTab-String_String_JSForm_Object_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:newTab-String_String_JSForm_Object_see|trigger=none}{sub-section}{div}{tr:id=name}{td}h6.newTab{td}{tr}{tr:id=sig}{td}{span:style=margin-right: 5px;}[JSTab]{span}{span:style=font-weight: bold;}newTab{span}{span}\(name, text, form){span}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=linkprs}{td}*External linksParameters*\\{sub-section:newTab-String_String_JSForm_Object_link|trigger=button|text=}{sub-section}div:class=sIndent}\{[String]} name -- The name of the new tab.
\{[String]} text -- The text to be displayed on the new tab.
\{[JSForm]} form -- The JSForm instance that should be displayed in the new tab.
{div}{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}{sub-section:newTab-String_String_JSForm_Object_link|trigger=none}{sub-section}{[JSTab] -- A JSTab instance representing the newly created and added tab.{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:newTab-String_String_JSForm_Object_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:newTab-String_String_JSForm_Object_sam|trigger=none}{code:language=javascript}
// Create a parent form.
var form = solutionModel.newForm('parentForm', 'db:/example_data/parent_table', null, false, 640, 480);
// Create a first child form.
var childOne = solutionModel.newForm('childOne', 'db:/example_data/child_table', null, false, 400, 300);
childOne.newField('child_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
// Create a relation to link the parent form to the first child form.
var parentToChild = solutionModel.newRelation('parentToChild','db:/example_data/parent_table','db:/example_data/child_table',JSRelation.INNER_JOIN);
parentToChild.newRelationItem('parent_table_id','=','child_table_parent_id');
// Create a second child form.
var childTwo = solutionModel.newForm('childTwo', 'db:/example_data/my_table', null, false, 400, 300);
childTwo.newField('my_table_image', JSField.IMAGE_MEDIA, 10, 10, 100, 100);
// Create a tab panel and add two tabs to it, with the two child forms.
var tabPanel = form.newTabPanel('tabs', 10, 10, 620, 460);
tabPanel.newTab('tab1', 'Child Two', childOne, parentToChild); // The first form uses the relation. 460);
tabPanel.newTab('tab2tab1', 'Child Two', childTwo);
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=putDesignTimeProperty|class=node}{tr:id=name}{td}h6.putDesignTimeProperty{td}{tr}{tr:id=sig}{td}{span:style=float: left; margin-right: 5px;}[Object]{span}{span:id=iets|style=float: left; font-weight: bold;}putDesignTimeProperty{span}{span:id=iets|style=float: left;}\(){span}{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:putDesignTimeProperty_des|trigger=button|text=}{sub-section}{sub-section:putDesignTimeProperty_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:putDesignTimeProperty_snc|trigger=button|text=}{sub-section}{sub-section:putDesignTimeProperty_snc|trigger=none|class=sIndent} Replace with version info{sub-sectionchildOne, parentToChild); // The first form uses the relation.
tabPanel.newTab('tab2', 'Child Two', childTwo);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-show}{builder-show:permission=edittbody}{tbody:id=newTab-String_String_JSForm_Object}{tr:id=name}{td}h6.newTab{td}{tr}{tr:id=prssig}{td}*Parameters*\\{sub-section:putDesignTimeProperty_prs|trigger=button|text=}{sub-section}{sub-section:putDesignTimeProperty_prs|trigger=none|class=sIndent}{sub-section{span:style=margin-right: 5px;}[JSTab]{span}{span:style=font-weight: bold;}newTab{span}{span}\(name, text, form, relation){span}{td}{tr}{builder-show}{tr:id=retprs}{td}*ReturnsParameters*\\{sub-section:putDesignTimeProperty_ret|trigger=button|text=}{sub-section}{sub-section:putDesignTimeProperty_ret|trigger=none|div:class=sIndent}\{[Object]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:putDesignTimeProperty_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:putDesignTimeProperty_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:putDesignTimeProperty_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:putDesignTimeProperty_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:putDesignTimeProperty_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:putDesignTimeProperty_sam|trigger=none}{code:language=javascript}
var frm = solutionModel.getForm('orders')
var fld = frm.getField('fld')
fld.putDesignTimeProperty('myprop', 'strawberry')
{code}{sub-section}{String]} name -- The name of the new tab.
\{[String]} text -- The text to be displayed on the new tab.
\{[JSForm]} form -- The JSForm instance that should be displayed in the new tab.
\{[Object]} relation -- A JSRelation object that relates the parent form with the form
                         that will be displayed in the new tab.
{div}{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[JSTab] -- A JSTab instance representing the newly created and added tab.{div}{td}{tr}{tr:classid=lastDetailRowsam}{td}{td}{tr}{tbody}{tbody:id=removeDesignTimeProperty|class=node}{tr:id=name}{td}h6.removeDesignTimeProperty{td}{tr}{tr:id=sig}{td}{span:style=float: left; margin-right: 5px;}[Object]{span}{span:id=iets|style=float: left; font-weight: bold;}removeDesignTimeProperty{span}{span:id=iets|style=float: left;}\(){span}{td}{tr}{builder-show:permission=edit}{tr:id=des}{td}{sub-section:removeDesignTimeProperty_des|trigger=button|text=}{sub-section}{sub-section:removeDesignTimeProperty_des|trigger=none|class=sIndent}Replace with description{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:removeDesignTimeProperty_snc|trigger=button|text=}{sub-section}{sub-section:removeDesignTimeProperty_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:removeDesignTimeProperty_prs|trigger=button|text=}{sub-section}{sub-section:removeDesignTimeProperty_prs|trigger=none|class=sIndent}{sub-section*Sample*\\{div:class=sIndent}{code:language=javascript}
// Create a parent form.
var form = solutionModel.newForm('parentForm', 'db:/example_data/parent_table', null, false, 640, 480);
// Create a first child form.
var childOne = solutionModel.newForm('childOne', 'db:/example_data/child_table', null, false, 400, 300);
childOne.newField('child_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
// Create a relation to link the parent form to the first child form.
var parentToChild = solutionModel.newRelation('parentToChild','db:/example_data/parent_table','db:/example_data/child_table',JSRelation.INNER_JOIN);
parentToChild.newRelationItem('parent_table_id','=','child_table_parent_id');
// Create a second child form.
var childTwo = solutionModel.newForm('childTwo', 'db:/example_data/my_table', null, false, 400, 300);
childTwo.newField('my_table_image', JSField.IMAGE_MEDIA, 10, 10, 100, 100);
// Create a tab panel and add two tabs to it, with the two child forms.
var tabPanel = form.newTabPanel('tabs', 10, 10, 620, 460);
tabPanel.newTab('tab1', 'Child Two', childOne, parentToChild); // The first form uses the relation.
tabPanel.newTab('tab2', 'Child Two', childTwo);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{builder-showtbody}{trtbody:id=retputDesignTimeProperty}{td}*Returns*\\{sub-section:removeDesignTimeProperty_ret|trigger=button|text=}{sub-section}{sub-section:removeDesignTimeProperty_ret|trigger=none|class=sIndent}[Object]{sub-section}{td}{tr}{builder-show:permission=edittr:id=name}{td}h6.putDesignTimeProperty{td}{tr}{tr:id=seesig}{td}*Also see*\\{sub-section:removeDesignTimeProperty_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:removeDesignTimeProperty_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit{span:style=margin-right: 5px;}[Object]{span}{span:style=font-weight: bold;}putDesignTimeProperty{span}{span}\(){span}{td}{tr}{tr:id=linkret}{td}*External linksReturns*\\{sub-section:removeDesignTimeProperty_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:removeDesignTimeProperty_link|trigger=none}{sub-section}{[Object]{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:removeDesignTimeProperty_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:removeDesignTimeProperty_sam|trigger=none}{code:language=javascript}
var frm = solutionModel.getForm('orders')
var fld = frm.getField('fld')
fld.removeDesignTimePropertyputDesignTimeProperty('myprop', 'strawberry')
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=removeTab-String|class=node:id=removeDesignTimeProperty}{tr:id=name}{td}h6.removeTabremoveDesignTimeProperty{td}{tr}{tr:id=sig}{td}{span:style=float: left; margin-right: 5px;}void[Object]{span}{span:id=iets|style=float: left; font-weight: bold;}removeTabremoveDesignTimeProperty{span}{span:id=iets|style=float: left;}\(name){span}{td}{tr}{builder-show:permission=edit}{tr:id=desret}{td}{sub-section:removeTab-String_des|trigger=button|text=}{sub-section}{sub-section:removeTab-String_des|trigger=none|*Returns*\\{div:class=sIndent}Replace with description{sub-section[Object]{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:removeTab-String_snc|trigger=button|text=}{sub-section}{sub-section:removeTab-String_snc|trigger=none|class=sIndent} Replace with version info{sub-sectionid=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
var frm = solutionModel.getForm('orders')
var fld = frm.getField('fld')
fld.removeDesignTimeProperty('myprop')
{code}{div}{td}{tr}{builder-show}{tr:id=prsclass=lastDetailRow}{td}{td}*Parameters*\\{sub-section:removeTab-String_prs|trigger=button|text=}{sub-section}{sub-section:removeTab-String_prs|trigger=none|class=sIndent}\{[String]} name -- the name of the tab to be removed
{sub-section}{tr}{tbody}{tbody:id=removeTab-String}{tr:id=name}{td}h6.removeTab{td}{tr}{tr:id=retsig}{td}*Returns*\\{sub-section:removeTab-String_ret|trigger=button|text=}{sub-section}{sub-section:removeTab-String_ret|trigger=none|class=sIndent}void{sub-section{span:style=margin-right: 5px;}void{span}{span:style=font-weight: bold;}removeTab{span}{span}\(name){span}{td}{tr}{builder-show:permission=edit}{tr:id=seeprs}{td}*Also seeParameters*\\{sub-section:removeTab-String_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:removeTab-String_see|trigger=none}{sub-section}{div:class=sIndent}\{[String]} name -- the name of the tab to be removed
{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=linkret}{td}*External linksReturns*\\{sub-section:removeTab-String_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:removeTab-String_link|trigger=none}{sub-section}{void{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:removeTab-String_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:removeTab-String_sam|trigger=none}{code:language=javascript}
var tabPanel = form.newTabPanel('tabs', 10, 10, 620, 460);
tabPanel.newTab('tab1', 'Child Two', childOne);
tabPanel.newTab('tab2', 'Child Two', childTwo);
tabPanel.removeTab('tab1');
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{table}