Permission Required 

Users with Manage Customization permission can customize the record detail page.

Components in the Canvas Detail Page

1. Elements: It consists of the various components that are present inside a layout: Section, Tab, Table, Text, Image, Icon, and Line.
   
2. Data: It consists the list of components that will be displayed inside a layout: Fields, Related Lists, Links, Actions (Buttons like Edit, Submit, Next etc.), and Kiosks.
   
3. Style: Style lets you change the font, font size, background color, border, shadow, radius, padding, margin, and insert background image. These changes can be applied by selecting a desired element in the Canvas. The options vary based on the selected element. The style applied on the elements can be saved to the presets and reused in the future.
   
4. Reusable Components : Components like elements, style, and data can be saved from the previous templates as reusable components. These components, once saved, you can reuse them across different modules and the fields will be mapped by CRM, automatically.

Customizing the record detail page

1. Go to  Setup > Customization > Canvas > Detail View  
2. Click  +Create Record Detail page .
   
3. In  Create a Custom Record  page, select the  Module  and  Layout  from the drop-down list.
   
4. Click  Create .
      
5. Inside the  Canvas , click  Elements  from the left panel.
   Refer to Elements and components .
6. Drag and drop Sections ,  Tabs ,  Table ,  Texts, Images, Icons, and Lines  into the blank space.
   
7. Add  Styles  as required.
   Refer to Applying Style to the Elements .
8. From the top menu bar, you can do the following:
   
1. Undo or redo changes.
   
2. Preview the canvas before saving.
   
3. View the canvas in full screen.
   
4. Give name to the canvas.
   

  

Understanding the Components

1. Section:  A section is an empty space or block that will appear in the detail page.
   
1. You can either insert fields from the layout to a section or insert images of places, locations or use it as a banner to display some message etc.
   
2. Drag the borders to resize the section box.
   
3. Click the   icon to clone the section.
   
4. You can right click on the section and click insert to add fields, make the component fixed or fluid, copy the style, paste style or delete.
   
5. Add the style elements. (Read more about styles).
   
   
2. Tabs:  Tabs allow you to organize fields and related lists into different screens. This is a best way to provide easy navigation and a well organized display to the users. For example, in the image below, the tab named Related Info in placed in the products module which has three tabs: Notes, Attachments, and Cases all within a section. By clicking on the + icon you can add more fields or related lists as tabs.
     
   
1. In the left panel you can enter the tab name and click the + icon to add more tabs.
   
2. Hover on the tabs and click the close icon to delete a tab.
   
3. Hover on a tab, when you get the double sided arrow icon, drag and drop the tab to change position.
   
4. Right click inside the tab to change one related list to another, fix or fluid component, copy or paste related list style, lock, delete, etc. 
   

1. You can insert style elements like image, back ground color and more. (Read more about styles).
   
2. You can group together multiple tabs that come under the same theme. For instance, tabs such as Open Activities, Closed Activities, Invited Meetings, and Upcoming Actions can be combined under a sub tab called Activities. 
   
   
   
1. You can also perform actions such as single expand and multi expand on these actions. 
2. Multi expand allows you to open multiple sub tabs simultaneously, you can do so by selecting the Multi Expand action tool. In other words, the sub menus of one sub tab will not collapse when you click on another.
   
   
   
   
3. When you select the single expand option, only its associated sub menus will either expand or collapse. In an instance when you have expanded one sub tab and then click on another, the previous sub tab menus will collapse before the following one expands. 
   
   
   

1. Table:  Table can be used to display the records in a tabular format. For example, in the image below the product name, description, main storage are the fields present in the layout that are displayed as rows and columns. Tabular format lets you save space in the detail page. You can choose between the List and Static table templates or opt for the new customizable table template. 
   
   
1. Hover on rows and columns and click + or - icons to add or delete a row or column.
     
   
2. Right click on a row to change fields, fix or fluid component, copy or paste style or delete the field.
     
   
3. Drag the borders to resize the table.
   
4. Add colours to rows and columns. 
   
5. Add colours to text.
   
6. Add images to your table.
   
   
2. Text: Add a text box to enter content within the detail page, for example use it as a heading before starting a section or to add a note, disclaimer etc.
   
1. Drag the borders to resize the text box.
   
2. Right click to clone, fix or fluid component or delete the text box.
     
   
3. Images: The   Image element can be used to add image component in detail page. For example, you can add an image component and set it as a profile picture for the particular record.
   
1. You can select and drag the image element into the canvas and align it with the existing elements.
   
   
2. Click on the image element and you will the option to upload image.
   
   You can browse and upload images from your device or choose from the previously uploaded images saved in My Images tab, or add image from URL.
3. After adding the image, you can resize it, adjust other styles like border, shadow, radius, padding, etc.
   
4. Icons:  Use an icon to represent a field instead of conventional text label. For example in the image below the product name and price are displayed using icons instead of text.
     
   
1. Scroll on the icon bar to move up and down and choose from the wide range of icons.
   
2. Click on the icon to clone, delete or change.
   
3. Drag the borders to increase or decrease the size.
   
   

Fixed and Fluid Component

Applying Style to the Elements

Style options for a page

1. Background
   
2. Padding
   
3. Height
   
4. Width
   
5. Fit to screen
     
   

1. Select a background color from the palette or color picker. You can also mention the HEX code of the color.
   
