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.
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.
![](https://help.zoho.com/galleryDocuments/edbsn654edd87447e4bd19ae3054f5eae65fd8e3a58983369f703e4bf9352befd1595e285c9019e20215163e60e04a742995b?inline=true)
- 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