Understand Canvas layout designer | Zoho Creator Help

Understand Canvas layout designer

1. What Does This Page Cover?

Learn about how you can use Canvas layout builder in Creator to design the detailed view layout of your records, corresponding to your business requirements.

2. Availability

  1. This help page is for users in Creator 5 and 6. Know your Creator version.
  2. Canvas can be accessed in the free and paid plans of Creator and is available across all the data centers.
  3. Only the super admin, admins, and developers can design custom layouts using Canvas, while other users can access and view them with relevant permissions.
  4. Canvas is supported only for web browsers i.e., you can design and view custom layouts for record detail view in web browsers.

3. Overview

A layout refers to the structural arrangement of visual elements, such as text, images, and other components, within a design composition. Your organization may have a design protocol that doesn't align with the default designs/templates of the software you use. A layout builder will enable you to create customized layouts, in which you can determine how and where the required elements must be positioned and organized on a page, This in turn enables you to create an aesthetically pleasing, well-organized, and user-friendly interface for your users.

3.1 Canvas in Creator

In Creator, a layout is the structure that you assign to a report to make it visually organized and easy to read. There are a few predefined layouts available for the detail view of a report, that equip you with a certain level of ability to customize the way your records are organized. Although this conventional way of displaying record data in a tabular structure is functional to an extent, finding the information you need right away could be time-consuming in cases of huge volumes of data. You might also have business requirements that are not be fully met using the existing layouts.

Canvas enables you to customize every visual aspect of your records' detail view. It provides you with the capability to present data insights in your reports, exactly the way you envision it in your head. You can select any predesigned templates from the template gallery and customize them according to your requirements, or create your own custom layout from scratch with the help of our layout builder. You can easily drag and drop the fields you require onto each record, place them in different sections, change their designs and sizes, and create a unique detail view layout that suits your organizational needs the best. 

When you choose a pre-designed template from the templates gallery, it'll be populated with your actual application data and the highlighted texts such as phone numbers and email addresses will be displayed in your application theme's color.
Canvas also allows you to apply conditional formatting to either all or selected records. This enables you to highlight certain texts in reports, based on the defined criteria. When these criteria are met, the selected text gets displayed in the record according to its customized format and helps draw attention to certain reports or make the data stand out from the rest of the records. 

You can also drag and drop record comments, blueprint stages, and custom actions onto the Canvas layout builder and customize their colors as well as other properties. The auto-align feature inside the Canvas layout builder allows for easy customization, and the copy style feature helps us easily adapt a style to other elements on the canvas. Thus, the Canvas experience for every record's detail view is dynamic and highly contextual. 
  1. You can switch back to your pre-defined layout any time by selecting it in the layout section under Report customization - web
  2. The custom layout that you created will still be listed along with the default detail view layouts. 
  3. The custom layout builder will not be available under the Report customization tabs for mobile and tablet devices. You can still design custom layouts for record detail view in web browsers.

3.2 Benefits of using Canvas layout builder

  1. Customize and reorganize the data in your records the way you want and offer better visibility to your users
  2. Turn your professional detail view layouts into artistically attractive and visually-appealing layouts
  3. Add only relevant data components and elements. This way, you can ensure that your users can view the required information at a glance.
  4. Choose from a multitude of icons for efficient visual representation and completely re-design your detail view layout
  5. Reuse styles applied to components in the Data and Elements module. Learn how
  6. Dynamically resize your custom layout to fill your users' entire screen. Learn how
  7. Export your customized layout in JSON format and import the same across applications in your account
If you have not added certain fields to your custom layout, it simply means that you have chosen not to display those fields in your records' detail view. Users who have permissions to view your records cannot view such fields as you haven't added them. However, these fields can be accessed while editing the record, and can also be assigned values by users with the required permissions
Info: Make sure you prepare a list of all the fields you need on your records' detail view in advance, so that you do not leave out any relevant fields while designing your custom layout. 

