Customizing Module View Using the all-new Canvas design suite

Customizing Module View Using the all-new Canvas design suite

Businesses and data are cohesive entities that exist and grow together. The more people you meet and transactions you make, the more information you're going to accumulate in your database—so it's important to keep your growing database clean and accessible.

Zoho CRM offers three types of module views so you can organize data based on your requirements: list view, Kanban view, and canvas view. Read this article to learn more about module views.

  1. The list view is a systematic tabulation of your data sorted based on specific criteria. It displays records as line items and enables you to manage, freeze, and navigate across columns in a module. Click here to learn more about list view.
  2. The Kanban view is a productivity-based view that enables you to classify your records based on different fields, like lead source, status, industry, and so on. It's especially beneficial if you want to monitor progress or index records based on a particular attribute. Click here to learn more about the Kanban view.
  3. The Canvas view is a dynamic orientation of your records created using our bespoke Canvas builder. You can incorporate different graphic and design elements to your records in module view to suit your brand guidelines and ad hoc accessibility. It offers customization in three layouts—custom list view, tile view, and table view—to sculpt your view according to your data type.

 In this article:


Types of Canvas views

Canvas offers three types of module view orientations to accommodate data of different types.

Custom list view

The custom list view enables you to stack records horizontally, one above the other. The space each row provides can comfortably and prominently display your business logo, lead images, lead information, buttons, and more. This view is clutter-free and suitable for storing information about your customers and CRM users in tandem.

Tile view

As its name suggests, the tile view displays records as tiles. With its finite span, modules like accounts, products, or contacts that require a showcase of records become befitting. These tiles are closely knit, that looks like a product line up, by itself. You can adjust the shape of the tile to be a square or a rectangle.

Table view

Like the list view, the table view is a tabulation of records, except it provides users with the ability to add colors to the rows. You can add one color to all rows or alternate between rows.

Business scenarios

Schools and real estate firms: One important asset that educational institutions have is their student databases. These institutions need to be able to see the information of all students listed systematically, and one viable option is to use the tile view, which enables users to view records in a way that makes them easy to distinguish and access.
The same view is also useful for showcasing real estate properties, whereby customers can view a neatly organized array of properties, each with an image and other important details. Click here to learn more about portals in Zoho CRM.

Lead information: One of the main activities one does in a CRM system is lead management. It's important to understand your leads' requirements, personas, and so on. Using the custom list view, you can orient your leads in such a way that you get useful information about your leads at a glance. With the custom list view, you can add the lead's image, as well as basic information like their name, email address, mobile number, lead source, tags, scores, lead status, activities, visit score, record owner, and so on—all in a view that minimizes clutter.


Inventory management: Businesses can only run smoothly if they manage their inventories effectively. Inventory management means continually assessing demand and managing stock so that you never run out of a hot-selling product. But that means inventory managers need to know what they have in stock and how much—with a high degree of accuracy. Thanks to its spreadsheet-like structure, the table Canvas view is a perfect fit for this kind of data, as it fits the screen and can display large quantities of data.

Availability

Permission required
Administrators and users with Manage Custom View permission can create/edit a Canvas.


Canvas module view builder: a quick look

Canvas is Zoho CRM's cutting-edge design studio that enables you to create and present your data in a more organized way. It's loaded with sophisticated design elements that are simple to view and straightforward to use.
While you can customize both the record details page and module views using the Canvas builder, this article is about customizing module views using Canvas.
The list view builder is made up of the following building blocks:
  1. Data: Contains CRM fields, related lists, buttons, and actions available in the selected module. With a simple drag and drop, you can place fields in wherever you want on the canvas.
  2. Elements: Includes sections, text boxes, tabs, tables, images, icons, lines, and buttons with which you can compartmentalize your data in your canvas.
  3. Style: Adds aesthetic value to your data and elements. Set background colors and borders, tweak radiuses, add shadows, and adjust padding and margins. You also have the option to customize the font type and color for both static and on-hover text.

How to work with Canvas

As discussed before, the canvas builder is a straightforward design tool with the following components: data, elements, and style. You can create templates from scratch or build upon pre-designed templates from our gallery. Upon opening a canvas, you can add components to a template via a simple drag-and-drop interface, and apply styles by selecting the placeholder data in the canvas.

Let's look at how you can create a canvas template:

