Difference between revisions of "Field Scripting"
imported>Aeric |
imported>Aeric m (Text replace - 'Designer > Data >' to 'Designer >') |
||
(13 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
'''Designer > Objects > {object} > Forms > {form} > {field} Script icon [[File:Script_icon.gif]]''' | |||
Field scripts let you execute [[JavaScript]] when a field in a [[Form]] gets focus or its value changes. | |||
===About Field Scripting=== | |||
JavaScript code can be run at these field-level events: | JavaScript code can be run at these field-level events: | ||
* On Change | :* '''On Change''' - This event happens when a user enters a new value in a field. At this event you can change other fields based on the value a user just entered or change the formatting of the value (such as for a telephone number). | ||
* On Focus | :* '''On Focus''' - This event happens when a user moves the focus to a field. At this event you can remind the user what to enter or temporarily change the appearance of the field (set as setting the background color). | ||
See [[Field Scripting Variables]] for information on variable syntax. | See [[Field Scripting Variables]] for information on variable syntax. | ||
Line 8: | Line 13: | ||
:''Compare to [[Forms#Form Scripting|Form Scripting]] and [[Post Selection JavaScript]]'' | :''Compare to [[Forms#Form Scripting|Form Scripting]] and [[Post Selection JavaScript]]'' | ||
== Editing Field Scripts == | You can add On Change or On Focus event scripts to any field ''except'' the following: | ||
:* Auto Number | |||
:* Custom Control | |||
:* File field | |||
:* Formula | |||
:* Image field | |||
:* Lookup | |||
:* Multi object Lookup | |||
:* Rich Text Area | |||
===Working with Field Scripts=== | |||
==== Editing Field Scripts ==== | |||
Follow these steps to add or change event scripting for a field: | Follow these steps to add or change event scripting for a field: | ||
# Click '''Designer | # Click '''Designer > Objects > {object} > Forms''' | ||
# Click the script icon ([[Image:script_icon.gif]]) next to a field in the layout | # Click the script icon ([[Image:script_icon.gif]]) next to a field in the layout | ||
# Enter or change the JavaScript in '''Field On Change Script''' and/or '''Field On Focus Script''' | # Enter or change the JavaScript in '''Field On Change Script''' and/or '''Field On Focus Script''' | ||
# Click the '''Save''' button | # Click the '''Save''' button | ||
== Writing Field Scripts == | ==== Writing Field Scripts ==== | ||
In the HTML document object model (DOM), the current form is named <tt>mainForm</tt>. For example, the line of code below gets a reference to the current form in the variable named <tt>form</tt>: | In the HTML document object model (DOM), the current form is named <tt>mainForm</tt>. For example, the line of code below gets a reference to the current form in the variable named <tt>form</tt>: | ||
:{| | |||
<pre>var form = document.mainForm;</pre> | <pre>var form = document.mainForm;</pre> | ||
|} | |||
You can refer to a field in a form using the name under "Field Name" when you select '''Designer | You can refer to a field in a form using the name under "Field Name" when you select '''Designer > Objects' > {object} > Fields'''. For example, the line of code below gets a reference to the <tt>firstName</tt> field in the variable <tt>elem</tt>: | ||
:{| | |||
<pre>var elem = document.mainForm.firstName;</pre> | <pre>var elem = document.mainForm.firstName;</pre> | ||
|} | |||
However, you can also use the implicit variable <tt>obj</tt> to refer to the current field where the event occurred. | However, you can also use the implicit variable <tt>obj</tt> to refer to the current field where the event occurred. | ||
Line 32: | Line 51: | ||
These examples show using the implicit variable <tt>obj</tt> with these properties: | These examples show using the implicit variable <tt>obj</tt> with these properties: | ||
:{| | |||
<pre>alert("Selected field's name: " + obj.name); | <pre>alert("Selected field's name: " + obj.name); | ||
alert("Selected field's value: " + obj.value); | alert("Selected field's value: " + obj.value); | ||
</pre> | </pre> | ||
|} | |||
Use [[AJAX and REST]] to communicate with the platform in JavaScript code. | Use [[AJAX and REST]] to communicate with the platform in JavaScript code. | ||
== On Change Examples == | ==== On Change Examples ==== | ||
In an Opportunity object, calculate a <tt>value</tt> field based upon a <tt>num_users</tt> field. | In an Opportunity object, calculate a <tt>value</tt> field based upon a <tt>num_users</tt> field. | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm; | var form = document.mainForm; | ||
Line 51: | Line 71: | ||
} | } | ||
</pre> | </pre> | ||
|} | |||
When a user changes an order, if a discount is given, make sure that <tt>approval_required</tt> is checked. | When a user changes an order, if a discount is given, make sure that <tt>approval_required</tt> is checked. | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm; | var form = document.mainForm; | ||
Line 62: | Line 83: | ||
} | } | ||
</pre> | </pre> | ||
|} | |||
When a user enters a first name, capitalize it automatically: | When a user enters a first name, capitalize it automatically: | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm | var form = document.mainForm | ||
form test.value = form.test.value.toUpperCase(); | form.test.value = form.test.value.toUpperCase(); | ||
// The line above could also be written as: | // The line above could also be written as: | ||
// obj.value = obj.value.toUpperCase(); | // obj.value = obj.value.toUpperCase(); | ||
</pre> | </pre> | ||
|} | |||
When a user changes the <tt>job_knowledge_notes</tt> field, copy the new value to the <tt>dependability_notes</tt> field. | When a user changes the <tt>job_knowledge_notes</tt> field, copy the new value to the <tt>dependability_notes</tt> field. | ||
:{| | |||
<pre> | <pre> | ||
document.mainForm.dependability_notes.value = document.mainForm.job_knowledge_notes.value | document.mainForm.dependability_notes.value = document.mainForm.job_knowledge_notes.value | ||
</pre> | </pre> | ||
|} | |||
Display an alert dialog showing the value of a checkbox. | Display an alert dialog showing the value of a checkbox. | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm; | var form = document.mainForm; | ||
Line 85: | Line 110: | ||
alert( "Multi Check Box Value is: " + value); | alert( "Multi Check Box Value is: " + value); | ||
</pre> | </pre> | ||
|} | |||
Change the value of text area field based on a variable. | Change the value of text area field based on a variable. | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm; | var form = document.mainForm; | ||
Line 104: | Line 130: | ||
} | } | ||
</pre> | </pre> | ||
|} | |||
{{:Change Checkbox Value Script}} | {{:Change Checkbox Value Script}} | ||
== On Focus Example == | ==== On Focus Example ==== | ||
When a user moves the focus to the account name field, remind the user to enter the name capitalized. | When a user moves the focus to the account name field, remind the user to enter the name capitalized. | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm; | var form = document.mainForm; | ||
alert("Please enter the account name in all caps"); | alert("Please enter the account name in all caps"); | ||
</pre> | </pre> | ||
|} | |||
== Grid Field Scripting == | ==== Grid Field Scripting ==== | ||
You can run JavaScript code at on change and on focus events in grid fields. | You can run [[JavaScript]] code at on change and on focus events in grid fields. | ||
Follow these steps to add event scripting to a grid field: | Follow these steps to add event scripting to a grid field: | ||
Line 129: | Line 157: | ||
For example, assume that you have a grid with these field names: full_name, first_name, and last_name. You can create references to these fields with the statements below: | For example, assume that you have a grid with these field names: full_name, first_name, and last_name. You can create references to these fields with the statements below: | ||
:{| | |||
<pre> | <pre> | ||
var fullname = eval('document.mainForm.'+grid_section+'full_name'); | var fullname = eval('document.mainForm.'+grid_section+'full_name'); | ||
Line 135: | Line 163: | ||
var lastname = eval('document.mainForm.'+grid_section+'last_name'); | var lastname = eval('document.mainForm.'+grid_section+'last_name'); | ||
</pre> | </pre> | ||
|} | |||
You can then update the full_name field automatically in an on change event script for the first name or last name field with this code: | You can then update the full_name field automatically in an on change event script for the first name or last name field with this code: | ||
:{| | |||
<pre> | <pre> | ||
fullname = firstname.value + ' ' + lastname.value; | fullname = firstname.value + ' ' + lastname.value; | ||
</pre> | </pre> | ||
|} | |||
= | ===Learn More=== | ||
==Learn More== | |||
:* [[Field Name|Field Name and Field Value]] syntax | :* [[Field Name|Field Name and Field Value]] syntax | ||
:* Use [[AJAX and REST]] to communicate with the platform in JavaScript code. | :* Use [[AJAX and REST]] to communicate with the platform in JavaScript code. | ||
:* [[Global JavaScript Variables]] | :* [[Global JavaScript Variables]] | ||
:* [[JavaScript#Accessing_Additional_Lookup_Variables_in_a_Form|Accessing Additional Lookup Variables in a Form]] | |||
<noinclude> | |||
[[Category:JavaScript]] | |||
</noinclude> |
Latest revision as of 23:18, 22 June 2012
Designer > Objects > {object} > Forms > {form} > {field} Script icon
Field scripts let you execute JavaScript when a field in a Form gets focus or its value changes.
About Field Scripting
JavaScript code can be run at these field-level events:
- On Change - This event happens when a user enters a new value in a field. At this event you can change other fields based on the value a user just entered or change the formatting of the value (such as for a telephone number).
- On Focus - This event happens when a user moves the focus to a field. At this event you can remind the user what to enter or temporarily change the appearance of the field (set as setting the background color).
See Field Scripting Variables for information on variable syntax.
- Compare to Form Scripting and Post Selection JavaScript
You can add On Change or On Focus event scripts to any field except the following:
- Auto Number
- Custom Control
- File field
- Formula
- Image field
- Lookup
- Multi object Lookup
- Rich Text Area
Working with Field Scripts
Editing Field Scripts
Follow these steps to add or change event scripting for a field:
- Click Designer > Objects > {object} > Forms
- Click the script icon () next to a field in the layout
- Enter or change the JavaScript in Field On Change Script and/or Field On Focus Script
- Click the Save button
Writing Field Scripts
In the HTML document object model (DOM), the current form is named mainForm. For example, the line of code below gets a reference to the current form in the variable named form:
var form = document.mainForm;
You can refer to a field in a form using the name under "Field Name" when you select Designer > Objects' > {object} > Fields. For example, the line of code below gets a reference to the firstName field in the variable elem:
var elem = document.mainForm.firstName;
However, you can also use the implicit variable obj to refer to the current field where the event occurred.
Fields have two properties that you can access in code:
- name: the name of the field
- value: the value of the field
These examples show using the implicit variable obj with these properties:
alert("Selected field's name: " + obj.name); alert("Selected field's value: " + obj.value);
Use AJAX and REST to communicate with the platform in JavaScript code.
On Change Examples
In an Opportunity object, calculate a value field based upon a num_users field.
var form = document.mainForm; if (form.num_users.value != '0') { form.calc_amount.value = form.num_users.value * 20; }
When a user changes an order, if a discount is given, make sure that approval_required is checked.
var form = document.mainForm; if (form.discount.value != '0') { form.approval_required.checked = true; }
When a user enters a first name, capitalize it automatically:
var form = document.mainForm form.test.value = form.test.value.toUpperCase(); // The line above could also be written as: // obj.value = obj.value.toUpperCase();
When a user changes the job_knowledge_notes field, copy the new value to the dependability_notes field.
document.mainForm.dependability_notes.value = document.mainForm.job_knowledge_notes.value
Display an alert dialog showing the value of a checkbox.
var form = document.mainForm; var value = form.multicheckbox[0].value; alert( "Multi Check Box Value is: " + value);
Change the value of text area field based on a variable.
var form = document.mainForm; if(obj.value == "Record1") { form.multilinetxt1.value = 'First Record'; } if(obj.value == "Record2") { form.multilinetxt1.value = 'Second Record'; } else { form.multilinetxt1.value = 'Not first or second record'; }
Change the value of a checkbox field to True based on an integer meeting some criteria.
if(form.contract_amount.value > 100000) { form.approved_for_loan.checked = true; }
On Focus Example
When a user moves the focus to the account name field, remind the user to enter the name capitalized.
var form = document.mainForm; alert("Please enter the account name in all caps");
Grid Field Scripting
You can run JavaScript code at on change and on focus events in grid fields.
Follow these steps to add event scripting to a grid field:
- Click the script icon () in the column header of a field in a grid.
- Enter the JavaScript in On Change Script and/or On Focus Script.
- Click the Save button.
You can refer to these implicit variables in event scripts for grid fields:
- grid_section: current grid name used as a prefix for field names
- grid_section_row_id: current row identifier
For example, assume that you have a grid with these field names: full_name, first_name, and last_name. You can create references to these fields with the statements below:
var fullname = eval('document.mainForm.'+grid_section+'full_name'); var firstname = eval('document.mainForm.'+grid_section+'first_name'); var lastname = eval('document.mainForm.'+grid_section+'last_name');
You can then update the full_name field automatically in an on change event script for the first name or last name field with this code:
fullname = firstname.value + ' ' + lastname.value;
Learn More
- Field Name and Field Value syntax
- Use AJAX and REST to communicate with the platform in JavaScript code.
- Global JavaScript Variables
- Accessing Additional Lookup Variables in a Form