Customizing mobile record detail page using Canvas

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 the record detail page of a contact before tailoring a sales pitch that appeals to that contact.

You can customize critical and highly-used record detail pages using Canvas. This allows you to structure, modify, and beautify the record detail page, so that mobile users have a pleasant and efficient interface to work with.


Note
  1. Mobile canvas pages can be accessed via the mobile app, but they cannot be designed using the mobile app. They need to be designed using the dedicated mobile canvas builder available in the web app.
  2. Canvas mobile pages are available on Android (mobile) and iOS (mobile). They cannot be accessed on Android tablets and iPads.
  3. The canvas mobile page's design which you create will work on both Android and iOS. You do not have to design independently for both the platforms
  4. The canvas pages built for the web app are not mobile-compatible.
Availability
Permission Required  
Users with Module Customization permission can customize the mobile record detail page.


To manage mobile Canvas views

  1. Navigate to Setup > Customization > Canvas
  2. Click the Detail View tab and select Mobile.

The following details and features are available in the Mobile tab:

  1. Create Mobile Record Detail Page: Use this button to start designing a mobile record detail page.
  2. Mobile Canvas Assignment: Use this button to set a specific mobile record detail page as default for different profiles.
  3. More (...): Click this button to access other actions like Manage Canvas Rules and Manage canvas keys. Canvas rules allow you to set dynamic styling based on record data. A canvas key is an alphanumeric code that can be used to export a canvas template.
  4. Filter: Use this filter to view mobile record detail pages for a specific module.
  5. Canvas table: View all the canvas pages in this table with additional details like Module Name, Layout, Created by, Modified by, and Status. You can also hover over each canvas page and perform actions like Edit, Clone, Rename, Preview, Export Canvas, and Delete.

To create a mobile record detail page

  1. Navigate to Setup > Customization > Canvas.
  2. Click the Detail View tab and select Mobile.
  3. Click Create Mobile Record Detail Page.
  4. In the Create a mobile custom record popup, select the Module and Layout from the drop-down list.
  5. Click Create.
  6. In the Select Template popup, you can either:
    1. Pick a Template.  You can select one from the All tab or My Organization Canvas tab. The latter will contain all mobile canvas pages created for all modules. Pick one and click Select or
    2. Click Create Blank Template to create your design from scratch.

  7. In the Canvas builder, you can drag and drop Data, Elements, and Reusable components. You can arrange and style these different components as per your requirements. To learn more about this, see the Navigating the Canvas Builder section in this document.
  8. Once you are done, give your canvas a Name and click Save.

  9. Optionally, click Canvas Assignment and select this canvas as default for specific profiles. Click Save.

Note
  1. Alerts: In case a component is available on the Android platform and not on the iOS platform or vice versa, you will get a notification in the Alerts section.
    Clicking the notification will take you to the component that is unavailable on one of the platforms.
  2. Preview: This lets you preview the mobile canvas page. You can select the Android or iOS tab to check how the page will be rendered on both platforms. If some data (fields, related lists, or actions) is not supported on iOS or Android, it will be removed, and the spacing will be adjusted automatically in the respective app. This can be checked in the preview popup.

To clone a mobile record detail page

  1. Navigate to Setup > Customization > Canvas.
  2. Click the Detail View tab and select Mobile.
  3. Hover over a mobile record detail page, click (...) icon and select Clone.
  4. Select the Module and Layout.
  5. Click Clone.
  6. Once you are done with changes, give the cloned page a name and click Save.

To edit a mobile record detail page

  1. Navigate to Setup > Customization > Canvas.
  2. Click the Detail View tab and select Mobile.
  3. Hover over a mobile record detail page, click (...) icon and select Edit.

To delete a mobile canvas view

  1. Navigate to Setup > Customization > Canvas.
  2. Click the Detail View tab and select Mobile.
  3. Hover over a mobile record detail page, click (...) icon and select Delete.
  4. In the Are you sure you want to delete this view? popup, click Yes, delete.
Note: Before deleting a canvas view that is currently set as default for a profile, you must first choose another view as default for that profile.

