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

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.
Canvas mobile pages are available on Android (mobile) and iOS (mobile). They cannot be accessed on Android tablets and iPads.
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
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

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

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

Create Mobile Record Detail Page: Use this button to start designing a mobile record detail page.
Mobile Canvas Assignment: Use this button to set a specific mobile record detail page as default for different profiles.
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.
Filter: Use this filter to view mobile record detail pages for a specific module.
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

Navigate to Setup > Customization > Canvas.
Click the Detail View tab and select Mobile.
Click Create Mobile Record Detail Page.
In the Create a mobile custom record popup, select the Module and Layout from the drop-down list.
Click Create.
In the Select Template popup, you can either:

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
Click Create Blank Template to create your design from scratch.

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.
Once you are done, give your canvas a Name and click Save.
Optionally, click Canvas Assignment and select this canvas as default for specific profiles. Click Save.

Note

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.
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

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

To edit a mobile record detail page

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

To delete a mobile canvas view

Navigate to Setup > Customization > Canvas.
Click the Detail View tab and select Mobile.
Hover over a mobile record detail page, click (...) icon and select Delete.
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

Navigate to Setup > Customization > Canvas.
Click the Mobile tab.
Click Mobile Canvas Assignment.
In the Mobile Canvas Assignment page, select the Module and Layout from the drop-down list.
Select the canvas against the respective profile.
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:

The canvas: This is where you arrange the different components of your mobile record detail page.
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.
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:

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.
Elements: This includes the various visual entities that are present inside a layout like Section, Tab, Table, Text, Image, Icon, and Line.
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.
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:

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.
Related List: Mobile-supported related lists associated with the module are listed here.
Actions: These are the different mobile-specific buttons(like Edit, Clone, Delete etc.) available in your layout.
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:

Section: A section is a block that will appear on the mobile detail page. With a section, you can:

Add data components, and other elements to it
Style the section
Drag the borders to resize the section box.
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

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:

Style it to match your preferences using the left panel
Click the + icon to create a custom tab or add related lists as tabs
Hover over the left edge of a tab, click the double-sided arrow icon, and drag the tab to rearrange it
Hover over a tab and click x to delete a tab
Rename a custom tab by clicking on it and using the style panel on the left
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
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
Related lists added to the tab element can't be renamed.

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:

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.
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
Drag the borders to resize the table

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:

Drag the borders to resize the text box
Right-click to Clone, Make component Fixed/Fluid, Add to Presets, and Delete

Images: The Image element can be used to add an image to a mobile record detail page. With an image element, you can:

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.
After adding the image, you can resize it, adjust other styles like border, shadow, radius, padding, etc.
Right-click on the image to set Radius, and Delete.

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:

Choose from the wide range of icons to indicate different entities
Right-click on the icon to Clone, Change Icon, and Delete

Line: Lines can be used wherever you want to separate and organize content, align elements, and so on.

Note

Every component on the record detail page can be set as fixed or fluid.
A fixed component's size will remain unchanged no matter what the size of the user's screen is.
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:

Background: Select a background color by entering the HEX code, picking from the palette or from the color picker.
Image: Check the Image checkbox and do the following:

Add an Image: Click Upload Image.
Enter the image's URL and click Insert.
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).
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.

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.
Padding: Set the space around the content within a border. You can either:

Select Padding same for all sides and move the slider to set the space.
Uncheck Padding same for all sides and set the space for left, right, top, and bottom in pixels.

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.
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).
Shadow: Create a shadow for the component by choosing its:

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.
Blur: The higher the value, the less sharp the shadow will be.
Color: Pick the color of the shadow.

Radius: Use this to round the corners of your component. Drag the slider to set the extent of rounding for all corners.
Margin: Set the amount of white space around a component. You can either:

Select Margin same for all sides and move the slider to set the space.
Uncheck Margin same for all sides and set the space for left, right, top, and bottom in pixels.

Visibility: Show or hide the component.
Depth: Bring the component above or move it below other elements.
Text: You can set the text size, weight, casing, alignment, and other text-related options.
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:

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.
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:

Select the element in the canvas and right-click on it.
Select Add to Presets.

To reuse the style for another element,

Select the element on the canvas.
In the left pane, click Presets.
Select a preset added by you under Custom or pick a preset from the Gallery.

The following style options can be added to presets:

Text, Label, and Value
Field
Section
Tab
Table
Buttons

Note

You can add up to 25 styles to the presets.
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

You can save up to 25 reusable components.
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.
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.

Navigate to Setup > Customization > Canvas.
Click the Detail View tab and select Mobile.
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.
In the Canvas Template Export popup, click Export to generate the unique key for that canvas.
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

On the canvas home page, click (...) icon and select Manage canvas keys.
Hover over the canvas template and perform the desired action (Preview, Copy, or Delete).
Click Done.

Importing a Canvas template

Navigate to Setup > Customization > Canvas.
Click the Detail View tab and select Mobile.
You have three ways of initiating the import of a template:

Click on the dropdown next to the Create Record Detail Page button and click Import canvas template.
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.
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.

In the popup that appears, select the module and layout.
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

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

iOS

In the Zoho CRM app, go to the required module (like Leads, Contacts, and so on).
Tap on the required record.
Tap the more () icon.
Tap Switch View.
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.

