Difference between revisions of "Form Scripting"
imported>Aeric |
imported>Aeric m (Text replace - 'Designer > Data >' to 'Designer >') |
||
(23 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
'''Designer > Objects > {object} > Forms > {form} > [Edit Form Script]''' | |||
==About Form Scripting== | Form Scripting lets you specify [[JavaScript]] code to execute when a [[Form]] is loaded or saved. | ||
:''Compare to [[Post Selection JavaScript]] and [[Field Scripting]]'' | |||
:''Learn more:'' | |||
:* Using [[AJAX and REST]] to communicate with the platform | |||
===About Form Scripting=== | |||
JavaScript code can be invoked at these form-level events: | JavaScript code can be invoked at these form-level events: | ||
*;On Load: | :*;On Load: | ||
:*This event happens when the form loads | ::*This event happens when the form loads | ||
:*By default, the On Load scripts are triggered on ''any'' record action (View, Add, Update) | ::*By default, the On Load scripts are triggered on ''any'' record action (View, Add, Update) | ||
::Optionally, invoke the script on a ''specific'' action (View or Add or Update) | :::Optionally, invoke the script on a ''specific'' action (View or Add or Update) | ||
::''Learn more: [[#Trigger on a Specific Action|Trigger on a Specific Action]]'' | :::''Learn more: [[#Trigger on a Specific Action|Trigger on a Specific Action]]'' | ||
*;On Save: | :*;On Save: | ||
:*This event happens when a user clicks the [Save] button on a form | ::*This event happens when a user clicks the [Save] button on a form | ||
:*At this event, optionally perform custom front-end validations before sending the data to the server | ::*At this event, optionally perform custom front-end validations before sending the data to the server | ||
:*Return false to cancel the save | ::*Return false to cancel the save | ||
*;Resusable Script Functions: | :*;Resusable Script Functions: | ||
:*Available to be called | ::*Available to be called from the On Load or On Save event form scripts | ||
::*Also available to be called from the On Change and On Focus event field scripts | |||
===Working with Form Scripts=== | |||
===Editing Form Scripts=== | ====Editing Form Scripts==== | ||
Follow these steps to add or change scripting in a form: | Follow these steps to add or change scripting in a form: | ||
# Click '''Designer | # Click '''Designer > Objects > {object} > Forms''' | ||
# Click | # Click '''[Form Script]''' | ||
# Enter or change the JavaScript in '''On Load Script''', '''On Save Script''', and/or '''Reusable Script Functions''' | # Click '''[Edit]''' | ||
# Click | # Enter or change the JavaScript in '''On Load Script''', '''On Save Script''', and/or '''Reusable Script Functions''' | ||
# Click '''[Save]''' | |||
===Writing Form Scripts=== | ====Writing Form 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> | ||
|} | |||
Fields have two properties that you can access in code: | Fields have two properties that you can access in code: | ||
* <tt>name</tt>: the name of the field | :* <tt>name</tt>: the name of the field | ||
* <tt>value</tt>: the value of the field | :* <tt>value</tt>: the value of the field | ||
;Example - Update the field value of a text field: | ;Example - Update the field value of a text field: | ||
Line 48: | Line 58: | ||
To update the field value of a [[Lookup]] field, two parameters are required: | To update the field value of a [[Lookup]] field, two parameters are required: | ||
:;RecordID:<tt>lookup.value</tt> | :;RecordID:<tt>lookup.value</tt> | ||
::This is the [[Record | ::This is the [[Record Id]] of the record in the object | ||
:;Field value:<tt>lookup_name.value</tt> | :;Field value:<tt>lookup_name.value</tt> | ||
::This is the value of the record in the object | ::This is the value of the record in the object | ||
To update the field value of a lookup field (<tt>project_number</tt>), use the following syntax: | To update the field value of a lookup field (<tt>project_number</tt>), use the following syntax: | ||
:{| | |||
{ | |||
| | |||
<pre> | <pre> | ||
form.project_number.value = "123456"; | form.project_number.value = "123456"; | ||
Line 64: | Line 72: | ||
|} | |} | ||
====On Load Examples==== | |||
===On Load Examples=== | |||
Set the opportunity name with the account name when adding an opportunity. | Set the opportunity name with the account name when adding an opportunity. | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm; | var form = document.mainForm; | ||
form.name.value = form.reference_id_name.value; | form.name.value = form.reference_id_name.value; | ||
</pre> | </pre> | ||
|} | |||
Convert the current date into day name, month name, and day number format and puts the resulting value in the <tt>account_order</tt> field. | Convert the current date into day name, month name, and day number format and puts the resulting value in the <tt>account_order</tt> field. | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm; | var form = document.mainForm; | ||
Line 83: | Line 92: | ||
form.account_order.value = v2[v1.getDay()] + " " + v3[v1.getMonth()] + " " + v1.getDate(); | form.account_order.value = v2[v1.getDay()] + " " + v3[v1.getMonth()] + " " + v1.getDate(); | ||
</pre> | </pre> | ||
|} | |||
=====Trigger on a Specific Action===== | |||
====Trigger on a Specific Action==== | |||
To invoke a script On Load + Action (View, Update, Add or Clone a record): | To invoke a script On Load + Action (View, Update, Add or Clone a record): | ||
Line 93: | Line 102: | ||
var action = document.mainForm.a.value; | var action = document.mainForm.a.value; | ||
if ( action == "view") { | if ( action == "view") { | ||
// java script to be triggered on the | // java script to be triggered on the view of the record only | ||
<!--...--> | <!--...--> | ||
} | } | ||
Line 120: | Line 129: | ||
|} | |} | ||
===On Save Examples=== | ====On Save Examples==== | ||
Make sure there is a contact when creating an | Make sure there is a contact when creating an Lead. | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm; | var form = document.mainForm; | ||
Line 134: | Line 144: | ||
} | } | ||
</pre> | </pre> | ||
|} | |||
If a user checked the "Done" radio button in a radio button group named <tt>technical_spec_completed</tt>, set the <tt>spec_date</tt> field with the current date formatted as month number, day number, and year. | If a user checked the "Done" radio button in a radio button group named <tt>technical_spec_completed</tt>, set the <tt>spec_date</tt> field with the current date formatted as month number, day number, and year. | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm; | var form = document.mainForm; | ||
Line 152: | Line 163: | ||
} | } | ||
</pre> | </pre> | ||
|} | |||
The email address field on a form is not mandatory, but you want to encourage users to enter it. If the user clicks OK in the confirm dialog, it cancels the save so they can then enter the email address. If they click cancel, the save proceeds. | The email address field on a form is not mandatory, but you want to encourage users to enter it. If the user clicks OK in the confirm dialog, it cancels the save so they can then enter the email address. If they click cancel, the save proceeds. | ||
:{| | |||
<pre> | <pre> | ||
var form = document.mainForm; | var form = document.mainForm; | ||
Line 170: | Line 183: | ||
} | } | ||
</pre> | </pre> | ||
|} | |||
{{:Change Checkbox Value Script}} | {{:Change Checkbox Value Script}} | ||
==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:21, 22 June 2012
Designer > Objects > {object} > Forms > {form} > [Edit Form Script]
Form Scripting lets you specify JavaScript code to execute when a Form is loaded or saved.
- Compare to Post Selection JavaScript and Field Scripting
- Learn more:
- Using AJAX and REST to communicate with the platform
About Form Scripting
JavaScript code can be invoked at these form-level events:
- On Load
- This event happens when the form loads
- By default, the On Load scripts are triggered on any record action (View, Add, Update)
- Optionally, invoke the script on a specific action (View or Add or Update)
- Learn more: Trigger on a Specific Action
- On Save
- This event happens when a user clicks the [Save] button on a form
- At this event, optionally perform custom front-end validations before sending the data to the server
- Return false to cancel the save
- Resusable Script Functions
- Available to be called from the On Load or On Save event form scripts
- Also available to be called from the On Change and On Focus event field scripts
Working with Form Scripts
Editing Form Scripts
Follow these steps to add or change scripting in a form:
- Click Designer > Objects > {object} > Forms
- Click [Form Script]
- Click [Edit]
- Enter or change the JavaScript in On Load Script, On Save Script, and/or Reusable Script Functions
- Click [Save]
Writing Form 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;
Fields have two properties that you can access in code:
- name: the name of the field
- value: the value of the field
- Example - Update the field value of a text field
To update the field value of a text field first_name, use the following syntax:
- form.first_name.value = "Adam"
- Example - Update the field value of a Lookup field
To update the field value of a Lookup field, two parameters are required:
- RecordID
- lookup.value
- This is the Record Id of the record in the object
- Field value
- lookup_name.value
- This is the value of the record in the object
To update the field value of a lookup field (project_number), use the following syntax:
form.project_number.value = "123456"; // 123456 is the internal record identifier of the record present in lookup object form.project_number_name.value = "My Project"; // My project is the value present in the record locator field(s) of the lookup object
On Load Examples
Set the opportunity name with the account name when adding an opportunity.
var form = document.mainForm; form.name.value = form.reference_id_name.value;
Convert the current date into day name, month name, and day number format and puts the resulting value in the account_order field.
var form = document.mainForm; var v1 = new Date(); var v2 = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thurs', 'Fri', 'Sat', 'Sun'); var v3 = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'); form.account_order.value = v2[v1.getDay()] + " " + v3[v1.getMonth()] + " " + v1.getDate();
Trigger on a Specific Action
To invoke a script On Load + Action (View, Update, Add or Clone a record):
Trigger on record View:
var action = document.mainForm.a.value; if ( action == "view") { // java script to be triggered on the view of the record only <!--...--> }
Trigger on record Update:
var action = document.mainForm.a.value; if ( action == "update") { // java script to be triggered on the update of the record only <!--...--> }
Trigger on record Add or Clone:
var action = document.mainForm.a.value; if ( action == "add") { //java script to be triggered on the add or clone of the record only <!--...--> }
On Save Examples
Make sure there is a contact when creating an Lead.
var form = document.mainForm; if (form.reference_type[form.reference_type.selectedIndex].value == 'Lead') { if (form.contact_id.value == "") { alert("Please enter Contact Name"); return false; // cancel the save operation } }
If a user checked the "Done" radio button in a radio button group named technical_spec_completed, set the spec_date field with the current date formatted as month number, day number, and year.
var form = document.mainForm; function formatDate(value) { return value.getMonth()+1 + "/" + value.getDate() + "/" + value.getFullYear(); } for (var i=0; i<form.technical_spec_completed.length; i++) { if(form.technical_spec_completed[i].checked && form.technical_spec_completed[i].value == 'Done' && form.spec_date.value == '') { t = new Date(); form.spec_date.value = formatDate(t); } }
The email address field on a form is not mandatory, but you want to encourage users to enter it. If the user clicks OK in the confirm dialog, it cancels the save so they can then enter the email address. If they click cancel, the save proceeds.
var form = document.mainForm; if(form.email.value=="") if (confirm("While the Email field is optional, we recommend that you enter a value")) { //User clicked OK: do not proceed with save return false; else { //User clicked cancel: let save happen return true; } }
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; }
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