Customizing Page Layout

  • Updated on Apr 1, 2026
  • Published on Dec 23, 2025
  • 7 minute(s) read
  • PH
  • Migration Team
 Prev Next

Overview

A Page Layout in Salesforce is a customizable interface that determines how information is organized and displayed to users. This article provides step-by-step instructions for customizing page layouts in the TechnoMile Contracts Suite on Salesforce Sales Cloud.

Audience

  • Salesforce Administrators

  • IT Support

Prerequisites

  • Ensure that custom fields, etc. have already been created using Object Manager.

Contract Suite Configure Page

Refer to the Create Custom Fields for detailed information on creating new fields for the objects in Salesforce.

To view the Contract suite configure page:

  1. In your Salesforce organization, open the App Launcher  App launcher icon.png.

  2. Use the search field to find and open Contract Suite Configure.
    Contract suite configure home page.png

  3. Enable Revision History checkbox enables the Revision History feature for all record types of both the Contract and Subcontract objects. For detailed information, refer Revision History Setup Guide.

  4. CPAR Self-Eval Notification field indicates whether the CM requires an email notification to create a self evaluation form. For detailed information, refer CPAR Configuration Guide.

Creating and Managing Custom Fields

Adding a Custom Field

To create a custom field:

  1. In the Contract Suite Configure page, click the plus icon glance plus icon.png.
    The Add Field dialog box appears.
    Add field dialog.png

  2. Specify the field details:

    1. Enable the Is Component check box if required.

    2. Enter a Field Label.

      NOTE

      As you enter the Field Label, a list of suggested values appear. Select an appropriate value or copy the Field Name from the Fields & Relationships page in Object Manager.

    3. On entering the Field Name, the Field API Name/Component name is auto-populated.

      NOTE

      If you have multiple fields with the same Field Label, it is recommended that you manually enter the Field API Name.

    4. Enter a value for the Column Span.

      NOTE

      The Column Span field controls the number of fields per row.

      For example:

      • A column span of 12 means 1 field per row

      • A column span of 6 means 2 fields per row

      • A column span of 4 means 3 fields per row

      • A column span of 3 means 4 fields per row
        Avoid using values that are not divisors of 12 (e.g., 5) or less than 3.

    5. Optionally, add a Document ID to display an image with the custom field.

    6. Optionally, select a Color.

  3. Click Add.

Editing and Deleting a Custom Field

To edit a custom field:

  1. In the Contract Suite Configure page, under At a Glance, click the wrench icon wrench icon.png next to the custom field you want to edit.
    At a glance.pngThe Update Field dialog appears.
    Update custom Field.png

  2. Update the fields as required and click Add.

To delete a custom field:

  1. In the Contract Suite Configure page, under At a Glance, click the delete icon delete icon.png next to the custom field you want to delete.
    A confirmation window appears.

  2. Click Yes, delete it.

Rearranging Custom Fields

To rearrange the custom fields:

  1. In the Contract Suite Configure page, under At a Glance, click the rearrange icon rearrange icon.png.
    The Rearrange Fields dialog appears.
    rearrange fields.png

  2. Drag and drop the fields as required and click Rearrange.

Adding and Managing Tabs

NOTE

You can add a maximum of 9 tabs in a single page layout. Failure to adhere to this limit may result in unexpected system behavior.

Adding a Tab

To add a new tab to the page layout:

  1. In the Contract Suite Configure page, click Add Tab.
    Add tab.pngThe Add Tab dialog appears.
    add tab dialog.png

  2. Specify the field details:

    1. Enter a Label.

    2. Select a Background Color.

    3. Select a Status Field Api Name.

  3. Click Add.

Editing and Deleting a Tab

To edit a tab:

  1. In the Contract Suite Configure page, select the tab you want to edit.
    edit tab.png

  2. Click the wrench icon wrench icon blue.png.
    The Update Tab dialog appears.
    update tab.png

  3. Update the fields as required and click Update.

To delete a tab:

  1. In the Contract Suite Configure page, select the tab you want to delete.

  2. Click the delete icon delete blue icon.png.
    A confirmation window appears.

  3. Click Yes, delete it.

Rearranging Tabs

To rearrange the tabs:

  1. In the Contract Suite Configure page, click the rearrange icon rearrange icon.png.
    The Rearrange Tabs dialog appears.
    rearrange tab.png

  2. Drag and drop the tabs as required and click Rearrange.

Adding and Managing Sections

Adding a Section to a Tab

NOTE

You can add a maximum of 9 sections per tab. Failure to adhere to this limit may result in unexpected system behavior.

To add a new section to a tab:

  1. In the Contract Suite Configure page, select the tab to which you want to add a section.

  2. Click Add Section.
    Add section.pngThe Add Section dialog appears.
    Add section dilog.png

  3. Specify the field details:

    1. Enter a Label.

    2. Select the No. of Column.

    3. Select a Color.

  4. Click Add.
    For instance, the below image shows Important Dates and Financials sections added in the Contract Overview tab.
    section highlighted.png

Editing and Deleting a Section from a Tab

