Difference between revisions of "Referencing Form Fields in JavaScript"

From AgileApps Support Wiki
imported>Aeric
imported>Aeric
Β 
(50 intermediate revisions by the same user not shown)
Line 1: Line 1:
__TOC__
[[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]].
==Referencing the Current Form==
{{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">
<pre>var form = _sdForm;</pre>
var form = _sdForm;
|}
</syntaxhighlight>


==Accessing Fields==
====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 13: 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.
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">
The most commonly accessed fields (<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>:
var fName_field = _sdForm[0].first_name;
:{|
</syntaxhighlight>
<pre>var fName_field = _sdForm[0].first_name;</pre>
|}


Fields have two properties that you can access in JavaScript:
Fields have two properties that you can access in JavaScript:
Line 25: Line 25:


So this line retrieves the value of the field:
So this line retrieves the value of the field:
:{|
:<syntaxhighlight lang="javascript" enclose="div">
<pre>var fName = fName_field.value;</pre>
var fName = fName_field.value;
|}
</syntaxhighlight>


As does this longer version:
As does this longer version:
:{|
:<syntaxhighlight lang="javascript" enclose="div">
<pre>var fName = _sdForm[0].first_name.value;</pre>
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.
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==
====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">
<pre>set...Value(_sdForm, field, value);</pre>
set...Value(_sdForm, field, value);
|}
</syntaxhighlight>


Here are examples of some common methods:
Below are some examples of common methods. (The section that follows contains a complete list.)
:{|
:<syntaxhighlight lang="javascript" enclose="div">
<pre>setTextFieldValue(_sdForm, ”first_name”, ”Adam”);
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
</pre>
|}


For a complete list, see the [[#Field Type Reference|Field Type Reference]] section that follows
setPickListValue(_sdForm, "first_name", "Adam");


==Field Type Reference==
setMultiPickListValue(_sdForm, "first_name", ["new","closed"]);
The following table shows how to access and update the different field types, where:
Β  Β  // value is an array of strings
:* <tt>_sdForm</tt> is the current form reference
:* <tt>fieldname</tt> is a string containing the name of the field


:{| border="1" cellpadding="5" cellspacing="1"
setRadioButtonValue(_sdForm, "first_name", "Adam");
! Type !! Getter !! Setter
|-
| Auto Number || align="center"|n/a || align="center"|n/a


|-
setCheckboxState(_sdForm, "first_name", true); // checked
| Checkbox
setCheckboxState(_sdForm, "first_name", false); // unchecked
|
getCheckBoxState(_sdForm, field)
<br>''Returns:'' true or false
|
setCheckboxState(_sdForm, field, state)
<br>''state:'' true or false
Β  Β 
|-
| Currency
|
getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:''Β  String containing new value


|-
setLookupValue(_sdForm, "project_number", "123456", "My Project");
| Custom Control || align="center"|n/a || align="center"|n/a
Β  Β  // 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>
| Date
|
_sdForm[0].fieldname.value
<br>-or-
<br>getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:''Β  String containing new value
Β 
|-
| Datetime
|
_sdForm[0].fieldname.value
<br>-or-
<br>getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:'' String containing new value
Β 
|-
| Dependent Picklist
|
getPickListSelectedValue(_sdForm, field)
<br>''Returns:'' selected String containing value
|
setPickListValue(_sdForm, field, value)
<br>''value:''Β  String containing new value
Β 
|-
| Email Address
|
getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:'' String containing new value
Β 
|-
| File || align="center"|n/a || align="center"|n/a
Β 
|-
| Formula || align="center"|n/a || align="center"|n/a
Β 
|-
| Global Picklist
|
getPickListSelectedValue(_sdForm, field)
<br>''Returns:'' selected String containing value
|
setPickListValue(_sdForm, field, value)
<br>''value:''Β  String containing new value
Β 
|-
| Image || align="center"|n/a || align="center"|n/a
Β 
|-
| Lookup
|
getLookupFieldValue(_sdForm, field)
<br>''Returns:'' String containing record ID
<br>
getLookupFieldText(_sdForm, field)
<br>''Returns:'' String containing the text displayed for the record
|
setLookupValue(_sdForm, field, value, text)
<br>''value:''Β  String containing record ID
<br>text: String containing the text to display
Β 
|-
| Multiple Checkboxes
|
getMultiCheckBoxValue(_sdForm, field,Β  indexes)
<br>indexes:Β  Array of indexes for checked boxes
<br> - Index values start from 0 for first checkbox,
<br> &bnspl 1 for second, etc.
|
setMultiCheckBoxValue(form, field, value)
<br>''value:''Β  Array of New Values
<br>Example:
<br>setMultiCheckBoxValue(_sdForm, field, [β€œA”, ”B”] )
Β 
|-
| Multi Object Lookup || align="center"|n/a || align="center"|n/a
Β 
|-
| Multi Select Picklist
|
getMultiPickListSelectedValue(_sdForm, field)
<br>''Returns:'' Array of values
<br>Example: output = [β€œA”, ”C”]
|
setMultiPickListValue(_sdForm, field, value)
<br>''value:''Β  Array of New Values
<br>Example:
<br>setMultiPickListValue(_sdForm, field,Β  [β€œA”, ”B”] )
Β 
|-
| Number
|
dForm[0].fieldname.value
<br>-or-
<br>getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:'' String containing new value,Β  or a number
Β 
|-
| Number with decimals
|
sdForm[0].fieldname.value
<br>-or-
<br>getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:''Β  String containing new value,Β  or a float
Β 
|-
| Percentage
|
sdForm[0].fieldname.value
<br>-or-
<br>getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:''Β  String containing new value
Β 
|-
| Phone/Fax
|
sdForm[0].fieldname.value
<br>-or-
<br>getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:''Β  String containing new value
Β 
|-
| Picklist
|
getPickListSelectedValue(_sdForm, field)
<br>''Returns:'' selected String containing value
|
setPickListValue(_sdForm, field, value)
<br>''value:''Β  String containing new value
Β 
|-
| Radio Buttons
|
getRadioButtonValue(_sdForm, field)
<br>β€˜β€˜Returns:β€™β€˜ String containing selected value
|
setRadioButtonValue(_sdForm, field, value)
<br>''value:'' String containing new value to select
Β 
|-
| Rich Text Area || align="center"|n/a || align="center"|n/a
Β 
|-
| TextArea
|
_sdForm[0].fieldname.value
<br>-or-
<br>getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:''Β  String containing new value
Β 
|-
| TextField
|
_sdForm[0].fieldname.value
<br>-or-
<br>getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:''Β  String containing new value
Β 
|-
| Time
|
_sdForm[0].fieldname.value
<br>-or-
<br>getTextFieldValue(_sdForm, field)
<br>''Returns:'' String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>''value:''Β  String containing new value
Β 
|-
| URL
|
_sdForm[0].fieldname.value
<br>-or-
<br>getTextFieldValue(_sdForm, field)
<br>β€˜β€˜Returns:β€™β€˜ String containing value
|
setTextFieldValue(_sdForm, field, value)
<br>β€˜β€˜value:β€™β€˜Β  String containing new value
Β 
|}


==Global JavaScript Variables==
====Field Type Reference====
{{:Global JavaScript Variables}}
{{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.

Notepad.png

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:

  1. Go to GearIcon.png > Customization > Objects > {object} > Fields
  2. Find the label of the field you're interested in
  3. 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

Notepad.png

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

Notepad.png

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

Notepad.png

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 false

setCheckboxState(_sdForm, field, state)
state: true or false

Example:
setCheckboxState(_sdForm, "item_approved", true);

Currency

getTextFieldValue(_sdForm, field)
Returns: String containing value

setTextFieldValue(_sdForm, field, value)
value: String containing new value

Date

_sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing value

setTextFieldValue(_sdForm, field, value)
value: String containing new value

Date time

_sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing value

setTextFieldValue(_sdForm, field, value)
value: String containing new value

Dependent Picklist

getPickListSelectedValue(_sdForm, field)
Returns: selected String containing value

setPickListValue(_sdForm, field, value)
value: String containing new value

Email Address

getTextFieldValue(_sdForm, field)
Returns: String containing value

setTextFieldValue(_sdForm, field, value)
value: String containing new value

External 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.97971165820213

setTextFieldValue(_sdForm, field, value)
value: A string containing the new geolocation value

Global Picklist

getPickListSelectedValue(_sdForm, field)
Returns: selected String containing value

setPickListValue(_sdForm, field, value)
value: String containing new value

Image Field n/a n/a
Lookup

getLookupFieldValue(_sdForm, field)
Returns: String containing record ID

getLookupFieldText(_sdForm, field)
Returns: String containing the displayed text

setLookupValue(_sdForm, field, value, text)
value: String containing record ID
text: String containing the text to display

Multiple Checkboxes

getMultiCheckBoxValue(_sdForm, field)
Returns: An array of values, one for each checked box

getMultiCheckBoxValue(_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 string

setMultiCheckBoxValue(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 value

setTextFieldValue(_sdForm, field, value)
value: String containing new value, or a number

Number with decimals

sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing value

setTextFieldValue(_sdForm, field, value)
value: String containing new value, or a float

Percentage

sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing value

setTextFieldValue(_sdForm, field, value)
value: String containing new value

Phone/Fax

sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing value

setTextFieldValue(_sdForm, field, value)
value: String containing new value

Picklist

getPickListSelectedValue(_sdForm, field)
Returns: selected String containing value

setPickListValue(_sdForm, field, value)
value: String containing new value

Example:
setPickListValue(_sdForm, "status", "Closed");

Radio Buttons

getRadioButtonValue(_sdForm, field)
Returns: String containing selected value

setRadioButtonValue(_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 value

setTextFieldValue(_sdForm, field, value)
value: String containing new value

TextField

_sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing value

setTextFieldValue(_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 value

setTextFieldValue(_sdForm, field, value)
value: String containing new value

URL

_sdForm[0].fieldname.value
-or-
getTextFieldValue(_sdForm, field)
Returns: String containing value

setTextFieldValue(_sdForm, field, value)
value: String containing new value