Form Layouts

From LongJump Support Wiki

Support Wiki > Objects > Form Layouts
Jump to: navigation, search
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


File:Lock-tiny.gif

Users in Roles with Customize Objects permission rights enabled can edit Form Layouts 


Contents

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
Clone a Form Layout
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

Manage Form Layouts

Edit a Form Layout

Edit Form Layouts in System-Generated Objects

Form Layout for a System-Generated Object

In a System-Generated Object, a few basic options are available:

  1. Click Setup | Customize | Objects | <Object Name>
  2. Click the Form Layouts tab
  3. Click the Edit icon
  4. In Basic Information section, complete the following information:
    Name
    Name of the Form Layout
    The following option is available only in Accounts, Contacts or Prospects:
    Use this layout for the Quick Add Lookup Window
    Checkbox
    If checked, this layout is used in the Quick Add Lookup Window, which provides a [New object] button in the Lookup Window
    If unchecked, the Quick Add option is not available
    The following option is available only in Accounts or Prospects:
    Show Contacts Addition Section
    Checkbox
    If checked, the contact details are shown when adding a new Account or Prospect
    If unchecked, contact details are not shown
  5. In the Display Style section, choose a Display Style to use when performing these actions:
    • Viewing a Record
    • Adding a Record
    • Editing a Record
  6. In the Related Information Display Style section, choose a style to use when Viewing Related Information in a record:
    • Sectional
    • Horizontal Tabbed

Edit Form Layouts in Objects

Form Layout for an Object}

In Objects, additional form layout options are available:

  1. Click Setup | Customize | Objects | <Object Name>
  2. Click the Form Layouts tab
  3. Click the Edit icon
  4. In Basic Information section, complete the following information:
    Name
    Name of the Form Layout
    Show/Hide Options
    Optionally, set Show/Hide Options
  5. In the Display Style section, choose a Display Style to use when performing these actions:
    • Viewing a Record
    • Adding a Record
    • Editing a Record
  6. In the Related Information Display Style section, choose a style to use when Viewing Related Information in a record:
    • Sectional
    • Horizontal Tabbed


Show/Hide Options

The following Show/Hide options are available in Objects, but are not available in System-Generated Objects.

Show Tags link
Show Tags link
  • Checkbox, checked by default
  • Optionally, uncheck to hide the Tags link
Show Navigation link
Show the Previous | Next navigation link
  • Checkbox, checked by default
  • Optionally, uncheck to hide the Navigation link
Show Clone button
Show the Clone Layout button
  • Checkbox, checked by default
  • Optionally, uncheck to hide the Clone Layout button
Show Print button
Show the Print icon
  • Checkbox, checked by default
  • Optionally, uncheck to hide the Print icon
Show Back link
Show the Back link
  • Checkbox, checked by default
  • Optionally, uncheck to hide the Back link
Show Field Hint
Show on-screen help for individual fields
When Show Field Hint is enabled, this icon appears: (?)
Hover the mouse over the (?) icon to display the help text
Help text is defined in the field description
  • If the description of any field in the Form Layout contains any alphanumeric text, the Hint link is eligible to be displayed, based on the selected actions
  • The Description text appears as on-screen help when the user clicks the Hint link
  • The Field Hint option is available for all field types, excluding Custom Control and Lookup-Derived fields
Choose to Show Field Hints for any or all of the following actions:
  • View Record
  • Edit Record
  • Add Record

Clone a Form Layout

The fastest way to add a new Form Layout is to clone the default layout. When a new form layout is created, the layout design is completely customizable, and can include any combination of elements from a default list, or select from a list of existing elements. This provides the ability to create highly customized data entry forms.

To Clone a Form Layout:

  1. Click Setup | Customize | Objects | <Object Name>
  2. In the Form Layouts tab, click the Clone Layout icon
  3. In the Basic Information Section, complete the following information:
    Name
    Name of the Layout Rule
    Show/Hide Options
    Optionally, select platform elements to show or hide in the form layout. Learn more: Show/Hide Options
    Display During
    Required
    Display the Form Layout when any the selected actions are taken on a record in the Object
    • Add Record
    • View Record
    • Update Record
    Display Criteria
    Required
    Create a Filter Expression to define when this Form Layout is displayed
    • If the expression resolves to TRUE, the Layout is displayed
    • If the expression resolves to FALSE,the Default Layout is displayed
    Click the [Check Syntax] button to verify that the expression is formatted correctly
  4. In the Display Style section, optionally choose display styles for Add, View and Edit actions. Learn more: Display Styles
  5. In the Related Information Display Style section, optionally choose a display style for the Related Information section. Learn more: Display Styles
  6. Click the [Save] button to continue, or [Cancel] to stop the action

