{div: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 AUTO UPDATE THE CONTENT THROUGH THE DOC GENERATOR{div} {div:id=description}{div}\\ {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}{tr:id=name}{td}h6.ACCORDION_PANEL{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{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}{tbody}{tbody:id=DEFAULT_ORIENTATION}{tr:id=name}{td}h6.DEFAULT_ORIENTATION{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{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; // (...) 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=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript} var splitPane = myForm.newTabPanel('splitPane', 10, 10, 620, 460); splitPane.tabOrientation = JSTabPanel.HIDE; {code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=SPLIT_HORIZONTAL}{tr:id=name}{td}h6.SPLIT_HORIZONTAL{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{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}{tbody}{tbody:id=SPLIT_VERTICAL}{tr:id=name}{td}h6.SPLIT_VERTICAL{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript} var splitPane = myForm.newTabPanel('splitPane', 10, 10, 620, 460); splitPane.tabOrientation = JSTabPanel.SPLIT_VERTICAL; {code}{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{th}{tr}{tbody:id=anchors}{tr:id=name}{td}h6.anchors{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript} var form = solutionModel.newForm('mediaForm', 'db:/example_data/parent_table', null, false, 400, 300); var strechAllDirectionsLabel = form.newLabel('Strech all directions', 10, 10, 380, 280); strechAllDirectionsLabel.background = '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}{tbody}{tbody:id=background}{tr:id=name}{td}h6.background{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[String]{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 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}{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}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=enabled}{tr:id=name}{td}h6.enabled{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 field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); field.enabled = false; {code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=fontType}{tr:id=name}{td}h6.fontType{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[String]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div: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}{tbody}{tbody:id=foreground}{tr:id=name}{td}h6.foreground{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[String]{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 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}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=formIndex}{tr:id=name}{td}h6.formIndex{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div: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}{tbody}{tbody:id=groupID}{tr:id=name}{td}h6.groupID{td}{tr}{tr:id=ret}{td}*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, 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}{tbody}{tbody:id=height}{tr:id=name}{td}h6.height{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{tr:id=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}{tbody}{tbody:id=name}{tr:id=name}{td}h6.name{td}{tr}{tr:id=ret}{td}*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*\\{div:class=sIndent}[JSMethod]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{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}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=printSliding}{tr:id=name}{td}h6.printSliding{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{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 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}{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=scrollTabs}{tr:id=name}{td}h6.scrollTabs{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 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}{tbody}{tbody:id=styleClass}{tr:id=name}{td}h6.styleClass{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[String]{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 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}[Number]{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, 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}{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*\\{div:class=sIndent}{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}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=transparent}{tr:id=name}{td}h6.transparent{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} // 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}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=visible}{tr:id=name}{td}h6.visible{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 field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); field.visible = false; {code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=width}{tr:id=name}{td}h6.width{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{tr:id=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}{tbody}{tbody:id=x}{tr:id=name}{td}h6.x{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[Number]{div}{td}{tr}{tr:id=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 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}[Number]{div}{td}{tr}{tr:id=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 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=getTab-String}{tr:id=name}{td}h6.getTab{td}{tr}{tr:id=sig}{td}{span:style=margin-right: 5px;}[JSTab]{span}{span:style=font-weight: bold;}getTab{span}{span}\(name){span}{td}{tr}{tr:id=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}{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); tabPanel.getTab('tab2').text = 'Child Two Changed'; {code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=getTabs}{tr:id=name}{td}h6.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*\\{div: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}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=newTab-String_String_JSForm}{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}{tr:id=prs}{td}*Parameters*\\{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}[JSTab] -- A JSTab instance representing the newly created and added tab.{div}{td}{tr}{tr:id=sam}{td}*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}{tbody}{tbody:id=newTab-String_String_JSForm_Object}{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, relation){span}{td}{tr}{tr:id=prs}{td}*Parameters*\\{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. \{[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:id=sam}{td}*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}{tbody}{tbody:id=putDesignTimeProperty}{tr:id=name}{td}h6.putDesignTimeProperty{td}{tr}{tr:id=sig}{td}{span:style=margin-right: 5px;}[Object]{span}{span:style=font-weight: bold;}putDesignTimeProperty{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') fld.putDesignTimeProperty('myprop', 'strawberry') {code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=removeDesignTimeProperty}{tr:id=name}{td}h6.removeDesignTimeProperty{td}{tr}{tr:id=sig}{td}{span:style=margin-right: 5px;}[Object]{span}{span:style=font-weight: bold;}removeDesignTimeProperty{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') fld.removeDesignTimeProperty('myprop') {code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=removeTab-String}{tr:id=name}{td}h6.removeTab{td}{tr}{tr:id=sig}{td}{span:style=margin-right: 5px;}void{span}{span:style=font-weight: bold;}removeTab{span}{span}\(name){span}{td}{tr}{tr:id=prs}{td}*Parameters*\\{div:class=sIndent}\{[String]} name -- the name of the tab to be removed {div}{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}void{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); tabPanel.removeTab('tab1'); {code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{table} |