Create canvas templates as an admin

  1. Log into your CRM organization with your administrator credentials.
  2. Go to Setup ⚙ > Customization > Canvas > List View.
  3. Select the Create New List Page button on the right.

  4. In the Create your own customized list page pop-up, select a module and the type of canvas view you'd like to create.
    Take a quick peek at the view by clicking the preview link.
  5. Click Create.
  6. On the Select Template page, you can either select a pre-defined design from the gallery or create a blank template.
    1. For pre-defined templates, you can choose the desired design from the list, preview it, and click Select.

    2. To create a new canvas from scratch, click Create Blank Template button.
    3. Additionally, if your organization has saved templates already, you can select them from My Organization Canvas and repurpose them.
  7. Upon entering the canvas page, do the following:
    1. Enter a name for your canvas creation. Example: Lead list - custom list view.
    2. Based on the canvas type, a white/blank canvas will appear. You can add colors, gradients, or an image as your background, per your desire.
      1. Go to the Style option in the Edit console.
      2. Under Normal, select a background color from the palette. You can also choose from advanced colors in the palette.
        This will become the background of the canvas. Especially for custom list views and tile views, the chosen background will be applied for all records in the module view.
      3. To set an image as the background:
        1. Select the Image check box and upload a new image from your desktop, choose from the library, or add an image URL.

        2. The image you selected as the background will be added to the canvas in the contain style. You can also keep it at its original size, or cover the entire canvas background.

        3. You can also choose the direction in which the image repeats on the canvas, if at all: horizontally, vertically, or both.

      4. To apply a gradient, select the Gradient checkbox.
        1. Select the gradient direction by rotating the gradient roller.
        2. Click on the gradient nodes present on the either side of the gradient bar to select the desired color for your gradient.
        3. Drag the nodes left and right to adjust the strength of the gradient.

      5. Select the Padding and enter values to adjust the cushion space.


      6. Also, you can adjust the scale of the canvas by setting its height and width.

      7. Similar settings can be configured for the canvas background when on mouse hover.

    3. To compartmentalize your canvas space using elements:
      1. Click Elements from the edit console.
      2. Drag and drop the desired elements like sections, text boxes, images, icons, and lines from the tray into the canvas.
      3. Furthermore, you can select and apply styling over an element to customize it as desired.

    4. To add data to your canvas:
      1. Click Data from the edit console.
      2. Drag and drop the desired fields and actions present in that module where you want them on the canvas.
      3. You can also apply styling elements like font type, size, color, orientation, type case, prominence, label alignment, text background, and more to each piece of data by clicking on it.
  8. Upon completion, click Save to save the template.
    Using the methods above, you can create canvas creations for other views, as well.
Note: A module can have only one template created for each canvas view.

Managing canvas templates as an admin

All the templates created for an organization will be displayed as line items on the canvas page. The page's list view tab contains module views, and the details page contains templates created for record detail pages.

In the list view tab, an admin can perform the following actions:
  1. Create new list view page templates

  2. Sort templates based on modules and views

  3. Manage canvas rules
  4. Clone, preview, edit, or delete templates
  5. Activate or deactivate templates

Switch between different module views

Users can choose from the following module views according to their preferences: list view, Kanban view, and canvas view.

To switch between module views:
  1. Go to the desired module and click on the module views icon at the top-right corner of the page.
  2. From the dropdown menu, select a desired view for your records. The options are list view, Kanban view, canvas custom list view, tile view, and table view.

Quick hacks to work with Canvas easily

By now, you've probably realized how simple it is to work with Canvas. However, you can still make it easier via the following pointers:
Create templates quickly: If you haven't created a particular view for a module yet, you can create one directly from the module itself. To do so, follow these steps:
  1. Click the module view button at the top-right corner of the page.
  2. Select the desired canvas view for which you haven't yet created a view.
  3. On the following page, click Create view. This will directly take you to the Canvas builder.
  4. Add data quickly: Instead of searching and dragging desired fields from the data component, you can simply right click on the template, go to insert, and then click field or action.

  5. Create conditional styling: You can determine the criteria and change the styling of a particular component, such as a font size change, color change, and so on.

  6. Mark a component fixed/fluid: If you mark a component to be fluid, the component will render the entire span of the text in the output. If you mark it fixed, irrespective of the character count, the text will be constricted to the defined length, sometimes clipping the tail end of the text.
  7. Copy/paste style: Instead of formatting a particular style repeatedly, you can copy the style and apply it to the component(s) you want to format. Right-click on the style you want to copy and click copy style. Then select the component you want to replicate the styling for, right-click on the component, and click paste style.
  8. Lock a component: Locking a component will make it easier to edit the template by keeping the component in place while you make adjustments.
  9. Hide/show label: A label is a field's name. You can choose to display a field's name or just its values while. This is a great way to maximize space in your template.
  10. Format label alignment: You can choose the text alignment for text boxes, namely left, center, or right.

More assets on Canvas in Zoho CRM:
LMS course: Canvas in Zoho CRM

Browse through a list of certified canvas designers available in your country here.

    • Related Articles

    • 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 ...
    • Customizing mobile record detail page using Canvas

      Sales reps often use the CRM app on their smartphones and tablets to refer data, add notes, and so on. The mobile record detail page provides users with a comprehensive overview of information related to an entity. For example, sales reps can consult ...
    • Using Zoho Sheet View

      You can tap into the power of spreadsheets within your CRM account using Zoho Sheet View. In this view, you'll be able to access your module's data in the spreadsheet format.This mode of working is particularly convenient when you need to make ...
    • FAQs on Canvas

      1. What is Zoho CRM Canvas and why do I need it? Zoho CRM is a powerful system that houses all of your key business data including customer information, employee details, business contracts, sales activities and so on. It helps you streamline ...
    • Canvas Record Form

      Overview Canvas Record Form enriches Zoho CRM by introducing an advanced level of customization for record creation. This integral part of the Canvas design suite enables users to design forms that are not only functionally comprehensive but also ...