Overview
TechnoMile Suite is built natively on the Salesforce platform, transforming the most advanced CRM into a GovCon ready platform. The suite consists of an array of apps, which provide efficiency and configurability to its users.
This document explains how to Customize Page Layout of a Record Type in the Growth Module of TechnoMile Suite.
Audience
Salesforce Administrators
IT Support
Prerequisites
Ensure that all custom fields such as formula fields, etc. have already been created using Object Manager.
Steps for Customizing Page Layout
In this document, Opportunity Record Type Page Layout has been customized using Customize Opp Layout page. Similarly, you can customize other Record Type Page Layouts as listed below:
Opportunity Record Type Page Layout using Customize Opp Layout page in Growth Module - TechnoMile Suite Sales Cloud Edition
Growth Opportunity Record Type Page Layout using Customize Growth Opp Layout page in Growth Module - TechnoMile Suite Platform Edition
Open Customize Page Layout
Step 1. Open App Launcher.
Step 2. Enter text ‘Customize Opp Layout’ in the search bar and click the Customize Opp Layout link in search results.
Step 3. In Customize Opp Layout page, select a Record Type such as ‘RFP’ and click Go.
NOTE
For demonstration purposes, configuration of only ONE Record Type has been shown in this document. Similarly, you can configure other Record Types as you may require.
The configurations done will be available only for the selected Record Type, in this case RFP.
Configure the At a Glance Section to Add a Custom Field
Refer to the Create Custom Fields article for information on creating new fields for any object in Salesforce.
Step 1. In RFP Record Type Page Layout, click the plus icon in the At a Glance section to add a Custom Field in this section.
Step 2. Enter all required (mandatory) field details such as: Field Label, Field API Name / Component Name, Column Span, choose Color of font, and click Add.
NOTE
The Column Span field determines the number of fields in a row such that:
If Column Span is 12 there will be 1 field per row
6 will be 2 fields per row
4 will be 3 fields per row
3 will be 4 fields per row
Note that it is recommended that you do NOT use a Column Span that is NOT a divisor of 12 (such as 5) or a number that is less than 3.
NOTE
As you start entering a value in the Field Label field, you will get an auto-prompt list of suggested values for this field.
Select an appropriate value from this list OR copy-paste Field Name from Fields & Relationships page of your selected Object in Object Manager.
Once Field Label field value is inserted, then the Field API Name/Component Name field value is auto-populated accordingly.
If you have multiple fields with the same Field Label, it is recommended that you manually enter the Field API Name.
You can also add Document Id, if you want to display an image with your Custom Field.
To add Document Id, perform the following steps:
Step 2.1. Click your User icon and select Switch to Salesforce Classic.
Step 2.2. In Salesforce Classic Home page, click the plus icon.
Step 2.3. In All Tabs page, scroll down and click Documents.
Step 2.4. Select a Folder that contains images and click Go!
Step 2.5. Click Name of image file that you want to add next to your Custom Field.
Step 2.6. Document Detail page opens, copy Id of image from the browser link.
Step 2.7. Click Switch to Lightning Experience.
Step 2.8. Paste ‘Id’ in the Document Id field of Step 2 in Customize Opp Layout page.
Custom Field with image is added.
NOTE
You can add a Custom Field with a unique name only once to each component, such as shown above for the At a Glance component. You can also add this Custom Field in the Detail component. However, you CANNOT add a Custom Field twice in the same component.
Step 3. Scroll up and click Quick Save.
IMPORTANT
Ensure that you click Quick Save after each customization is completed.
Edit & Delete a Custom Field
Step 4. To edit details of a field, click the wrench icon.
Step 5. Edit field details as required and click Update.
Custom Field details will be updated.
Step 6. To delete a field, click the cross icon.
Step 7. A confirmation window opens, click Yes, delete it!
Step 8. Another window opens, click OK.
Custom Field will be deleted from the page layout.
Rearrange Custom Fields
Step 1. Click the rearrange icon.
Step 2. Drag-and-drop a field to a desired position and click Rearrange.
Custom Field will be rearranged on the page layout.
Add a Tab
Step 1. Click Add Tab.
Step 2. Enter all required (mandatory) tab details such as: Label, choose Background Color, and click Add.
Background Color that you choose here will become the color of the tab.
Note that Conga Field API Name is a legacy deprecated component and is NO longer fully supported in newer versions of Salesforce.
NOTE
If you are unsure of what Background Color to use, the following colors are recommended:
Purple: #7861ed
Burgundy: #870500
Salesforce Brand Bright Blue: #1589ee
Salesforce Brand Dark Blue: #00396b
Error Red: #c23934
Success Dark Green: #027e46
Success Light Green: #4bca81
Burnt Orange: #844800
Pink: #ea8288
Tab is added.
IMPORTANT
You need to add a Section and a Section Field on your Tab in Page Layout, to make the tab visible on Opportunity record page.
Step 3. Optionally, you can also add Status Field API Name while creating a tab.
This field value should be that of a Formula field only.
The Formula used should be a text formula that results in one of the following values, ‘Green’, ‘Yellow’, or ‘Red’.
Based on formula results color, the system displays a status indicator icon of that color in the corner of the tab.
This feature is recommended for use as an indicator of the field values on a specific tab, returning correct color icon based on field values that have been entered.
For this, you must first create a Formula field in Object Manager that is based on a tab’s field values and enter its Status Field API Name in the Add Tab window as shown below.
Step 4. Go to an Opportunity record using App Launcher and click Status.
Note that currently the Status tab displays a red color icon in its corner.
Step 5. Edit any of its field values depending on the formula that you have defined in Object Manager and click Save.
Step 6. A confirmation message displays, click OK.
Note that the tab now displays a yellow colored icon.
Similarly, you can edit other field values on this tab to display a green color icon.
Edit & Delete a Tab
Step 7. Go back to the Status tab in Customize Opp Layout page, click the wrench icon, and then click Update in the following window.
Tab details will be updated.
Step 8. To delete a tab, click the cross icon.
Step 9. A confirmation window opens, click Yes, delete it!
Step 10. Another window opens, click OK.
Tab will be deleted from the page layout.
Rearrange Tabs
Step 1. Click Re-Arrange Tab.
Step 2. Drag-and-drop a tab to a desired position and click Rearrange.
Tab will be rearranged on the page layout.
Add a Section on a Tab
Step 1. Go to a tab and click Add Section.
Step 2. Enter Label and click Add.
Section is added.
Edit & Delete a Section
Step 3. To edit details of a section, click the wrench icon and then click Add in the following window.
Section details will be updated.
Step 4. To delete a section, click the cross icon.
Step 5. A confirmation window opens, click Yes, delete it!
Step 6. Another window opens, click OK.
Section will be deleted from the page layout.
Rearrange Sections
Step 1. Click Re-Arrange Section.
Step 2. Drag-and-drop a section to rearrange it and click Rearrange.
Section will be rearranged on the page layout.
Add a Field in a Section
Step 1. Click Add Field.
Step 2. Enter all required (mandatory) field details such as: Field Label, Field API Name, and click Add.
NOTE
As you start entering a value in the Field Label field, you will get an auto-prompt list of suggested values for this field.
Select an appropriate value from this list or copy-paste Field Label from Fields & Relationships page of your selected Object in Object Manager.
Once Field Label field value is inserted, then the Field API Name field value is auto-populated accordingly.
If you have multiple fields with the same Field Label, it is recommended that you manually enter the Field API Name.
Section Field is added.
Edit & Delete a Section Field
Step 3. Hover your cursor over a section field to view the field’s edit/delete icons.
Step 4. To edit details of a section field, click the wrench icon and then click Update in the following window.
Section Field details will be updated.
Step 5. To delete a section field, click the cross icon.
Step 6. A confirmation window opens, click Yes, delete it!
Step 7. Another window opens, click OK.
Section Field will be deleted from the page layout.
Rearrange Section Fields
Step 1. Click Re-Arrange Field.
Step 2. Drag-and-drop a field to rearrange it and click Rearrange.
Here, there can be two possible types of movement: upwards OR downwards.
Current field order is as shown below.
Step 3. Moving a field upwards, causes all other fields below it to move one place behind. However, note that any field above the drop position will remain constant.
Step 4. Moving a field downwards, causes all other fields above it to move one place ahead. However, note that any field below the drop position in this case, Last Modified Date will remain constant.
Move a Section to a New Tab
Step 1. Click Move Section.
Step 2. Select Destination Tab and click Move.
Section will be moved to another tab.
Add a Page/Component
Step 1. Click Add Page/Component.
Step 1.1. Enter Label.
Step 1.2. Enter Page/Component Name.
Step 1.3. Set Page/Component Width and Height such as ‘1100’ and ‘600’.
Step 1.4. Check the following options as per your requirements:
Is Component: If the component is a Lightning component.
Is Classic Available: If you want the component to be compatible with Salesforce Classic.
Is Lightning Available: If you want the component to be compatible with Salesforce Lightning.
Step 1.5. Click Add.
Page/Component is added.
Edit & Delete a Page/Component
Step 2. To edit details of a page/component, click the wrench icon and then click Update in the following window.
Page/Component will be updated.
Step 3. To delete a page/component, click the cross icon.
Step 4. A confirmation window opens, click Yes, delete it!
Step 5. Another window opens, click OK.
Page/Component will be deleted from the page layout.
Clone a Page Layout
After you have completed all page layout customizations for a selected Record Type, you can also clone the customized page layout to another Record Type as shown in the steps below.
Note that in these steps:
Destination Record Type is Commercial into which Page Layout will be cloned.
Source Record Type is RFP from which Page Layout will be cloned into Commercial.
Step 1. Select a destination Record Type such as ‘Commercial’ and click Go.
Step 2. Page Layout of destination Record Type opens, click Clone Layout.
Step 3. Select a source Record Type such as ‘RFP’ from which you want to clone the page layout and click Clone.
Step 4. Page Layout clone displays, click Save Clone.
Page Layout is cloned into destination Record Type: Commercial.
Add a Button
Refer to the Custom Buttons and Links article for information on creating new buttons in Salesforce.