To set a mobile canvas detail page as default

  1. Navigate to Setup > Customization > Canvas.
  2. Click the Mobile tab.
  3. Click Mobile Canvas Assignment.
  4. In the Mobile Canvas Assignment page, select the Module and Layout from the drop-down list.
  5. Select the canvas against the respective profile.
  6. Click Save.

Navigating the Canvas builder

You will design your mobile record page on the Canvas builder. Let's take a quick tour of this no-code, drag-and-drop interface and look at the different options available here.

The canvas builder interface comprises three parts:
  1. The canvas: This is where you arrange the different components of your mobile record detail page.
  2. Left sidebar: This contains the different components, template-related actions, and resources available to help you build our canvas page. These are the tools you can use to build your canvas page.
  3. Top menu bar: This contains options like Undo, Redo, Zoom, Alerts, Preview, View Canvas in full screen, Enter Canvas Name, and Save.

Components

The different components in the left sidebar of the Canvas builder are:

  1. Data: This contains the various data-related entities like Fields, Related Lists, and Actions (like Edit, Clone, Delete etc.) and Custom Buttons that are available in that particular layout.
  2. Elements: This includes the various visual entities that are present inside a layout like Section, Tab, Table, Text, Image, Icon, and Line.
  3. Style: This lets you set the different style-related properties for a component(a data entity, an element, mobile header, mobile body, or mobile footer). The properties vary based on the selected component.
  4. Reusable Components: A set of components including elements, style, and data can be saved as a single reusable component. This can be reused in other layouts and modules.
Let's understand these components in more detail.

Data

This is specific to the layout being selected. Depending on the layout, you will get a list of:
  1. Fields: These will include those fields that are supported in the mobile app (Android or iOS). These fields will be grouped as per the sections in the layout.
  2. Related List: Mobile-supported related lists associated with the module are listed here.
  3. Actions: These are the different mobile-specific buttons(like Edit, Clone, Delete etc.) available in your layout.
  4. Buttons: These include custom buttons either created by you or available as part of an integration.

Elements

Elements are the same for all layouts. They provide the building blocks that you can select, arrange, and style to design the mobile record detail page.
They include:
  1. Section: A section is a block that will appear on the mobile detail page. With a section, you can:

    1. Add data components, and other elements to it
    2. Style the section
    3. Drag the borders to resize the section box.
    4. Right-click on the section and perform an action like Insert a data component, make the component fixed or fluid, Copy or Paste style, Add conditional styling (Canvas Rule), Lock, Add to Reusable Components, Add to Presets, or Delete
  2. Tabs: Tabs allow you to organize fields and related lists into different screens. Only the screen for the selected tab is visible while the rest remain hidden. This allows you to pack a high volume of data in a small space while also making it easy for users to access that data. With a tab, you can:

    1. Style it to match your preferences using the left panel
    2. Click the + icon to create a custom tab or add related lists as tabs
    3. Hover over the left edge of a tab, click the double-sided arrow icon, and drag the tab to rearrange it
    4. Hover over a tab and click x to delete a tab
    5. Rename a custom tab by clicking on it and using the style panel on the left
    6. Right-click on the tab to Show icon. If an icon is already added, you'll have the option to Hide/Change icon, Hide text, Icon Top, and Icon Left
    7. Right-click inside the tab to perform actions like Insert Field, make the component fixed or fluid, Copy/Paste Style, Conditional Styling, Lock, Add to Reusable Components, Add to Presets, and Delete. The options available will depend on where you click inside the tab
    8. Related lists added to the tab element can't be renamed.
  3. Table: Tables allow you to display information in rows and columns. This provides a familiar interface for most users and helps save space on the page. With a table, you can:
    1. Hover over a row and click the + icon to add a row. By default, there will be two columns. You cannot add additional columns to the table. Hover over the table and click the - icon to delete the table.
    2. Right-click to Insert/Change Field, Make the component Fixed or Fluid, Copy/ Paste style, Conditional Styling, Lock, Add to Reusable Components, Add to Presets, or Delete
    3. Drag the borders to resize the table
  4. Text: This allows you to add a text box within the detail page. For example, it can be used to create headings, instructions, warnings, and so on. With a text component, you can:
    1. Drag the borders to resize the text box
    2. Right-click to Clone, Make component Fixed/Fluid, Add to Presets, and Delete
  5. Images: The Image element can be used to add an image to a mobile record detail page. With an image element, you can:
    1. Click on the image element and click Upload Image in the left panel to add the image. You can add an image using its URL.
    2. After adding the image, you can resize it, adjust other styles like border, shadow, radius, padding, etc.
    3. Right-click on the image to set Radius, and Delete.
  6. Icons: Icons can be used in multiple places as a easy visual cue. For example, they can be used instead of field labels in many places. With an icon, you can:
    1. Choose from the wide range of icons to indicate different entities
    2. Right-click on the icon to Clone, Change Icon, and Delete
  7. Line: Lines can be used wherever you want to separate and organize content, align elements, and so on.