4. Modules in Canvas

The following can be customized for the records' detail view UI using the Canvas layout builder.
  1. Data
  2. Elements
  3. Style

Below are some of the common actions that can be performed in almost all the above modules.
  1. Use the search bar at the top-left of the Data module to search for relevant record data.
  2. Click the undo and redo icons at the top to undo and redo the changes respectively.
  3. Click the download icon to export your layout in .json format.
  4. Click the full screen icon at the top so that the layout builder fills your entire screen.
  5. Provide a name for your layout in the space provided at the top.
  6. Click the Save button to save the changes made in your layout, since changes will not be saved automatically.

4.1 Data

This module enables you to visualize and reorganize the data in your records. You can perform the following actions. Click here to know more.
Note: You can expand and collapse the various sections in the Data module by clicking the "+" and "-" icons respectively.
  1. Fields: Drag and drop the fields (both form fields and system fields) onto the layout builder.
  2. Custom actions: Drag and drop the required custom action tile, if you've already configured them in your reports. Otherwise, you can click Add New Action and configure them.
  3. Custom Functionalities
    1. Comments: Drag and drop the record comments tile onto the builder. Canvas builder also allows you to set column width simply by dragging and dropping the resize icon when you hover over column borders.
    2. Blueprints: Drag and drop the blueprints tile onto the builder. The current stage will be displayed.
  4. Related Blocks:
    1. From Related Blocks: Existing subforms and lookup fields that look up data can be dragged and dropped onto the builder.
    2. To Related Blocks: Lookup fields in the current (chosen) form from which data is looked up in other forms will be listed here.

4.2 Elements

Refer this section to know how to add elements to your custom layout.
This module comprises of various elements for the representation of data pertaining to a specific record. These include:
  1. Section: The section element enables you to create standalone sections and group related content such as fields, record comments, and blueprints.
  2. Tab: Enables you to reorganize your data into distinct, switchable tabs. This helps to provide a well-organized display to the users. For example, in the image below, the tab named Product Management is placed in the Workitem module, which has three tabs: Design, Development, and Testing, all within a section. 
  3. Table: Can be used to display your record values in a tabular format. This format lets you save space in the detail view by displaying the data in a table structure, comprised of rows and columns. For example, in the image below, the product name, description, and product ID are the form fields present that are displayed as rows and columns. 
  4. Text: You can insert a text box element to enter the required content within the detail view. For example, you can use the text element to display a heading before starting sections or to add a note or disclaimer.
  5. Icon: You can use the icon element to represent a field instead of a conventional text label inside sections, tabs, tables, and so on. For example, in the image below, the product name and price are displayed using icons instead of text.
  6. Line: The line element can be used to insert a horizontal line to separate content or define a change in content. In other words, it is used to represent a thematic break between content. For example, you can insert a line element between two sections in your layout. 

4.2.1 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 the fixed component option, you can restrict the size of an element from changing according to a user's screen. On the other hand, selecting a 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 upon users' screen.

4.3 Style

Refer this section to know how to add elements to your custom layout.
The options in this section let you change the font, font size, background color, border, shadow, radius, padding, and margin, and insert a background image. These options can be applied by selecting a desired element in the layout builder. 
The style options vary based on the selected element

5. See How It Works

6. Use Cases

  1. Employee Management: Let's say you have created an Employee Management application using Creator. You need the detail view of your employee records to show the basic and contact details along with the dependents' and claim details. You also wish to highlight each employee's emergency contact details. This is where Canvas comes into the picture. You can use our custom layout builder to achieve the above and much more. This way, the moment you land on a record and catch a glimpse of a customized highlighted part, you know whom to contact in case of emergencies, without even having to take a closer look. 
  1. Education Management: Let's say you have created an Education Management application using Creator. You need the detail view of your students' and staff records to display a comprehensive view of their profile and courses details. You can use our Canvas layout builder to design the detail view of your records and bring your ideas to life.
  2. Real-estate management: Let's say you have created an Real Estate Management application using Creator. You wish to display your rental properties' details vividly that also helps users narrow down their dream homes. You also need to ensure that potential buyers who come looking for rental details must not be overwhelmed with all the information.  Canvas helps you design neat and appealing layouts that offer details about your rental properties at a glance. 
