{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}[#CALENDAR]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#CHECKS]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#COMBOBOX]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#HTML_AREA]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#IMAGE_MEDIA]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#LISTBOX]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#MULTISELECT_LISTBOX]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#PASSWORD]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#RADIOS]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#RTF_AREA]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#SPINNER]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#TEXT_AREA]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#TEXT_FIELD]
Constant for specifying the display type of a JSField.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#TYPE_AHEAD]
Constant for specifying the display type of a JSField.{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}[String]{td}{td}[#dataProviderID]
The dataprovider of the component.{td}{tr}{tbody}{tbody}{tr}{td}[Number]{td}{td}[#displayType]
The type of display used by the field.{td}{tr}{tbody}{tbody}{tr}{td}[Boolean]{td}{td}[#displaysTags]
Flag that enables or disables merging of data inside components using tags (placeholders).{td}{tr}{tbody}{tbody}{tr}{td}[Boolean]{td}{td}[#editable]
Flag that tells if the content of the field can be edited or not.{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}[#format]
The format that should be applied when displaying the data in the 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}[Number]{td}{td}[#horizontalAlignment]
Horizontal alignment of the text inside the component.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#margin]
The margins 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}[#onAction]
The method that is executed when the component is clicked.{td}{tr}{tbody}{tbody}{tr}{td}[JSMethod]{td}{td}[#onDataChange]
Method that is executed when the data in the component is successfully changed.{td}{tr}{tbody}{tbody}{tr}{td}[JSMethod]{td}{td}[#onFocusGained]
The method that is executed when the component gains focus.{td}{tr}{tbody}{tbody}{tr}{td}[JSMethod]{td}{td}[#onFocusLost]
The method that is executed when the component looses focus.{td}{tr}{tbody}{tbody}{tr}{td}[JSMethod]{td}{td}[#onRender]
The method that is executed when the component is rendered.{td}{tr}{tbody}{tbody}{tr}{td}[JSMethod]{td}{td}[#onRightClick]
The method that is executed when the component is right clicked.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#placeholderText]
The text that is displayed in field when the field doesn't have a text value.{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}[Number]{td}{td}[#scrollbars]
Scrollbar options for the vertical and horizontal scrollbars.{td}{tr}{tbody}{tbody}{tr}{td}[Boolean]{td}{td}[#selectOnEnter]
Flag that tells if the content of the field should be automatically selected
when the field receives focus.{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}[#tabSeq]
An index that specifies the position of the component in the tab sequence.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#titleText]
The text that is displayed in the column header associated with the component when the form
is in table view.{td}{tr}{tbody}{tbody}{tr}{td}[String]{td}{td}[#toolTipText]
The text displayed when hovering over the component with a mouse cursor.{td}{tr}{tbody}{tbody}{tr}{td}[Boolean]{td}{td}[#transparent]
Flag that tells if the component is transparent or not.{td}{tr}{tbody}{tbody}{tr}{td}[JSValueList]{td}{td}[#valuelist]
The valuelist that is used by this field when displaying data.{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}[UUID]{td}{td}[#getUUID]\()
Returns the UUID of this component.{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}{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=CALENDAR}{tr:id=name}{td}h6.CALENDAR{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 cal = form.newField('my_table_date', JSField.CALENDAR, 10, 10, 100, 20);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=CHECKS}{tr:id=name}{td}h6.CHECKS{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 vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES);
vlist.customValues = "one\ntwo\nthree\nfour";
var chk = form.newField('my_table_options', JSField.CHECKS, 10, 40, 100, 50);
chk.valuelist = vlist;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=COMBOBOX}{tr:id=name}{td}h6.COMBOBOX{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 vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES);
vlist.customValues = "one\ntwo\nthree\nfour";
var cmb = form.newField('my_table_options', JSField.COMBOBOX, 10, 100, 100, 20);
cmb.valuelist = vlist;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=HTML_AREA}{tr:id=name}{td}h6.HTML_AREA{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 html = form.newField('my_table_html', JSField.HTML_AREA, 10, 130, 100, 50);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=IMAGE_MEDIA}{tr:id=name}{td}h6.IMAGE_MEDIA{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 img = form.newField('my_table_image', JSField.IMAGE_MEDIA, 10, 190, 100, 50);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=LISTBOX}{tr:id=name}{td}h6.LISTBOX{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 vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES);
vlist.customValues = "one\ntwo\nthree\nfour";
var list = form.newField('my_table_list', JSField.LISTBOX, 10, 280, 100, 50);
list.valuelist = vlist;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=MULTISELECT_LISTBOX}{tr:id=name}{td}h6.MULTISELECT_LISTBOX{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 vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES);
vlist.customValues = "one\ntwo\nthree\nfour";
var list = form.newField('my_table_options', JSField.MULTISELECT_LISTBOX, 10, 280, 100, 50);
list.valuelist = vlist;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=PASSWORD}{tr:id=name}{td}h6.PASSWORD{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 pwd = form.newField('my_table_text', JSField.PASSWORD, 10, 250, 100, 20);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=RADIOS}{tr:id=name}{td}h6.RADIOS{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 vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES);
vlist.customValues = "one\ntwo\nthree\nfour";
var radio = form.newField('my_table_options', JSField.RADIOS, 10, 280, 100, 50);
radio.valuelist = vlist;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=RTF_AREA}{tr:id=name}{td}h6.RTF_AREA{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 rtf = form.newField('my_table_rtf', JSField.RTF_AREA, 10, 340, 100, 50);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=SPINNER}{tr:id=name}{td}h6.SPINNER{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 vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES);
vlist.customValues = "one\ntwo\nthree\nfour";
var spinner = form.newField('my_spinner', JSField.SPINNER, 10, 460, 100, 20);
spinner.valuelist = vlist;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=TEXT_AREA}{tr:id=name}{td}h6.TEXT_AREA{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 tarea = form.newField('my_table_text', JSField.TEXT_AREA, 10, 400, 100, 50);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=TEXT_FIELD}{tr:id=name}{td}h6.TEXT_FIELD{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 tfield = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 460, 100, 20);
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=TYPE_AHEAD}{tr:id=name}{td}h6.TYPE_AHEAD{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 vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES);
vlist.customValues = "one\ntwo\nthree\nfour";
var tahead = form.newField('my_table_text', JSField.TYPE_AHEAD, 10, 490, 100, 20);
tahead.valuelist = vlist;
{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=dataProviderID}{tr:id=name}{td}h6.dataProviderID{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}
// Normally the dataprovider is specified when a component is created.
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20);
// But it can be modified later if needed.
field.dataProviderID = 'parent_table_id';
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=displayType}{tr:id=name}{td}h6.displayType{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}
// The display type is specified when the field is created.
var cal = form.newField('my_table_date', JSField.CALENDAR, 10, 10, 100, 20);
// But it can be changed if needed.
cal.dataProviderID = 'my_table_text';
cal.displayType = JSField.TEXT_FIELD;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=displaysTags}{tr:id=name}{td}h6.displaysTags{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 field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20);
field.displaysTags = true;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=editable}{tr:id=name}{td}h6.editable{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 field = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.editable = false;
{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=format}{tr:id=name}{td}h6.format{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 field = form.newField('my_table_number', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.format = '$#.00';
{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=horizontalAlignment}{tr:id=name}{td}h6.horizontalAlignment{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 leftAlignedLabel = form.newLabel('LEFT', 10, 10, 300, 20);
leftAlignedLabel.horizontalAlignment = SM_ALIGNMENT.LEFT;
var hCenteredLabel = form.newLabel('CENTER', 10, 40, 300, 20);
hCenteredLabel.horizontalAlignment = SM_ALIGNMENT.CENTER;
var rightAlignedLabel = form.newLabel('RIGHT', 10, 70, 300, 20);
rightAlignedLabel.horizontalAlignment = SM_ALIGNMENT.RIGHT;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=margin}{tr:id=name}{td}h6.margin{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('Label', 10, 10, 150, 150);
label.background = 'yellow';
label.margin = '10,20,30,40';
{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=onAction}{tr:id=name}{td}h6.onAction{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 doNothingMethod = form.newMethod('function doNothing() { application.output("Doing nothing."); }');
var onClickMethod = form.newMethod('function onClick(event) { application.output("I was clicked at " + event.getTimestamp()); }');
var onDoubleClickMethod = form.newMethod('function onDoubleClick(event) { application.output("I was double-clicked at " + event.getTimestamp()); }');
var onRightClickMethod = form.newMethod('function onRightClick(event) { application.output("I was right-clicked at " + event.getTimestamp()); }');
// At creation the button has the 'doNothing' method as onClick handler, but we'll change that later.
var btn = form.newButton('I am a button', 10, 40, 200, 20, doNothingMethod);
btn.onAction = onClickMethod;
btn.onDoubleClick = onDoubleClickMethod;
btn.onRightClick = onRightClickMethod;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=onDataChange}{tr:id=name}{td}h6.onDataChange{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 form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 620, 300);
var onDataChangeMethod = form.newMethod('function onDataChange(oldValue, newValue, event) { application.output("Data changed from " + oldValue + " to " + newValue + " at " + event.getTimestamp()); }');
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.onDataChange = onDataChangeMethod;
forms['someForm'].controller.show();
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=onFocusGained}{tr:id=name}{td}h6.onFocusGained{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 form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 620, 300);
var onFocusLostMethod = form.newMethod('function onFocusLost(event) { application.output("Focus lost at " + event.getTimestamp()); }');
var onFocusGainedMethod = form.newMethod('function onFocusGained(event) { application.output("Focus gained at " + event.getTimestamp()); }');
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.onFocusGained = onFocusGainedMethod;
field.onFocusLost = onFocusLostMethod;
forms['someForm'].controller.show()
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=onFocusLost}{tr:id=name}{td}h6.onFocusLost{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 form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 620, 300);
var onFocusLostMethod = form.newMethod('function onFocusLost(event) { application.output("Focus lost at " + event.getTimestamp()); }');
var onFocusGainedMethod = form.newMethod('function onFocusGained(event) { application.output("Focus gained at " + event.getTimestamp()); }');
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.onFocusGained = onFocusGainedMethod;
field.onFocusLost = onFocusLostMethod;
forms['someForm'].controller.show()
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=onRender}{tr:id=name}{td}h6.onRender{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}
field.onRender = form.newMethod('function onRender(event) { event.getElement().bgcolor = \'#00ff00\' }');
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=onRightClick}{tr:id=name}{td}h6.onRightClick{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 doNothingMethod = form.newMethod('function doNothing() { application.output("Doing nothing."); }');
var onClickMethod = form.newMethod('function onClick(event) { application.output("I was clicked at " + event.getTimestamp()); }');
var onDoubleClickMethod = form.newMethod('function onDoubleClick(event) { application.output("I was double-clicked at " + event.getTimestamp()); }');
var onRightClickMethod = form.newMethod('function onRightClick(event) { application.output("I was right-clicked at " + event.getTimestamp()); }');
// At creation the button has the 'doNothing' method as onClick handler, but we'll change that later.
var btn = form.newButton('I am a button', 10, 40, 200, 20, doNothingMethod);
btn.onAction = onClickMethod;
btn.onDoubleClick = onDoubleClickMethod;
btn.onRightClick = onRightClickMethod;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=placeholderText}{tr:id=name}{td}h6.placeholderText{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}
field.placeholderText = 'Search';
{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=scrollbars}{tr:id=name}{td}h6.scrollbars{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 noScrollbars = form.newField('my_table_text', JSField.TEXT_AREA, 10, 10, 100, 100);
noScrollbars.scrollbars = SM_SCROLLBAR.HORIZONTAL_SCROLLBAR_NEVER | SM_SCROLLBAR.VERTICAL_SCROLLBAR_NEVER;
var neededScrollbars = form.newField('my_table_text', JSField.TEXT_AREA, 120, 10, 100, 100);
neededScrollbars.scrollbars = SM_SCROLLBAR.HORIZONTAL_SCROLLBAR_AS_NEEDED | SM_SCROLLBAR.VERTICAL_SCROLLBAR_AS_NEEDED;
var alwaysScrollbars = form.newField('my_table_text', JSField.TEXT_AREA, 230, 10, 100, 100);
alwaysScrollbars.scrollbars = SM_SCROLLBAR.HORIZONTAL_SCROLLBAR_ALWAYS | SM_SCROLLBAR.VERTICAL_SCROLLBAR_ALWAYS;
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=selectOnEnter}{tr:id=name}{td}h6.selectOnEnter{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}
// Create two fields and set one of them to have "selectOnEnter" true. As you tab
// through the fields you can notice how the text inside the second field gets
// automatically selected when the field receives focus.
var fieldNoSelect = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20);
var fieldSelect = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20);
fieldSelect.selectOnEnter = 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=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=titleText}{tr:id=name}{td}h6.titleText{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/my_table', null, false, 640, 480);
var field = form.newField('my_table_number', JSField.TEXT_FIELD, 10, 10, 100, 20);
field.titleText = 'Column Title';
form.view = JSForm.LOCKED_TABLE_VIEW;
forms['someForm'].controller.show()
{code}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=toolTipText}{tr:id=name}{td}h6.toolTipText{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('Stop the mouse over me!', 10, 10, 200, 20);
label.toolTipText = 'I\'m the tooltip. Do you see me?';
{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=valuelist}{tr:id=name}{td}h6.valuelist{td}{tr}{tr:id=ret}{td}*Returns*\\{div:class=sIndent}[JSValueList]{div}{td}{tr}{tr:id=sam}{td}*Sample*\\{div:class=sIndent}{code:language=javascript}
var vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES);
vlist.customValues = "one\ntwo\nthree\nfour";
var cmb = form.newField('my_table_options', JSField.COMBOBOX, 10, 100, 100, 20);
cmb.valuelist = vlist;
{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=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=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}{table}