To Edit a Cloned Form Layout:

  1. Click Setup | Customize | Objects | <Object Name>
  2. Click the Form Layouts tab
  3. Click the desired form layout tab
    Available Form Layouts include: Default, All Marketing Teams, All Sales Teams
  4. Further customize the form with the instructions in the following articles:

Delete a Form Layout

  1. Click Setup | Customize | Objects | <Object Name>
  2. Click the Delete Layout button Image:delete.gif
  3. Click OK to confirm deletion of this layout

Tabular or Grid Sections in Form Layouts

Sections divide areas in a Record for improved readability, and are collapsible so information can be hidden or visible. Sections can be configured in Tabular or Grid format.
Compare to Related Information Section

File:Lock-tiny.gif

Users in Roles with Customize Objects permission rights enabled can modify Sections 


Add a Tabular Section

  1. Click Setup | Customize | <object name>
  2. Click the Form Layouts tab
  3. From the Elements Sidebar, scroll to the Section element
  4. Click and drag the Section element to the Form Layout area; A highlight bar will appear to indicate eligible drop areas
  5. By default, a Tabular Section is created

Edit Tabular Sections

To Edit or Update a Section:

  1. Click Setup | Customize | <object name> | Form Layout
  2. Click the Edit link in the section of interest
  3. Optionally, change the Section title or options
    Keep Open at Start
    If checked, expand the section when the record is opened
    Show Empty Fields in View
    If checked, display empty (blank) fields
  4. Choose one of the following options:
  • Click the Advanced Options link to customize the section
  • Click the [Save] button to save your changes, or [Cancel] to stop the action

Edit Advanced Options in Tabular Sections

  1. In the Update Section page, complete the following information:
    Name
    Section Name
    Section Type
    Pre-populated (do not change)
    Start Expanded
    Expand the section when the record is opened
    Show Section Name in View
    If checked, the Section Name is displayed when the record is Viewed
    Show Section Name in Edit
    If checked, the Section Name is displayed when the record is Edited
    Show Empty Fields in View
    In a View, hide empty <BLANK> fields in the section
    Header Image
    Optionally, select an image to display at the top of the section
    Footer Image
    Optionally, select an image to display at the bottom of the section
    Left Side Image
    Optionally, select an image to display to the left of the section
    Right Side Image
    Optionally, select an image to display to the right of the section
  2. Optionally, Manage the Field Layout for this section
  3. Click the [Save] button to save your changes, or [Cancel] to stop the action

About the Show Section Name Options in Tabular Sections

Use these options to show or hide section names when a record is Viewed or Edited by users.

Examples of use:

Option Section Heading is...
Show Section Name in View

Show Section Name in Edit

Visible when Viewed or Edited
Show Section Name in View

Show Section Name in Edit

Visible when Viewed, Hidden when Edited
Show Section Name in View

Show Section Name in Edit

Hidden when Viewed, Visible when Edited
Show Section Name in View

Show Section Name in Edit

Hidden when Viewed or Edited

Add or Edit a Grid Section

Grid sections create a relationship between two objects.

For example, Grid Sections might present this kind of information in a record:

  • Expense line items in an Expense Report object
  • Line items in a proposal or invoice
  • List of available inventory items

To Add or Edit a Grid Section:

  1. Click Setup | Customize | <object name> | Form Layout
  2. Choose one of the following options:
    • To add a new grid section, click the New Grid Section link (located in the Elements Sidebar)
    • To edit an existing Grid section, click the Edit link in the section heading
  3. Complete the following information:
    Name
    Section Name
    Section Type
    Pre-populated (do not change)
  4. Define the grid section by selecting an Object Name and Linking Field
    Object Name
    Select an Object
    Linking Field
    Select a Lookup field from the available options
    Number of Rows
    Select the Number of Rows to display in the Grid section
    Header Image
    Optionally, select an image to display at the top of the section
    Footer Image
    Optionally, select an image to display at the bottom of the section
    Left Side Image
    Optionally, select an image to display to the left of the section
    Right Side Image
    Optionally, select an image to display to the right of the section
  5. In the Select Fields to Display in Grid section, select the fields to display in the Grid Section
  6. Click the [Next] button to continue
  7. Optionally, create summary columns in the grid and Enable additional computation on the selected object
  8. Click the [Save] button to save your changes, or [Cancel] to stop the action