2. Select the Image checkbox and click Upload Image. In the pop-up you can either upload image from the device, choose from previously uploaded images, or use URL to add image.
   
   
1. Image Size - The size can be defined using three options.
   
1. Contain - This option will adjust the size of an image to fit into a page, while keeping the aspect-ratio intact.
   
2. Original - This image will be retained in its original size.
   
3. Cover - This option will stretch the image to fill the length and width of the page regardless of the aspect-ratio.
   
2. Image Repeat - If the size of the background image is small such that it doesn't cover the entire page, you can use the image repeat option. This will let you repeat the image multiple times and fill the background completely. Following repeat types can be selected:
   
1. X - The image will repeat along the X axis.
   
2. Y - The image will repeat along the Y axis.
   
3. Both - The image will repeat along both the X and Y axis of the page.
   
4. No Repeat - This prevents the image from being repeated.
   
3. Select the Gradient checkbox to create a smooth transition between multiple colors in the background. If you choose multiple colors in a straight line, then the position can be adjusted to offer a perfect blend of all the colors.
   

1. Increase Padding: The padding can be increased by dragging the slider to the right. You can also specify the padding in Pixels.
   
2. Same padding for all sides: The Padding same for all sides checkbox applies the padding that you have configured on all four sides of the element. You can unselect tis checkbox and define different padding for all four sides of the element.
   

Style options for the sections

1. Background - The options are same as that available for the page.
   
2. Border
   
3. Shadow
   
4. Radius
   
5. Padding - The options are same as that available for the page.
   
6. Height and width - The options are same as that available for the page.
   
7. Depth
     
   

1. Adjust thickness: Drag the slider to increase the size of the border. You can also enter the border value in pixels.
   
2. Style: Select a border style from the drop-down list.
   
3. Color: Choose a color for the border from the color palette or enter HEX code for a color.
   
4. Same border for all sides: Check this option to apply the border settings to all the four sides of the section. You can clear this checkbox and define different width, style, and color for each side.
   

1. X - Based on the value, the shadow will move horizontally (left or right). A positive 'X' value will place the shadow on the right side of the element. A negative value will push the shadow to the left.
   
2. Y - Based on the value, the shadow will move vertically (top or bottom). A positive 'Y' value will place the shadow at the top and a negative 'Y' value will push it to the bottom.
   
3. Blur - Defines the sharpness of the shadow. If the blur is 0, the shadow will be sharp. Higher the value lesser will be the sharpness.
   
4. Spread - Adjust the size of the shadow, positive spread value will increase the shadow and negative spread value will decrease it.
   
5. Color - The border color can be chosen from the color picker.
   

1. Increase radius: Drag the slider to increase the radius or enter a value in the box. 
   
2. Same radius for all sides: Check the option to keep the radius size same for all four sides. You can uncheck the option and define different radius sizes for each side.
   

1. Increase Margin: The margin can be increased by dragging the slider to the right. You can also specify the margin in Pixels.
   
2. Same margin for all sides: The Margin same for all sides checkbox applies the margin that you have configured on all four sides of the element. You can unselect tis checkbox and define different margin for all four sides of the element.
   

Style options for a tab

1. States
   
2. Background
   
3. Border
   
4. Radius
   
5. Padding
   
6. Margin
   
7. Icons
   
   
   
   
   

1. Active - When the tab is selected.
   
2. Hover - When you hover over the tab name.
   
3. Normal - When the tab is not active or hovered.
   

Note

1. Related lists added to the tab element can't be renamed.
   
2. Click the + icon to add more tabs.
   
3. Right click inside the tab to insert more fields, fixed or fluid component or delete the tab. You can also click the close icon to delete a tab.
   
4. Hover over the three bars next to the tab name ( ), when you see the double-sided arrow drag and drop the tab to the desired position.
   

Style options for a table, text, icon, and line

1. Border
   
2. Shadow
   
3. Radius
   
4. Padding
   
5. Depth
   

Style options for the Field label

1. Change the font, font size, color, case, strikethrough or set the text alignment to left, centre or right.
   
2. Align the label to left, top, right, bottom.
   
3. Change the background color, radius, padding, and margin.
   
4. Right click on the label to change the field, hide label, move the label to the left or top, fixed or fluid component, copy the style and delete the field. 
   
   

Conditional styling using Canvas Rules

To create a canvas rule

1. Inside the Canvas Builder, choose an element.
   
2. Click the "+" icon.
   
   
   
   
3. Click Create Canvas Rule.
   
4. In the Canvas Rule pop-up that opens, specify the condition.
   
   
   
   
5. Click Save.
   
6. The canvas rule will be created and selected. Click Apply.
   
   
   
   
7. In the Style tab for that element, you'll have a new sub-tab with that rule's name. Whatever style you configure here will be applied to that element only when the canvas rule's condition is satisfied.
   
   
   
   

Adding style options into presets

Style options can be added to presets by selecting the element in the canvas and right clicking on it. 

1. Go to Setup > Customization > Canvas > Detail View.
   
2. Click the Canvas tab > Canvas Assignment.
   
3. In the Canvas Assignment  page, select the module and layout from the drop-down list.
   
4. Select the Canvas against the respective profile.
   
5. Click Save .
     
   

Note

Under Canvas Assignment in the list view hover over a canvas and click the More icon to edit, clone, rename, preview or delete a canvas design.