In addition to these use cases, you might come across or have other requirements. Using Canvas, you can dictate the styling and visibility of various data components and elements in the layout builder that cater to a  wide range of contexts and scenarios to arrive at a highly rich, meaningful, and dynamic user experience.

7. Navigation Guide for accessing Canvas

In the Edit mode of the application:
  1. Navigate to the Design tab of the required report that you want to customize the detail view for. 
  2. Select the Detail View tab and click Create New Layout beneath the Custom Layout card. The Canvas builder will appear.

8. Things to know

  1. You cannot create an application sandbox if there are canvas layouts in the same application. Learn more about creating a sandbox.
  2. You can set a custom layout as the default detail view for the records in your application. Learn how
  3. You can export the custom layouts in .json format. Learn how
  4. You can use arrow keys to move all the elements inside the custom layout builder.
  5. You can configure alignment for the field values by selecting them inside the Canvas builder and using the alignment options available on the left panel under the Style tab.

9. Limitations

  1. Canvas layout builder is not applicable to the spreadsheet report type.
  2. Currently, when you create a custom layout using Canvas, changes will not be auto-saved. You need to click Save after making the required changes.

Related Topics

  1. Understand detail view layouts
  2. Create custom layout using Canvas
  3. Manage custom layout

    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
      Redefine the way you work
      with Zoho Workplace

        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 Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION

                                    You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.

                                        Manage your brands on social media

                                          Zoho Desk Resources

                                          • Desk Community Learning Series

                                          • Digest

                                          • Functions

                                          • Meetups

                                          • Kbase

                                          • Resources

                                          • Glossary

                                          • Desk Marketplace

                                          • MVP Corner

                                          • Word of the Day

                                            Zoho Marketing Automation

                                              Zoho Sheet Resources


                                                  Zoho Forms Resources

                                                    Secure your business
                                                    communication with Zoho Mail

                                                    Mail on the move with
                                                    Zoho Mail mobile application

                                                      Stay on top of your schedule
                                                      at all times

                                                      Carry your calendar with you
                                                      Anytime, anywhere

                                                            Zoho Sign Resources

                                                              Sign, Paperless!

                                                              Sign and send business documents on the go!

                                                              Get Started Now

                                                                      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

                                                                                                      • Understand layout designer for quick view of list report

                                                                                                        Layout designer enables you to customize the quick view of your list report. There are a few predefined layouts that are available for quick view. If you have a requirement that is not fully met with using these predefined layouts, you can opt for ...
                                                                                                      • Manage custom layout

                                                                                                        1. What Does This Page Cover? Learn how to name, rename, edit, and perform other customizations on the custom layouts you have designed for the detailed view of your records using the Canvas layout builder. Before moving ahead, you can learn more ...
                                                                                                      • Create Custom Layout

                                                                                                        1. What Does This Page Cover? Learn to design a custom layout corresponding to your business requirements for the detailed view of your records using the Canvas layout builder. Before moving ahead, you can learn more about canvas layout builder and ...
                                                                                                      • Create Custom Layout

                                                                                                        This page is relevant to list type report only. To create a custom layout for quick view: Navigate to the Design page of report. Select Quick View tab. Click Custom Layout. The Build your Layout window will appear. Click From Scratch. Select Text ...
                                                                                                      • Understand Portal Pages

                                                                                                        This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. What Does This Page Cover? Learn about the Sign Up, Sign In, and Reset Password pages of your portal. They act as the input ...
                                                                                                        Wherever you are is as good as
                                                                                                        your workplace



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


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


                                                                                                          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