Display Settings

Use the Display Settings feature to:

  • Define the Related Information Sections that will be Hidden or Visible
  • Reorder the Related Information sections in an object

To define Hidden/Visible options or reorder the Related Information sections:

  1. Click Setup | Customize | Object | <object name>
  2. Click the Form Layouts tab
  3. Navigate to the Related Information section and click the Display Settings link
  4. Use the Left/Right Arrow Buttons to select and move an object into the Hidden or Visible Objects columns
  5. Optionally, use the Up/Down Arrow Buttons to reorder the objects in the list
  6. Optionally, use the icons to configure and arrange sections. Note: Some sections have limited actions available.
Edit Section
Edit any of the available options
Move Section (Reorder)
Click and drag this icon to move the section up or down in the list
Manage Related Information
Use the Manage Related Information Button to add, edit or delete action buttons in Related Information Sections
Delete Section
Deletes the section
This icon is not available in sections based on Self Reference Lookups

Layout Rules

Layout Rules provide the ability to create dynamic Form Layouts - data entry forms that adapt and offer additional options when specific data is entered: to hide/show fields based on conditions, rules and data criteria. Layout Rules guide users through a form layout so they only edit or view the information they need.

Some examples might be: Show a discount button when an amount reaches some value, or Hide a section and prevent access to data until after a specific date and time.

File:Lock-tiny.gif

Users in Roles with Customize Objects permission rights enabled can edit Layout Rules 


How it Works

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>
Available <things> are any of the following actions:
  • Show/Hide Sections or Fields
  • Disable/Enable Fields
  • Assign Value to Fields
  • Setup Value in Picklist
  • Display Message
  • Show/Hide Buttons
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.

Examples

  • In this example, the application tracks orders for Shoes and displays a VIP discount section if a premium material selected:
Form when the criteria is TRUE:
Condition is met: the fields in the VIP discount section can be viewed or edited
Form when the criteria is FALSE:
Condition is not met: the section heading is displayed however the fields in the VIP discount section can not be viewed or changed
  • Special offer for VIP Customers:
IF Total Amount is greater than $100 USD
THEN
  • Display a VIP section with special offers for VIP clients (free shipping, discounts on next purchase, etc.)
  • Set the "VIP" flag to TRUE (which will add this customer to a customer service call list for follow up)
ELSE Set Shipping amount to "Standard"
  • Why was an Opportunity Lost?
IF Stage in an Opportunity record is changed to Closed/Lost
THEN Display a "Reason" field
ELSE Do nothing


Considerations
  • Layout rules follow an IF...THEN...ELSE model
  • 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
  • Note that the condition can be applied on Add, View or Update a Record

Manage Layout Rules

  1. Click Setup | Customize | Objects | <object name>
  2. Click the Form Layouts tab
  3. Click the layout rule icon
  4. Click the [Add New Rule] button to add a new Layout Rule, or click the name of an existing rule to update the Layout Rule, and complete the following information:
    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 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 in controlled with the [Reorder Rule] button
  5. Optionally, click the Delete link to delete a Layout Rule
  6. Optionally, click the [Reorder Rule] button to change the order that the rules are executed

About the Layout Rule Builder

The Layout Rule Builder has three sections:

IF Section
Create a Filter Expression that resolves to a TRUE/FALSE state
  • 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

Choose one of the following Display options:
  • 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.

For Developers: Form Scripting

Compare to Post Selection JavaScript and Field 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 for the On Load or On Save event scripts

Editing Form Scripts

Follow these steps to add or change scripting in a form:

  1. Select Setup | Customize | Object | <object name> | Form Layouts
  2. Click the script icon (Image:script_icon.gif)
  3. Enter or change the JavaScript in On Load Script, On Save Script, and/or Reusable Script Functions.
  4. Click the [Save] button.

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 Setup | Customize | Object | <object name> | 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 Identifier 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

In the JavaScript, use the AJAX API to communicate with the LongJump Platform.

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 update 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 opportunity. 

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

Retrieved from "http://lj.platformatyourservice.com/~platfor1/wiki/index.php?title=Form_Layouts"
Personal tools
Categories
[−] Help
[+] Overview
[+] Catalog
[+] Setup
[+] Building Applications
[+] Tips and Tricks