To edit a section:

  1. In the Contract Suite Configure page, select the tab and navigate to the section that you want to edit.

  2. Click the wrench icon wrench icon blue.png.
    The Update Section dialog appears.
    Update section dialog.png

  3. Update the fields as required and click Update.

To delete a section:

  1. In the Contract Suite Configure page, select the tab and navigate to the section that you want to delete.

  2. Click the delete icon delete blue icon.png.
    A confirmation window appears.

  3. Click Yes, delete it.

Rearranging Sections

To rearrange the sections of a tab:

  1. In the Contract Suite Configure page, select the tab to rearrange its sections.

  2. Click Re-Arrange Section.
    rearrange section button.pngThe Rearrange Sections dialog appears.
    rearrange section dilog.png

  3. Drag and drop the sections as required and click Rearrange.

Adding and Managing Fields in a Section

Adding a Field to a Section

To add a field to a section:

  1. In the Contract Suite Configure page, select the tab and navigate to the section where you want to add fields.

  2. Click Add Field.
    Add field button.pngThe Add Field dialog appears.
    add field in section.png

  3. Specify the field details:

    1. Enter a Field Label.

      NOTE

      As you enter the Field Label, a list of suggested values appear. Select an appropriate value or copy the Field Name from the Fields & Relationships page in Object Manager.

    2. On entering a Field Label, the Field Api Name is auto-populated.

      NOTE

      If you have multiple fields with the same Field Label, it is recommended that you manually enter the Field API Name.

    3. Enter a View Field Api.

      NOTE

      As you enter the View Field Api, a list of suggested values appear. Select an appropriate value

    4. Enter an Error Message.

    5. Enable the Is Draft Required? checkbox to make it mandatory for users to enter data in the field while saving the record as a draft.

    6. Enable the Is Required? checkbox to make it mandatory for users to enter data in the field while activating a record.

    7. Enable the Read Only checkbox to make the field non-editable for users while saving the record as a draft or activating it.
      Note: If you enable the Read Only checkbox, make sure the Is Draft Required? or Is Required? checkboxes are disabled.

    8. Enable the Create Blank Space checkbox to create a blank space field.

  4. Click Add.

Editing and Deleting a Section Field

To edit a section:

  1. In the Contract Suite Configure page, select the tab and navigate to the section that you want to edit.

  2. Click the wrench icon wrench icon blue.png.
    The Update Section dialog appears.
    Update section dialog.png

  3. Update the fields as required and click Update.

To delete a section:

  1. In the Contract Suite Configure page, select the tab and navigate to the section that you want to delete.

  2. Click the delete icon delete blue icon.png.
    A confirmation window appears.

  3. Click Yes, delete it.

Rearranging Section Fields

To rearrange the section fields:

  1. In the Contract Suite Configure page, select the tab and navigate to the required section.

  2. Click Re-Arrange Field.
    The Rearrange Field dialog appears.
    rearrange sec fields.png

  3. Drag and drop the sections as required and click Rearrange.

Moving a Section between Tabs

To move a section from one tab to another:

  1. In the Contract Suite Configure page, select the tab and navigate to the section that you want to move.

  2. Click Move Section.
    move section overview.pngThe Move Section dialog appears.
    move sec dilog.png

  3. Select a tab from the Select Destination Tab dropdown and click Move.

Adding and Managing a Page/Component

Adding a Page/Component

To add a page/component:

  1. In the Contract Suite Configure page, select the tab where you want to add a page/component.

  2. Click Add Page/Component.
    Add page comp.pngThe Add VF Page dialog appears.
    Add VF page.png

  3. Specify the field details:

    1. Enter a Label.

    2. Enter a Page/Component Name.

    3. Set a Page/Component Width and Height such as 500 and 500.

    4. Enable the Is Component checkbox. Enabling the Is Component checkbox displays the App API field.

    5. Enter an App API.

  4. Click Add.
    The Page/component is added as shown in the image below.
    page comp.png

Editing and Deleting a Page/Component

To edit a page/component:

  1. In the Contract Suite Configure page, select the tab and navigate to the page/component that you want to edit.

  2. Click the wrench icon wrench icon blue.png.
    The Update VF Page dialog appears.
    Update VF page.png

  3. Update the fields as required and click Add.

To delete a section:

  1. In the Contract Suite Configure page, select the tab and navigate to the page/component that you want to delete.

  2. Click the delete icon delete blue icon.png.
    A confirmation window appears.

  3. Click Yes, delete it.

Cloning a Page Layout

You can clone a customized page layout to another Record Type.

To clone a page layout:

  1. In the Contract Suite Configure page, select a destination record type from the drop down and click Go.
    select record type.png

  2. The page layout of the destination record type appears.
    clone layout.pngThe Clone Layout dialog appears.
    clone layout dilog.png

  3. Select a record type from the Select From Recordtype dropdown and click Clone.
    The page layout clone appears.
    clone.png

  4. Click Save Clone.

Adding a Button

Refer to the Custom Buttons & Links article for detailed information on creating new buttons in Salesforce.

Managing Contract Closeout Task Template

Click Manage Contract Closeout Task Template to update contract task template. For detailed information, refer Update Contract Task Template.

Manage closeout template.png

Clearing Custom Settings

Click Clear Custom Settings to clear all customizations that you have made.

clear settings.png