{hidden}
DO NOT EDIT THE CONTENT OF THIS PAGE DIRECTLY, UNLESS YOU KNOW WHAT YOU'RE DOING.
		THE STRUCTURE OF THE CONTENT IS VITAL IN BEING ABLE TO EXTRACT CHANGES FROM THE PAGE AND MERGE THEM BACK INTO SERVOY SOURCE{hidden}
{sub-section:description|text=}{sub-section}\\ 

{table:id=|class=servoy 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}[#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}[#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}[#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}{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}[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}[#enabled]
The enable state of the component, default true.{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}[#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}[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}[String]{td}{td}[#styleClass]
The name of the style class that should be applied to this component.{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}{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=CHECKS|class=node}{tr:id=name}{td}h6.CHECKS{td}{tr}{tr:id=des}{td}{sub-section:CHECKS_des|trigger=button|text=}{sub-section}{sub-section:CHECKS_des|trigger=none|class=sIndent}Constant for specifying the display type of a JSField. Sets the display type of the
field to checkbox. The field will show a checkbox, or a list of checkboxes if the valuelist
property is also set.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:CHECKS_snc|trigger=button|text=}{sub-section}{sub-section:CHECKS_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:CHECKS_prs|trigger=button|text=}{sub-section}{sub-section:CHECKS_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:CHECKS_ret|trigger=button|text=}{sub-section}{sub-section:CHECKS_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:CHECKS_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:CHECKS_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:CHECKS_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:CHECKS_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:CHECKS_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:CHECKS_sam|trigger=none}{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}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=COMBOBOX|class=node}{tr:id=name}{td}h6.COMBOBOX{td}{tr}{tr:id=des}{td}{sub-section:COMBOBOX_des|trigger=button|text=}{sub-section}{sub-section:COMBOBOX_des|trigger=none|class=sIndent}Constant for specifying the display type of a JSField. Sets the display type of the
field to combobox.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:COMBOBOX_snc|trigger=button|text=}{sub-section}{sub-section:COMBOBOX_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:COMBOBOX_prs|trigger=button|text=}{sub-section}{sub-section:COMBOBOX_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:COMBOBOX_ret|trigger=button|text=}{sub-section}{sub-section:COMBOBOX_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:COMBOBOX_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:COMBOBOX_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:COMBOBOX_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:COMBOBOX_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:COMBOBOX_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:COMBOBOX_sam|trigger=none}{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}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=PASSWORD|class=node}{tr:id=name}{td}h6.PASSWORD{td}{tr}{tr:id=des}{td}{sub-section:PASSWORD_des|trigger=button|text=}{sub-section}{sub-section:PASSWORD_des|trigger=none|class=sIndent}Constant for specifying the display type of a JSField. Sets the display type of the
fiels to password. The field will allow the user to enter passwords, masking the typed
characters.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:PASSWORD_snc|trigger=button|text=}{sub-section}{sub-section:PASSWORD_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:PASSWORD_prs|trigger=button|text=}{sub-section}{sub-section:PASSWORD_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:PASSWORD_ret|trigger=button|text=}{sub-section}{sub-section:PASSWORD_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:PASSWORD_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:PASSWORD_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:PASSWORD_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:PASSWORD_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:PASSWORD_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:PASSWORD_sam|trigger=none}{code:language=javascript}
var pwd = form.newField('my_table_text', JSField.PASSWORD, 10, 250, 100, 20);
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=RADIOS|class=node}{tr:id=name}{td}h6.RADIOS{td}{tr}{tr:id=des}{td}{sub-section:RADIOS_des|trigger=button|text=}{sub-section}{sub-section:RADIOS_des|trigger=none|class=sIndent}Constant for specifying the display type of a JSField. Sets the display type of the
field to radio buttons. The field will show a radio button, or a list of them if 
the valuelist property is also set.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:RADIOS_snc|trigger=button|text=}{sub-section}{sub-section:RADIOS_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:RADIOS_prs|trigger=button|text=}{sub-section}{sub-section:RADIOS_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:RADIOS_ret|trigger=button|text=}{sub-section}{sub-section:RADIOS_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:RADIOS_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:RADIOS_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:RADIOS_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:RADIOS_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:RADIOS_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:RADIOS_sam|trigger=none}{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}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=TEXT_AREA|class=node}{tr:id=name}{td}h6.TEXT_AREA{td}{tr}{tr:id=des}{td}{sub-section:TEXT_AREA_des|trigger=button|text=}{sub-section}{sub-section:TEXT_AREA_des|trigger=none|class=sIndent}Constant for specifying the display type of a JSField. Sets the display type of the
field to text area. The field will show text on multiple lines.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:TEXT_AREA_snc|trigger=button|text=}{sub-section}{sub-section:TEXT_AREA_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:TEXT_AREA_prs|trigger=button|text=}{sub-section}{sub-section:TEXT_AREA_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:TEXT_AREA_ret|trigger=button|text=}{sub-section}{sub-section:TEXT_AREA_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:TEXT_AREA_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:TEXT_AREA_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:TEXT_AREA_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:TEXT_AREA_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:TEXT_AREA_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:TEXT_AREA_sam|trigger=none}{code:language=javascript}
var tarea = form.newField('my_table_text', JSField.TEXT_AREA, 10, 400, 100, 50);
{code}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=TEXT_FIELD|class=node}{tr:id=name}{td}h6.TEXT_FIELD{td}{tr}{tr:id=des}{td}{sub-section:TEXT_FIELD_des|trigger=button|text=}{sub-section}{sub-section:TEXT_FIELD_des|trigger=none|class=sIndent}Constant for specifying the display type of a JSField. Sets the display type of the
field to text field. The field will show regular text on a single line.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:TEXT_FIELD_snc|trigger=button|text=}{sub-section}{sub-section:TEXT_FIELD_snc|trigger=none|class=sIndent} Replace with version info{sub-section}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=prs}{td}*Parameters*\\{sub-section:TEXT_FIELD_prs|trigger=button|text=}{sub-section}{sub-section:TEXT_FIELD_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:TEXT_FIELD_ret|trigger=button|text=}{sub-section}{sub-section:TEXT_FIELD_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:TEXT_FIELD_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:TEXT_FIELD_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:TEXT_FIELD_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:TEXT_FIELD_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:TEXT_FIELD_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:TEXT_FIELD_sam|trigger=none}{code:language=javascript}
var tfield = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 460, 100, 20);
{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{th}{tr}{tbody:id=dataProviderID|class=node}{tr:id=name}{td}h6.dataProviderID{td}{tr}{tr:id=des}{td}{sub-section:dataProviderID_des|trigger=button|text=}{sub-section}{sub-section:dataProviderID_des|trigger=none|class=sIndent}The dataprovider of the component.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:dataProviderID_snc|trigger=button|text=}{sub-section}{sub-section:dataProviderID_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:dataProviderID_prs|trigger=button|text=}{sub-section}{sub-section:dataProviderID_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:dataProviderID_ret|trigger=button|text=}{sub-section}{sub-section:dataProviderID_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:dataProviderID_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:dataProviderID_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:dataProviderID_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:dataProviderID_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:dataProviderID_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:dataProviderID_sam|trigger=none}{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}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=displayType|class=node}{tr:id=name}{td}h6.displayType{td}{tr}{tr:id=des}{td}{sub-section:displayType_des|trigger=button|text=}{sub-section}{sub-section:displayType_des|trigger=none|class=sIndent}The type of display used by the field. Can be one of CALENDAR, CHECKS,
COMBOBOX, HTML\_AREA, IMAGE\_MEDIA, PASSWORD, RADIOS, RTF\_AREA, TEXT\_AREA,
TEXT\_FIELD, TYPE\_AHEAD, LIST\_BOX, MULTISELECT\_LISTBOX or SPINNER.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:displayType_snc|trigger=button|text=}{sub-section}{sub-section:displayType_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:displayType_prs|trigger=button|text=}{sub-section}{sub-section:displayType_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:displayType_ret|trigger=button|text=}{sub-section}{sub-section:displayType_ret|trigger=none|class=sIndent}[Number]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:displayType_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:displayType_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:displayType_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:displayType_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:displayType_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:displayType_sam|trigger=none}{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}{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}{tr:id=des}{td}{sub-section:enabled_des|trigger=button|text=}{sub-section}{sub-section:enabled_des|trigger=none|class=sIndent}The enable state of the component, default true.{sub-section}{td}{tr}{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=height|class=node}{tr:id=name}{td}h6.height{td}{tr}{tr:id=des}{td}{sub-section:height_des|trigger=button|text=}{sub-section}{sub-section:height_des|trigger=none|class=sIndent}The height in pixels of the component.{sub-section}{td}{tr}{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}{tr:id=des}{td}{sub-section:name_des|trigger=button|text=}{sub-section}{sub-section:name_des|trigger=none|class=sIndent}The name of the component. Through this name it can also accessed in methods.{sub-section}{td}{tr}{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=onAction|class=node}{tr:id=name}{td}h6.onAction{td}{tr}{tr:id=des}{td}{sub-section:onAction_des|trigger=button|text=}{sub-section}{sub-section:onAction_des|trigger=none|class=sIndent}The method that is executed when the component is clicked.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:onAction_snc|trigger=button|text=}{sub-section}{sub-section:onAction_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:onAction_prs|trigger=button|text=}{sub-section}{sub-section:onAction_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:onAction_ret|trigger=button|text=}{sub-section}{sub-section:onAction_ret|trigger=none|class=sIndent}[JSMethod]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:onAction_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:onAction_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:onAction_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:onAction_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:onAction_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:onAction_sam|trigger=none}{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}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=onDataChange|class=node}{tr:id=name}{td}h6.onDataChange{td}{tr}{tr:id=des}{td}{sub-section:onDataChange_des|trigger=button|text=}{sub-section}{sub-section:onDataChange_des|trigger=none|class=sIndent}Method that is executed when the data in the component is successfully changed.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:onDataChange_snc|trigger=button|text=}{sub-section}{sub-section:onDataChange_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:onDataChange_prs|trigger=button|text=}{sub-section}{sub-section:onDataChange_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:onDataChange_ret|trigger=button|text=}{sub-section}{sub-section:onDataChange_ret|trigger=none|class=sIndent}[JSMethod]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:onDataChange_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:onDataChange_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:onDataChange_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:onDataChange_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:onDataChange_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:onDataChange_sam|trigger=none}{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}{sub-section}{div}{td}{tr}{tr:class=lastDetailRow}{td}{td}{tr}{tbody}{tbody:id=placeholderText|class=node}{tr:id=name}{td}h6.placeholderText{td}{tr}{tr:id=des}{td}{sub-section:placeholderText_des|trigger=button|text=}{sub-section}{sub-section:placeholderText_des|trigger=none|class=sIndent}The text that is displayed in field when the field doesn't have a text value.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:placeholderText_snc|trigger=button|text=}{sub-section}{sub-section:placeholderText_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:placeholderText_prs|trigger=button|text=}{sub-section}{sub-section:placeholderText_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:placeholderText_ret|trigger=button|text=}{sub-section}{sub-section:placeholderText_ret|trigger=none|class=sIndent}[String]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:placeholderText_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:placeholderText_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:placeholderText_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:placeholderText_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:placeholderText_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:placeholderText_sam|trigger=none}{code:language=javascript}
field.placeholderText = 'Search';
{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}{tr:id=des}{td}{sub-section:styleClass_des|trigger=button|text=}{sub-section}{sub-section:styleClass_des|trigger=none|class=sIndent}The name of the style class that should be applied to this component.

