Difference between revisions of "Referencing Form Fields in JavaScript"
imported>Aeric |
imported>Aeric |
||
(77 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
[[JavaScript]] is a powerful language that can do many things. But one of it's most common uses is to dynamically modify the behavior of [[Forms]], using [[Form Scripting]] and [[Field Scripting]]. | |||
{{Note| To reference Form fields in JavaScript for the new AgileApps UI, see [[JavaScript Field Type Reference for New AgileApps User Interface]].}} | |||
<noinclude>__TOC__</noinclude> | |||
====Referencing the Current Form==== | |||
In the HTML document object model (DOM), the current form is named <tt>_sdForm</tt>.<br> | In the HTML document object model (DOM), the current form is named <tt>_sdForm</tt>.<br> | ||
This line of code gets a reference to it and puts it in the <tt>form</tt> variable: | This line of code gets a reference to it and puts it in the <tt>form</tt> variable: | ||
: | :<syntaxhighlight lang="javascript" enclose="div"> | ||
< | var form = _sdForm; | ||
</syntaxhighlight> | |||
====Accessing Fields in the Current Form==== | |||
To find the name of a field in the platform: | To find the name of a field in the platform: | ||
# Go to '''[[File:GearIcon.png]] > Customization > Objects > {object} > Fields''' | # Go to '''[[File:GearIcon.png]] > Customization > Objects > {object} > Fields''' | ||
Line 11: | Line 15: | ||
# Get its name from the '''Field Name''' column<br>That name can then be used in the JavaScript code. | # Get its name from the '''Field Name''' column<br>That name can then be used in the JavaScript code. | ||
All fields can be accessed using the platform's JavaScript functions, as described in the [[#Field Types|Field Types]] section below. The most commonly accessed field types (<tt>TextField</tt>, <tt>TextArea</tt>, <tt>Date</tt>, <tt>DateTime</tt>, <tt>Time</tt>, and <tt>URL</tt>) can also be accessed using <tt>_sdForm[0]</tt>. For example, this line of code gets a reference to the <tt>first_name</tt> field, and puts it in the variable <tt>fName_field</tt>: | |||
: | :<syntaxhighlight lang="javascript" enclose="div"> | ||
< | var fName_field = _sdForm[0].first_name; | ||
</syntaxhighlight> | |||
Fields have two properties that you can access in JavaScript: | Fields have two properties that you can access in JavaScript: | ||
Line 20: | Line 24: | ||
:* <tt>value</tt>: the value of the field | :* <tt>value</tt>: the value of the field | ||
So this line retrieves the value of the | So this line retrieves the value of the field: | ||
: | :<syntaxhighlight lang="javascript" enclose="div"> | ||
< | var fName = fName_field.value; | ||
</syntaxhighlight> | |||
As does this longer version: | As does this longer version: | ||
: | :<syntaxhighlight lang="javascript" enclose="div"> | ||
< | var fName = _sdForm[0].first_name.value; | ||
</syntaxhighlight> | |||
Other fields can be accessed using the platform's JavaScript functions.<br>For a complete list, see the [[#Field Types|Field Types]] section below. | |||
====Updating Fields in the Current Form==== | |||
The method used to update a field depends on the field type. All of the methods have the general form: | The method used to update a field depends on the field type. All of the methods have the general form: | ||
: | :<syntaxhighlight lang="javascript" enclose="div"> | ||
< | set...Value(_sdForm, field, value); | ||
</syntaxhighlight> | |||
Below are some examples of common methods. (The section that follows contains a complete list.) | |||
:<syntaxhighlight lang="javascript" enclose="div"> | |||
setTextFieldValue(_sdForm, "first_name", "Adam"); | |||
setPickListValue(_sdForm, "first_name", "Adam"); | |||
setMultiPickListValue(_sdForm, "first_name", ["new","closed"]); | |||
setMultiPickListValue(_sdForm, | |||
// value is an array of strings | // value is an array of strings | ||
; | setRadioButtonValue(_sdForm, "first_name", "Adam"); | ||
setCheckboxState(_sdForm, "first_name", true); // checked | |||
setCheckboxState(_sdForm, "first_name", false); // unchecked | |||
; | setLookupValue(_sdForm, "project_number", "123456", "My Project"); | ||
// where 123456 is the record ID of the target record | |||
// "My Project" is the value of the record locator field(s) for that record | |||
</syntaxhighlight> | |||
====Field Type Reference==== | |||
{{Note|To view the field type reference in the new AgileApps user interface, see [[JavaScript Field Type Reference for New AgileApps User Interface]].}} | |||
{{:JavaScript Field Type Reference}} | |||
Latest revision as of 11:12, 13 August 2020
JavaScript is a powerful language that can do many things. But one of it's most common uses is to dynamically modify the behavior of Forms, using Form Scripting and Field Scripting.
Note: To reference Form fields in JavaScript for the new AgileApps UI, see JavaScript Field Type Reference for New AgileApps User Interface.
Referencing the Current Form
In the HTML document object model (DOM), the current form is named _sdForm.
This line of code gets a reference to it and puts it in the form variable:
- <syntaxhighlight lang="javascript" enclose="div">
var form = _sdForm; </syntaxhighlight>
Accessing Fields in the Current Form
To find the name of a field in the platform:
- Go to > Customization > Objects > {object} > Fields
- Find the label of the field you're interested in
- Get its name from the Field Name column
That name can then be used in the JavaScript code.
All fields can be accessed using the platform's JavaScript functions, as described in the Field Types section below. The most commonly accessed field types (TextField, TextArea, Date, DateTime, Time, and URL) can also be accessed using _sdForm[0]. For example, this line of code gets a reference to the first_name field, and puts it in the variable fName_field:
- <syntaxhighlight lang="javascript" enclose="div">
var fName_field = _sdForm[0].first_name; </syntaxhighlight>
Fields have two properties that you can access in JavaScript:
- name: the name of the field
- value: the value of the field
So this line retrieves the value of the field:
- <syntaxhighlight lang="javascript" enclose="div">
var fName = fName_field.value; </syntaxhighlight>
As does this longer version:
- <syntaxhighlight lang="javascript" enclose="div">
var fName = _sdForm[0].first_name.value; </syntaxhighlight>
Other fields can be accessed using the platform's JavaScript functions.
For a complete list, see the Field Types section below.
Updating Fields in the Current Form
The method used to update a field depends on the field type. All of the methods have the general form:
- <syntaxhighlight lang="javascript" enclose="div">
set...Value(_sdForm, field, value); </syntaxhighlight>
Below are some examples of common methods. (The section that follows contains a complete list.)
- <syntaxhighlight lang="javascript" enclose="div">
setTextFieldValue(_sdForm, "first_name", "Adam");
setPickListValue(_sdForm, "first_name", "Adam");
setMultiPickListValue(_sdForm, "first_name", ["new","closed"]);
// value is an array of strings
setRadioButtonValue(_sdForm, "first_name", "Adam");
setCheckboxState(_sdForm, "first_name", true); // checked setCheckboxState(_sdForm, "first_name", false); // unchecked
setLookupValue(_sdForm, "project_number", "123456", "My Project");
// where 123456 is the record ID of the target record // "My Project" is the value of the record locator field(s) for that record
</syntaxhighlight>
Field Type Reference
Note: To view the field type reference in the new AgileApps user interface, see JavaScript Field Type Reference for New AgileApps User Interface.
The following table shows how to access and update the different field types, where:
- _sdForm is the variable that references the current form
- field is a string containing the name of the field
(as with all strings, literal values must be in quotes) - value is a value you specify (generally a string)
- value is language keyword, typed exactly as shown--as in this line,
for example, which gets the value from a field called email_address:
- _sdForm.email_address.value
Note:
Form data is in User Format. Data entered into the Form must be in that format, as well. Data going to and from the platform, on the other hand, must be in Database Format.- Learn more: Localization#JavaScript Programming
Note: JavaScript functions mentioned in the table does not support Web Forms.
Type Getter Setter Auto Number n/a n/a Checkbox getCheckBoxState(_sdForm, field)
Returns: true or falsesetCheckboxState(_sdForm, field, state)
state: true or false
Example:
setCheckboxState(_sdForm, "item_approved", true);Currency getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new valueDate _sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new valueDate time _sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new valueDependent Picklist getPickListSelectedValue(_sdForm, field)
Returns: selected String containing valuesetPickListValue(_sdForm, field, value)
value: String containing new valueEmail Address getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new valueExternal Lookup n/a n/a File Field n/a n/a Formula n/a n/a Geolocation getTextFieldValue(_sdForm, field)
Returns: A string containing a latitude and longitude,
separated by a comma and a space.
Ex: 37.403930662906106, -121.97971165820213setTextFieldValue(_sdForm, field, value)
value: A string containing the new geolocation valueGlobal Picklist getPickListSelectedValue(_sdForm, field)
Returns: selected String containing valuesetPickListValue(_sdForm, field, value)
value: String containing new valueImage Field n/a n/a Lookup getLookupFieldValue(_sdForm, field)
Returns: String containing record ID
getLookupFieldText(_sdForm, field)
Returns: String containing the displayed textsetLookupValue(_sdForm, field, value, text)
value: String containing record ID
text: String containing the text to displayMultiple Checkboxes getMultiCheckBoxValue(_sdForm, field)
Returns: An array of values, one for each checked boxgetMultiCheckBoxValue(_sdForm, field, index)
index: 0 for the first checkbox,
1 for the second, and so on.
Returns: The value of the box if selected, else an empty stringsetMultiCheckBoxValue(form, field, [value1, ...])
Argument: Array of values to set
Example:
setMultiCheckBoxValue(_sdForm, field, ["A", "B"])
(Checkboxes for all other values are turned off)Multi Object Lookup n/a n/a Multi Select Picklist getMultiPickListSelectedValue(_sdForm, field)
Returns: Array of strings, with selected values
Example: ["A", "C"]setMultiPickListValue(_sdForm, field, [value1, ...])
Argument: Array of values to select
Example:
setMultiPickListValue(_sdForm, field, ["A", "B"] )Number _sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new value, or a numberNumber with decimals sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new value, or a floatPercentage sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new valuePhone/Fax sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new valuePicklist getPickListSelectedValue(_sdForm, field)
Returns: selected String containing valuesetPickListValue(_sdForm, field, value)
value: String containing new value
Example:
setPickListValue(_sdForm, "status", "Closed");Radio Buttons getRadioButtonValue(_sdForm, field)
Returns: String containing selected valuesetRadioButtonValue(_sdForm, field, value)
value: String containing new value to select
Example:
setRadioButtonValue(_sdForm, "color", "Black");Rich Text Area n/a n/a Rollup Summary Field n/a n/a TextArea _sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new valueTextField _sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new value
Example:
setTextFieldValue(_sdForm, "first_name", "Adam");Time _sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new valueURL _sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing valuesetTextFieldValue(_sdForm, field, value)
value: String containing new value