Note
  1. Every component on the record detail page can be set as fixed or fluid.
  2. A fixed component's size will remain unchanged no matter what the size of the user's screen is.
  3. A fluid component's size will change depending on the user's screen size.

Style

Some style options are common to all elements. These include background color, padding, field label alignment, border, margin, and so on. Other options are specific to an element.
Style options can be added to presets and reused for other components.
Some of these options include:
  1. Background: Select a background color by entering the HEX code, picking from the palette or from the color picker.

  2. Image: Check the Image checkbox and do the following:
    1. Add an Image: Click Upload Image.
    2. Enter the image's URL and click Insert.
    3. Set the image size: You can select Contain (Adjust to fit the component's size while retaining aspect ratio), Original (original size of image), or Cover (Stretch to fully fill the component without considering aspect ratio).
    4. Set image repeat: If the image is small and does not fill the component, you can choose to repeat the image along X axis, Y axis, or Both axes. You can also choose No Repeat to prevent the image from being repeated.
  3. Gradient: Create a smooth transition between multiple colors in the background. Click on the line to add various colors and rotate the dial to set the angle of the gradient.

  4. Padding: Set the space around the content within a border. You can either:
    1. Select Padding same for all sides and move the slider to set the space.
    2. Uncheck Padding same for all sides and set the space for left, right, top, and bottom in pixels.
  5. Height and Width: Set the height and width of the component. For some components, you also have the option of setting the width as Auto to resize based on the user's screen.
    Note: You also have the Constrain proportions option to ensure that the component's proportions are maintained.
  6. Border: Configure the border for the component. You can decide the color (hex code or color picker), style of the border, and its size (using the slider or entering size in pixels).
  7. Shadow: Create a shadow for the component by choosing its:
    1. Position (X and Y): Positive value of X moves the shadow to the right of the component. Negative value of X moves it to the left. For Y, a positive value moves it up while a negative value moves it down.
    2. Blur: The higher the value, the less sharp the shadow will be.
    3. Color: Pick the color of the shadow.
  8. Radius: Use this to round the corners of your component. Drag the slider to set the extent of rounding for all corners.
  9. Margin: Set the amount of white space around a component. You can either:
    1. Select Margin same for all sides and move the slider to set the space.
    2. Uncheck Margin same for all sides and set the space for left, right, top, and bottom in pixels.
  10. Visibility: Show or hide the component.
  11. Depth: Bring the component above or move it below other elements.
  12. Text: You can set the text size, weight, casing, alignment, and other text-related options.
  13. Line: You can set the line to horizontal or vertical, adjust thickness, style, and color.
Dynamic styling
Some components can be dynamically styled based on:
  1. States: Set a different style for the same element based on its state.

    For example, when certain fields are empty, their associated actions will be visible but disabled. Styling the disabled state is supported for specific actions like Call, Send email, Send message, and Map locator(available under Data > Actions). To indicate that an important action like sending emails is disabled (because there is no value in the email field), you could add a red border to the Send email button. This will remind the user to fill out the email field.

  2. Conditional styling tab: Set different styles for the component based on the data in the record. The criteria is set in a Canvas Rule and a conditional styling tab is created for each canvas rule.
Reusing styles
You can reuse styles by adding them to presets. To do so:
  1. Select the element in the canvas and right-click on it.
  2. Select Add to Presets.
To reuse the style for another element,
  1. Select the element on the canvas.
  2. In the left pane, click Presets.
  3. Select a preset added by you under Custom or pick a preset from the Gallery.
The following style options can be added to presets:
  1. Text, Label, and Value
  2. Field
  3. Section
  4. Tab
  5. Table
  6. Buttons

Note
  1. You can add up to 25 styles to the presets.
  2. The semi-bold font style is not supported in text, field, and button components.

Reusable Components

A combination of components like data, element, and style form the backbone of templates. You can save such a combination as a reusable component. You can use these components in other canvas pages by simply dragging and dropping them onto the canvas. This saves time as well as ensures consistency across your pages.
 
Before adding the component into the template, you can also preview it by hovering over the component in case it is a custom reusable component.

You can choose the pre-existing components from the gallery and add them to the canvas.
Note
  1. You can save up to 25 reusable components.
  2. A component can be reused in templates created for various CRM modules. The fields created for one module will be automatically mapped and displayed with the fields of the other.
  3. If the fields could not be matched, a similar field type available in the module chosen will be displayed and if the field type is not available in the destination module, then it will be denoted as N/A. In either case, you can change the field type by right-clicking on the component.

Exporting a Canvas template

Once you've created a Canvas template, you can share it with users in your organization or with users in another CRM organization using a unique key. You can initiate the export either from the canvas home page or within the canvas builder.
  1. Navigate to Setup > Customization > Canvas.
  2. Click the Detail View tab and select Mobile.
  3. Hover over a mobile record detail page, click the (...) icon and select Export Canvas.
    (or)
    Click the (...) icon and select Edit. In the Canvas Builder, click the (...) icon and select Export template.
  4. In the Canvas Template Export popup, click Export to generate the unique key for that canvas.
  5. Click Copy to copy the key.
This key is an alphanumeric code that can transmit the UI of your template.
Note:
To manage your canvas keys
  1. On the canvas home page, click (...) icon and select Manage canvas keys.
  2. Hover over the canvas template and perform the desired action (Preview, Copy, or Delete).
  3. Click Done.

Importing a Canvas template

  1. Navigate to Setup > Customization > Canvas.
  2. Click the Detail View tab and select Mobile.
  3. You have three ways of initiating the import of a template:
    1. Click on the dropdown next to the Create Record Detail Page button and click Import canvas template.
    2. In the Select a template from the gallery popup, click on the dropdown next to the Create Blank Template button and click Import canvas template.
    3. In the Canvas Builder, click (...) icon and select Import canvas template. Please note that this option will only be available when creating a new canvas page and not when editing an existing one.
  4. In the popup that appears, select the module and layout.
  5. Enter the template key and click Import.

Accessing Canvas pages in the CRM mobile app

After creating mobile canvas pages on the web, you can easily access them in your CRM mobile app by following the instructions given below.

Android

  1. In the Zoho CRM app, go to the required module (like Leads, Contacts, and so on).
  2. Tap the required record.
  3. Tap the icon.
  4. In the menu that appears, tap Switch View.
  5. Your mobile canvas pages will be presented in a list for you to choose. Tap the mobile canvas page you want to access.

iOS

  1. In the Zoho CRM app, go to the required module (like Leads, Contacts, and so on).
  2. Tap on the required record.
  3. Tap the more () icon.
  4. Tap Switch View.
  5. Your mobile canvas pages will be presented in a list for you to choose. Tap the mobile canvas page you want to access.





    Access your files securely from anywhere

      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

                                                                                                              • 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 Record's Detail Page

                                                                                                                A record detail page is a storehouse of all information about the record. It contains primary details like name, company profile, billing address, or shipping address and associated details called the related list, like notes, campaigns, open and ...
                                                                                                              • Canvas in sandbox

                                                                                                                You can redesign the interface of record detail pages and list view pages using Canvas. You can ensure the interface presented to a user is relevant to that user's work and dynamically styled based on the data present in a record. This goes a long ...
                                                                                                              • 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 ...
                                                                                                              • 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 ...
                                                                                                                Wherever you are is as good as
                                                                                                                your workplace

                                                                                                                  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