Customizing Record Detail Page with Canvas | Zoho CRM Help

Customizing Record Detail Page Using Canvas

The canvas list view provides ways to customize the record display in the module list. You can add record images, use custom buttons to represent fields, use specific font style or size for the field labels, change the alignment of field types and more. These customizations were limited only to the list view. 
The Canvas Detail page allows you customize the record detail page to your preference by letting you add background color to each field, arrange them in a different order, use custom buttons instead of field names, use different font styles and a lot more. This view is available in all the modules, including the custom modules.


Watch this video to learn about the purpose and benefit of Canvas in Zoho CRM.

Zoho CRM Certified Canvas Designers
We have a list of certified Canvas designers who can help you design and implement customized Canvas templates for your business. You can check out the list of designers here.
Availability
Permission Required 
Users with Manage Customization permission can customize the record detail page.

Components in the Canvas Detail Page

Similar to the module list view, you can customize the record detail page using Canvas. The detail page has the following components:
  1. Elements: It consists of the various components that are present inside a layout: Section, Tab, Table, Text, Icon, and Line.
  2. Data: It consists the list of components that will be displayed inside a layout: Fields, Related Lists, Links, and Actions (Buttons like Edit, Submit, Next etc.).
  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.

Customizing the record detail page

You can select any pre-designed template from the gallery and customize them according to your requirements, or create your own design template from scratch with the help of design tools.

To customize the record detail page
  1. Go to Setup > Customization > Canvas
  2. Click +Create Record Detail page.
  3. In Create a Custom Record page, select the Module and Layout from the drop-down list.
    You can create a maximum of 5 canvas view/layout.
  4. Click Create.
      
  5. Inside the Canvas, click Elements from the left panel.
    Refer to Elements and components.
  6. Drag and drop SectionsTabsTableText or Icons 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

Elements
Under elements you can find the below 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).
        
  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.
    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.
  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. 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

Every element (section, tab, text, table) has an option to set it either as a fixed or fluid component. By selecting fixed component you an restrict the size of an element from changing according to a user's screen. On the other hand, selecting fluid component will allow the element to resize itself according to users screen size.
For example, if you think the background image inserted for a section may spill outside a certain screen size then it is best to set it as a fluid component so that it adjusts the size depending on users screen.

Applying Style to the Elements

Style such as background color, padding, field label alignment, border, margin, etc. can be applied to all the elements. You can also customize the page background by using the style options. Some options are specific to an element.
Watch the videos in the playlist below to quickly learn how to apply styles.

 

Style options for a page

The page customization comprises of:
  1. Background
  2. Padding
  3. Height
  4. Width
  5. Fit to screen
      
Background  
  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 enter the Image URL to use an image as a background.
    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.
Padding
Padding determines the space around the content inside a margin/border. To modify padding, select the element and click the Padding checkbox.
  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.
Height and Width
Adjust the height and width of the page by entering the values in pixels or you can check the automatic option so that the screen adjusts accordingly.

Fit to Screen
The page will expand and adjust itself according to the length and width of the users screen.

Style options for the sections

The section can be customized using:
  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
      
Border 
Click the border checkbox and do the following:
  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.
Shadow
Click the shadow checkbox and do the following:
  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.
Radius
Give rounded corners by defining the radius. Click the Radius checkbox and do the following:
  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.
Margin
Define the position of the element in the details page. To add a margin padding, select the element and click the Padding checkbox. 
  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

The tab can be customized using: (background, border, radius, padding, and margin are same as mentioned above).
  1. States
  2. Background
  3. Border
  4. Radius
  5. Padding
  6. Margin
  7. Icons


States
Customize the tab to make it distinct at each state. For example, the background color, margins or background image can be different when the tab is in Active state, similarly when the tab is in Hover state the borders can be set in blue color for clear distinction. What does each state mean:
  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.
You can also change the font, font size, color, case, strikethrough or set the text alignment to left, centre or right for each of the above states.
Name the tab by clicking on the tab and entering the tab name in the text bar under Active state. 

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.
Icons
The tabs can be represented using the icons. Right click on the tab name and click Show Icon to view and select the icons. 

Once the icon is added, right click to Hide or change the icon and Hide the tab name.

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

For table, text, icon and line the common styling options are
  1. Border
  2. Shadow
  3. Radius
  4. Padding
  5. Depth
In addition to this you can perform the following customizations in text, icon, and line.
Text: You can also change the font, font size, color, case, strikethrough or set the text alignment to left, centre or right.
Icon: The icon color, background color, background image, border, shadow, radius, padding, and depth can be customized.

Line: You can set the line to horizontal or vertical, adjust thickness, style, and color.

Style options for the Field label

The field label can be customized using style options as well as by choosing options from within the tab.
  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. 

Setting canvas detail page as default

You can set permission under Canvas Assignment for profiles who should view the canvas detail page as default. Users from the selected profiles will always view the canvas detail page only. 

To make canvas detail page default 
  1. Go to Setup > Customization > Canvas.
  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. 
Reach out to Zoho CRM Certified Canvas Designers to get customized templates for your business.


    Zoho DataPrep Personalized Demo

    If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

    Zoho CRM Training

      Create, share, and deliver

      beautiful slides from anywhere.

      Get Started Now





              Zoho CRM Training Programs

              Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

              Zoho CRM Training

                Zoho SalesIQ Resources



                    Zoho TeamInbox Resources




                              Zoho DataPrep Resources

                                Zoho DataPrep Demo

                                Get a personalized demo or POC

                                REGISTER NOW


                                  Design. Discuss. Deliver.

                                  Create visually engaging stories with Zoho Show.

                                  Get Started Now











                                                        • Related Articles

                                                        • Customizing List View Using Canvas

                                                          In Zoho CRM, you can create and swap the record views between List View and Kanban View as and when required. But, these views may not be enough when you want to add a record image or arrange the fields in a different order or insert a background ...
                                                        • Customizing Record's Detail Page

                                                          Page-level customization refers to customizing a record's details page and the layouts related to it. This includes organizing related items on a page, customizing related lists, search layout and the list views. Organize Page Details The option to ...
                                                        • Troubleshooting Module Customization

                                                          Troubleshooting Modules and Fields 1. Why does the editor go from top to bottom instead of left to right when I click the Tab key while creating or editing a record? The order depends on the Tab Order Preference set by the Admin for each particular ...
                                                        • Creating Kanban Views

                                                          Kanban view is a card-based view that displays the data in an organized manner for better comprehension. For example, you can segregate the leads based on their status or categorize the sales depending on different stages. This sort of information ...
                                                        • Module Views - An Overview

                                                          Module views give you ways to sort, categorize, and view your records. they help you prioritize your tasks by viewing only those records that you need the most. In Zoho CRM, you can choose to view the records in three different ways: List view, ...

                                                        Resources

                                                        Videos

                                                        Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                        eBooks

                                                        Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                        Webinars

                                                        Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                        CRM Tips

                                                        Make the most of Zoho CRM with these useful tips.



                                                          Zoho Show Resources