When defining style classes for specific component types, their names
must be prefixed according to the type of the component. For example 
in order to define a class names 'fancy' for fields, in the style
definition the class must be named 'field.fancy'. If it would be 
intended for labels, then it would be named 'label.fancy'. When specifying
the class name for a component, the prefix is dropped however. Thus the
field or the label will have its styleClass property set to 'fancy' only.{sub-section}{td}{tr}{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=valuelist|class=node}{tr:id=name}{td}h6.valuelist{td}{tr}{tr:id=des}{td}{sub-section:valuelist_des|trigger=button|text=}{sub-section}{sub-section:valuelist_des|trigger=none|class=sIndent}The valuelist that is used by this field when displaying data. Can be used
with fields of type CHECKS, COMBOBOX, RADIOS and TYPE\_AHEAD.{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=snc}{td}*Since*\\{sub-section:valuelist_snc|trigger=button|text=}{sub-section}{sub-section:valuelist_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:valuelist_prs|trigger=button|text=}{sub-section}{sub-section:valuelist_prs|trigger=none|class=sIndent}{sub-section}{td}{tr}{builder-show}{tr:id=ret}{td}*Returns*\\{sub-section:valuelist_ret|trigger=button|text=}{sub-section}{sub-section:valuelist_ret|trigger=none|class=sIndent}[JSValueList]{sub-section}{td}{tr}{builder-show:permission=edit}{tr:id=see}{td}*Also see*\\{sub-section:valuelist_see|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:valuelist_see|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{builder-show:permission=edit}{tr:id=link}{td}*External links*\\{sub-section:valuelist_link|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:valuelist_link|trigger=none}{sub-section}{div}{td}{tr}{builder-show}{tr:id=sam}{td}*Sample*\\{sub-section:valuelist_sam|trigger=button|text=}{sub-section}{div:class=sIndent}{sub-section:valuelist_sam|trigger=none}{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}{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}{tr:id=des}{td}{sub-section:visible_des|trigger=button|text=}{sub-section}{sub-section:visible_des|trigger=none|class=sIndent}The visible property of the component, default true.{sub-section}{td}{tr}{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}{tr:id=des}{td}{sub-section:width_des|trigger=button|text=}{sub-section}{sub-section:width_des|trigger=none|class=sIndent}The width in pixels of the component.{sub-section}{td}{tr}{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}{tr:id=des}{td}{sub-section:x_des|trigger=button|text=}{sub-section}{sub-section:x_des|trigger=none|class=sIndent}The x coordinate of the component on the form.{sub-section}{td}{tr}{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}{tr:id=des}{td}{sub-section:y_des|trigger=button|text=}{sub-section}{sub-section:y_des|trigger=none|class=sIndent}The y coordinate of the component on the form.{sub-section}{td}{tr}{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}{table}