Redefine the way you work

with Zoho Workplace

Start your free trial

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.

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

Zoho Workerly Home
Forums
Connect With Us:

Zoho Recruit Home
Forums
Connect With Us:

Start tracking your website metrics today

Use PageSense to understand what your visitors are looking for, how they are behaving, and where they are facing problems on your website.

Ready to improve your website's performance?

Install the PageSense code snippet on your site in a matter of minutes and start collecting in-depth data about the website visitors to grow your business.

Track and measure every business goal

Set up goals in PageSense to measure every single action performed by visitors on your website like button or link clicks, form submissions, and page engagements.

Understand the customer journey on your website

Create funnels in PageSense to quickly see which pages visitors use to enter your website, where they navigate to next, and which pages they decide to leave without converting.

Visualize your visitor's behavior with color codes

Set up heatmaps in PageSense to see where users have clicked more, how far they've scrolled, and on which parts of a page they've spent the most time using color-coded patterns in reports.

Measure customer engagement with your web forms

Use form analytics in PageSense to see how people interact with different fields in your form, whether they complete the form successfully or not, and where exactly they drop out on your form.

Record real visitor interactions on your website

Use session recordings in PageSense to watch a video of all the visitor actions performed on your website including the pages they navigate, the buttons they click, the UX issues they face, and more.

Test and optimize webpages for better conversions

Run A/B or Split URL tests in PageSense to figure out which version of your web page works best for your business and results in the best conversion rate.

Give each customer a unique website experience

Use personalization in PageSense to deliver customized versions of your website for every individual customer based on their demographics, local weather, browsing history, and more.

Grow your business through customer feedback

Run polls on your website using PageSense to understand what your customers think about your products/services and what needs improvement on your site.

Send timely updates that customers love

Use web push notifications in PageSense to schedule and notify your customers about an upcoming flash sale, product releases, promotional coupons, and a lot more that can spark conversions on your website.

Advertise your business to website visitors

Use pop-ups in PageSense to instantly grab the attention of visitors by showing attractive signup offers, coupon code discounts, or email newsletters that can eventually convert them into subscribers.

Access more advanced settings in PageSense

Use PageSense's advanced features like creating mutually exclusive groups, enabling cross-domain tracking, configuring customized project JS, and more to get deeper insights about your website.

Try easy-to-use extensions

Download the PageSense extension app available for your web browser with a few clicks and start collecting all of your required website metrics in real time.

Discover your favorite integrations with PageSense

Get a deeper look at your website's data by seamlessly integrating PageSense with a host of popular third-party apps like Google Analytics, Mixpanel, Intercom, and more.

Quick Links	Workflow Automation	Data Collection
Web Forms	Enterprise	Begin Data Collection
Interactive Forms	Workplace	Data Collection App
CRM Forms	Customer Service	Accessible Forms
Digital Forms	Marketing	Forms for Small Business
HTML Forms	Education	Forms for Enterprise
Contact Forms	E-commerce	Forms for any business
Lead Generation Forms	Healthcare	Forms for Startups
Wordpress Forms	Customer onboarding	Order Forms for Small Business
No Code Forms	Construction	RSVP tool for holidays
Free Forms	Travel
Prefill Forms	Non-Profit
Intake Forms	Legal	Mobile App
Form Designer	HR	Mobile Forms
Card Forms	Food	Offline Forms
Assign Forms	Photography	Mobile Forms Features
Translate Forms	Real Estate	Kiosk in Mobile Forms
Electronic Forms
Notification Emails for Forms	Alternatives	Security & Compliance
Holiday Forms	Google Forms alternative	GDPR
Form to PDF	Jotform alternative	HIPAA Forms
Email Forms		Encrypted Forms
Embeddable Forms		Secure Forms
Drag and Drop form builder		WCAG

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

Zoho Pagesense Resources

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.

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho Social?

Manage your brands on social media

Access Zoho Social

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Zoho Sheet Resources

New to Zoho Forms?

Latest Feature Updates

Explore our Pricing & Plans

Zoho Forms Resources

Secure your business

communication with Zoho Mail

Get started

Mail on the move with

Zoho Mail mobile application

Go Mobile

Stay on top of your schedule

at all times

Get started

Carry your calendar with you

Anytime, anywhere

Get started

Latest Announcements

New to Zoho Sign?

Zoho Sign Resources

Sign, Paperless!

Sign and send business documents on the go!

Get Started Now

Zoho SalesIQ Resources

New to Zoho TeamInbox?

Zoho TeamInbox Resources

Connect with us

New to Zoho ZeptoMail?

LEARN MORE

Latest Feature Updates

Zoho DataPrep Resources

New to Zoho DataPrep?

Access Zoho DataPrep

Zoho DataPrep Demo

Get a personalized demo or POC

Design. Discuss. Deliver.

Create visually engaging stories with Zoho Show.

Get Started Now

New to Zoho Workerly?

Access Zoho Workerly

New to Zoho Recruit?

Access Zoho Recruit

New to Zoho CRM?

Signup Now

Access Zoho CRM

Latest Feature Updates

New to Zoho Projects?

Access Zoho Projects

New to Zoho Sprints?

Access Zoho Sprints

New to Zoho Assist?

Access Zoho Assist

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

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 ...