Forms

Designer > Presentation > Forms

Form Layouts define the Fields and Sections that are visible to users when a Record in an Object is viewed or edited. A well-defined form makes data entry easier and faster for users.

Optionally, use the Elements Sidebar to configure Form Layouts.

Considerations

• Form Layouts are associated with Objects
• Multiple form layouts can be created for an Object
• In addition to the standard form layouts, you can create your own custom Pages for viewing, adding, or updating a record, and select them for use in the object Properties section: Presentation Pages.

Users that have the Customize Objects permission can edit Form Layouts

Configuration Options in Form Layouts

The following configuration options are available in Form Layouts:

File:Formlayoutconfig.gif

Learn More

	Edit a Form Layout
	Form Scripting
File:Clonelayouticon.gif	Clone a Form Layout
File:Layoutruleicon.gif	Layout Rules

Considerations

• When an Object is created, a Default Form Layout is created
• The Default Form Layout cannot be deleted or renamed
• When a user creates a new form layout, that user has full control over the design, and can add any combination of elements from a default list, or select from a list of existing elements

Working with a Form Layout

Next to each element in a form is a series of icons you can use to edit it rearrange its position, add a script, or remove it from the form:

You can also add fields, sections, and other elements to the form using the controls at top left, as shown below.

Elements

The Elements section contains things you can drag and drop into the form.

Fields

The first tab is Fields. It contains the object fields that can be put into the form.

Form Controls

The second tab is Form Controls.

	Spacer	Add horizontal space between elements in a form.
	Label	Add a label to a form.
	Horizontal Divider	Add a dividing line between elements in a form.
	Section	Sections divide areas in a Form Layout for improved readability and organization Sections have a default setting to open expanded or collapsed Fields in sections can be hidden in a View, if the field contains no data Within a section, images can be displayed in the header, footer, left or right margins
	Quick Link	A Quick Link provides the ability to pass a value from a record to a website URL. For example, add a Google News lookup to an Account, or add a Facebook lookup to a Contact

New Section Constructors

Underneath the Elements section, there are two links you can use to create additional sections in the form:

New Grid Section	Adds related information records from another object Grid sections are displayed as a table or spreadsheet within a record For example, the Parts object can contain a grid section that lists component parts (from the Components object)
New Related Information section	A Related Information Section is part of each Record, and displays related records from other objects Related Information Sections are created by default in all Objects Use this link to create (optional) additional Related Information Sections. Learn more: Object Relationships

Manage Form Layouts

Manage Form Layouts

Layout Rules

Designer > Objects > {object} > Forms > {form} > [Layout Rules]

Layout Rules provide the ability to create dynamic Forms that adapt and offer additional options as data is entered.

About Layout Rules

As data is entered into a form, Layout Rules can be used to:

• Hide or show fields or entire sections of a form.
• Disable or enable fields
• Assign a value to a field
• Hide or show values in a Picklist
• Hide or show values a Button
• Display a message

Sample use cases:

• Show a discount button when an amount reaches some value
• Hide a section to prevent access to data until after a specific date and time.

Working with Layout Rules

Users that have the Customize Objects permission can edit Layout Rules

Layout Rules use an IF...THEN...ELSE model to customize a form layout:

IF some <condition> is TRUE

THEN do a <thing>

ELSE do another <thing>

The <condition> is written as a Formula Expression, which can make use of most of the fields in the record, as well as some related fields.

Considerations

• Each Layout Rule can include multiple actions
• Actions are executed in the order in which they are displayed
• Actions can be added, edited, deleted or reordered
• Sections can be opened based on a condition
• A condition can be applied on Add, View or Update of a Record
• To be available for use in a Layout Rule, the field must not be hidden in the layout.
  (If it should be hidden at times, then hide it using a Layout Rule.)
• Multi Object Lookup fields cannot be used to specify criteria for a Layout Rule.
  Learn more: Multi Object Lookup#Considerations

Note: A field can be referenced in either: a. A section for which Show Empty Fields in View has been disabled     (using Advanced Options in a Section), or b. A Layout Rule condition. But it cannot be referenced in both places. The Reason: If the field is empty, the server removes it from the page. The Layout Rule, meanwhile, is a JavaScript function in the page. When the Layout Rule tries to test that field, an error occurs.

Adding or Editing a Layout Rule

1. Click Designer > Objects > {object} > Forms > {form} View
2. Click the [Layout Rule] button at the top of the page.
3. Click the [Add New Rule] button to add a new Layout Rule,
   or click the name of an existing rule to edit it.

   Name

   Name of the Layout Rule

   Enabled

   Check the box to enable the Layout Rule, or uncheck it to disable the Layout Rule

   Description

   Description of the rule

   Apply rule during

   Executes the Layout Rule when any of the selected actions are taken on a record in the Object

   • Add Record
   • View Record
   • Update Record

   On Success do not continue to next Rule

   Checkbox, unchecked by default

   • If checked, and this rule is Triggered, then any rules that follow are not processed
   • The order of processing rules is controlled with the [Reorder Rule] button

   Use the Layout Rule Builder to create an IF, THEN, ELSE statement. This statement defines the behaviors and actions of the Layout Rule.

4. Click [Save]

Reorder Layout Rules

1. Click Designer > Objects > {object} > Forms > {form} View
2. Click the [Layout Rule] button at the top of the page.
3. Click the [Reorder Rule] button to change the order in which rules are executed.

Layout Rule Builder

The Layout Rule Builder has three sections:

IF Section

Specify the condition that will trigger this rule

• Create a Formula Expression (using <FIELD_NAME> <OPERATOR> <FUNCTION>) that evaluates to a TRUE/FALSE state
• The contents of the Field list may differ based on the object

• If the condition resolves to TRUE, take the action associated with the THEN condition
• If the condition resolves to FALSE, take the action associated with the ELSE condition

THEN Section

Optionally, create action(s) to take when the expression is TRUE; Actions are displayed in rows which can be added, edited, deleted or reordered

ELSE Section

Optionally, create action(s) to take when the expression is FALSE; Actions are displayed in rows which can be added, edited, deleted or reordered

Available Actions

Available actions include:

• Show/Hide Sections or Fields
• Disable/Enable Fields
• Assign Value to Fields
• Setup Value in Picklist
• Display Message:

• Once During Form Save Only
• When Condition Matches

• Show/Hide Buttons

Using Enumerated Picklists in Layout Rules

Layout Rule criteria can be specified using Enumerated Picklist Values. The Display Label is not considered valid for criteria in Layout Rules.

About the [Save Changes] Button

If you are editing a form layout and attempt to navigate to a different tab in the object, the following message is displayed, which provides the option to [Cancel] the action and [Save Changes], or continue [OK] and abandon the edit process.

File:Confirmformlayoutchange.gif

For Developers: Form Scripting

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:

1. Click Designer > Objects > {object} > Forms
2. Click [Form Script]
3. Click [Edit]
4. Enter or change the JavaScript in On Load Script, On Save Script, and/or Reusable Script Functions
5. 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