使用画布定制移动端记录详情页面

使用画布定制移动端记录详情页面

销售代表经常使用智能手机和平板电脑上的 CRM 应用程序来参考数据、添加备注等。

移动端记录详情页为用户提供了一个与实体相关的全面信息概览。例如,销售代表可以在定制针对某个联系人的销售话术之前,参考该联系人的记录详情页。

您可以使用画布来自定义关键且常用的记录详情页。这使您能够构建、修改和美化记录详情页,以便移动端用户能够有一个愉悦且高效的界面来工作。

注意
  1. 移动端画布页面可以通过移动端应用程序访问,但无法使用移动端应用程序进行设计。它们需要使用Web应用程序中提供的专用移动端画布构建器进行设计。
  2. 使用画布的移动端页面可在安卓(手机) iOS(手机)上使用。它们无法在安卓平板和 iPad 上访问。
  3. 您创建的画布移动端页面的设计将适用于安卓和 iOS 平台。您无需为这两个平台分别设计。
  4. 为 Web 应用构建的画布页面不兼容移动端设备。
可用性
所需权限
具有模块定制权限的用户可以自定义移动端记录详情页。


要管理移动端画布视图

  1. 导航至设置 > 定制 > 画布
  2. 点击详情视图选项卡并选择移动设备

移动设备 选项卡中,以下详细信息和功能可用:

  1. 创建移动设备记录详情页:使用此按钮开始设计移动设备记录详情页。
  2. 移动设备的画布分配:使用此按钮将特定的移动设备记录详情页设置为不同角色的默认页。
  3. 更多 (...): 点击此按钮访问其他操作,如管理画布规则 和管理画布密钥。画布规则允许您根据记录数据设置动态样式。画布密钥是一个字母数字代码,可用于导出画布模板。
  4. 过滤器:使用此过滤器查看特定模块的移动设备记录详情页。
  5. 画布表格:在此表格中查看所有画布页面,并包含模块名称布局创建者修改者 状态 等附加详细信息。您还可以将鼠标悬停在每个画布页面上,执行编辑复制重命名预览导出画布 删除等操作。

要创建移动端记录详情页

  1. 导航至设置 > 定制 > 画布
  2. 点击详情视图选项卡并选择移动设备
  3. 点击创建移动端记录详情页面
  4. 创建移动端自定义记录 弹窗中,从下拉列表中选择模块布局
  5. 点击创建
  6. 在选择模板 弹窗中,您可以:
    1. 选择一个模板。您可以从全部 选项卡或我的机构画布 选项卡中选择。后者将包含为所有模块创建的所有移动端画布页面。选择一个并点击选择,或者
    2. 点击创建空白模板从头开始创建您的设计。

  7. 在画布 构建器中,您可以拖放数据元素 和可重用组件。您可以根据需求排列和设置这些不同组件的样式。有关更多信息,请参阅本文件中的导航画布构建器 部分。
  8. 完成后,为您的画布命名并点击保存

  9. 可选地,点击画布分配,并选择此画布作为特定角色的默认设置。点击保存

注意
  1. 告警:如果一个组件在安卓平台上可用,但在 iOS 平台上不可用,反之亦然,您将在告警部分收到通知。
    点击通知,将带您到在其中一个平台上不可用的组件。
  2. 预览:这允许您预览移动端画布页面。您可以选择安卓或 iOS 标签来查看页面在两个平台上的渲染效果。如果某些数据(字段、相关列表或操作)在 iOS 或 安卓上不受支持,它们将被移除,并且相应的应用会自动调整间距。这可以在预览弹窗中查看。

要复制一个移动端记录详情页面

  1. 导航至设置 > 定制 > 画布
  2. 点击详情视图选项卡并选择移动设备
  3. 将鼠标悬停在移动端记录详情页上,点击(...)图标并选择复制
  4. 选择模块布局
  5. 点击复制
  6. 完成修改后,为复制的页面命名并点击保存

要编辑移动端记录详情页面

  1. 导航至设置 > 定制 > 画布
  2. 点击详情视图选项卡并选择移动设备
  3. 将鼠标悬停在移动端记录详情页面上,点击(...)图标并选择编辑

要删除移动端画布视图

  1. 导航至设置 > 定制 画布
  2. 点击详情视图选项卡并选择移动设备
  3. 将鼠标悬停在移动端记录详情页面上,点击(...)图标并选择删除
  4. 您确定要删除此视图吗?的弹窗中,点击是的,删除
Notes注意:在删除当前设置为某个角色默认的画布视图之前,您必须先为该角色选择另一个默认视图。

将移动端画布详情页设置为默认

  1. 导航至设置 > 定制 画布
  2. 点击移动设备选项卡。
  3. 点击移动端画布分配
  4. 移动端画布分配 页面,从下拉列表中选择模块布局
  5. 选择相应的角色和对应的画布
  6. 点击保存

导航画布构建器

您将在画布构建器上设计移动端记录页面。让我们快速浏览这个无代码、拖放式界面,并看看这里提供的不同选项。

画布构建器界面由三个部分组成:
  1. 画布:这是您排列移动端记录详情页面不同组件的地方。
  2. 左侧边栏:这里包含不同的组件、与模板相关的操作以及可帮助您构建画布页面的资源。这些是您用来构建画布页面的工具。
  3. 顶部菜单栏:包含撤销重做缩放告警预览全屏查看画布输入画布名称 保存 等选项。

组件

画布构建器左侧边栏中的不同组件有:
  1. 数据:这包含了特定布局中可用的各种数据相关实体,如字段关联列表 和操作(如编辑、复制、删除等)以及自定义按钮。
  2. 元素:这包括布局内部的各种视觉实体,如分栏标签表格文本图像图标 曲线
  3. 样式:这允许您为组件(数据实体、元素、移动端页眉、移动端主体或移动端页脚)设置不同的样式相关属性。属性根据所选组件而变化。
  4. 可重用组件:一组包含元素、样式和数据的组件可以作为一个单独的可重用组件保存。这可以在其他布局和模块中重复使用。
让我们更详细地了解这些组件。

数据

这取决于所选的布局。根据不同的布局,您将获得一个列表:
  1. 字段:这些字段将包括在移动端应用(安卓或 iOS)中支持的字段。这些字段将根据布局中的分栏进行分组。
  2. 相关列表:这里列出了与模块相关联的移动端支持的相关列表。
  3. 操作:这些是在您的布局中可用的不同移动端特定按钮(如编辑、复制、删除等)。
  4. 按钮:这些包括您创建的自定义按钮或作为集成的一部分提供的按钮。

元素

元素对所有布局都是相同的。它们提供了您可以选择、排列和样式化以设计移动端记录详情页面的构建模块。
它们包括:
  1. 分栏:分栏是将在移动端详情页面上显示的块。使用分栏,您可以:

    1. 向其中添加数据组件和其他元素
    2. 为该分栏添加样式
    3. 拖动边框来调整分栏框的大小。

    4. 右键点击分栏并执行操作,如插入数据组件、使组件固定或流动、复制或粘贴样式、添加条件样式(画布规则)、锁定、添加到可重用组件、添加到预设或删除。
  2. 标签页:标签页允许您将字段和相关列表组织到不同的屏幕中。只有选中标签页的屏幕可见,其余的则保持隐藏。这使你能够在小空间内打包大量数据,同时也让用户更容易访问这些数据。使用标签页,您可以:

    1. 使用左侧面板根据您的偏好进行样式设置
    2. 点击+图标创建自定义标签或添加相关列表作为标签页
    3. 将标签页左侧边缘悬停,点击双向箭头图标,并拖动标签页以重新排列
    4. 将标签页悬停并点击 x 以删除标签页
    5. 通过点击标签页并使用左侧的样式面板来重命名自定义标签页
    6. 右键点击标签页以显示图标。如果已添加图标,您将可以选择隐藏/更改图标、隐藏文本、图标顶部和图标左侧
    7. 在标签内右键单击以执行插入字段、使组件固定或流动、复制/粘贴样式、条件样式、锁定、添加到可重用组件、添加到预设和删除等操作。可用的选项将取决于您在选项卡内单击的位置
    8. 添加到标签元素的关联列表不能被重命名。
  3. 表格:表格允许您以行和列的形式显示信息。这为大多数用户提供了熟悉的界面,并有助于节省页面空间。使用表格,您可以:
    1. 将鼠标悬停在行上并点击+图标以添加行。默认情况下,将有两列。您无法向表格添加更多列。将鼠标悬停在表格上并点击-图标以删除表格。
    2. 右键点击以插入/更改字段,将组件设为固定或流动,复制/粘贴样式,条件样式,锁定,添加到可重用组件,添加到预设,或删除
    3. 拖动边框以调整表格大小
  4. 文本:这允许您在详情页中添加文本框。例如,它可用于创建标题、说明、告警等。使用文本组件,您可以:
    1. 拖动边框以调整文本框大小
    2. 右键点击以复制、将组件设为固定/流动、添加到预设以及删除
  5. 图片:图片元素可用于在移动端记录详情页添加图片。使用图片元素,您可以:
    1. 点击图片元素,然后在左侧面板中点击上传图片以添加图像。您可以使用图像的 URL 添加图像。
    2. 添加图像后,您可以调整其大小,调整边框、阴影、半径、填充等其他样式。
    3. 右键点击图像以设置半径,并删除。
  6. 图标:图标可以用作多个位置的简单视觉提示。例如,它们可以用作许多地方的字段标签。使用图标,您可以:
    1. 从丰富的图标中选择,以表示不同的实体
    2. 右键点击图标进行复制、更改图标和删除
  7. 曲线:线条可用于任何需要分隔和组织内容、对齐元素等的地方。
注意
  1. 记录详情页上的每个组件都可以设置为固定或流动。
  2. 固定组件的大小不会因用户屏幕大小而改变。
  3. 流动组件的大小会根据用户屏幕大小而变化。

样式

某些样式选项适用于所有元素。这些包括背景颜色、内边距、字段标签对齐方式、边框、外边距等。其他选项则特定于某个元素。
样式选项可以添加到预设中,并用于其他组件。
其中一些选项包括:
  1. 背景:通过输入 HEX 代码、从调色板中选择或使用颜色选择器来选择背景颜色。
  2. 图片:选中图片复选框,然后执行以下操作:
    1. 添加图片:点击上传图片
    2. 输入图片的 URL 并点击插入
    3. 设置图片大小:您可以选择包含(调整以适应组件的大小同时保持宽高比)、原始(图片原始大小)或覆盖(拉伸以完全填充组件不考虑宽高比)。
    4. 设置图像重复:如果图像较小且无法填满组件,您可以选择沿 X 轴、Y 轴或两个轴重复图像。您也可以选择不重复,以防止图像重复。

  3. 渐变:在背景中创建多种颜色之间的平滑过渡。点击线条添加各种颜色,旋转旋钮设置渐变角度。

  4. 填充:设置边框内内容周围的空间。您可以:
    1. 选择所有的填充相同,并移动滑块来设置空间。
    2. 取消勾选所有的填充相同,并在像素中设置左、右、顶部和底部的空间。

  5. 高度宽度:设置组件的高度和宽度。对于某些组件,您还可以选择将宽度设置为自动,根据用户的屏幕进行缩放。
    注意:您还可以使用约束比例选项来确保组件的比例保持不变。
  6. 边框:配置组件的边框。您可以决定边框的颜色(十六进制代码或颜色选择器)、边框的样式及其大小(使用滑块或输入像素值)。
  7. 阴影:通过选择其创建组件的阴影:
    1. 位置(XY):X 的正值将阴影移至组件的右侧,负值则移至左侧。对于 Y,正值向上移动,负值向下移动。
    2. 虚化:数值越高,阴影越模糊。
    3. 颜色:选择阴影的颜色。

  8. 半径:使用此功能来圆滑组件的角。拖动滑块来设置所有角的圆滑程度。


  9. 边距:设置组件周围的空白区域。您可以:
    1. 选择所有的边距相同,并移动滑块来设置空间。
    2. 取消勾选所有的边距相同,并在像素中设置左、右、上和下的空间。

  10. 可见性:显示或隐藏组件。
  11. 深度:将组件置于上方或将它置于其他元素下方。
  12. 您可以设置文本的大小、粗细、大小写、对齐方式和其他与文本相关的选项。
  13. 曲线:您可以设置曲线的水平或垂直,调整粗细、样式和颜色。
动态样式
某些组件可以根据以下条件进行动态样式设置:
  1. 状态:根据元素的不同状态设置不同的样式。

    例如,当某些字段为空时,其关联的操作将可见但被禁用。对于特定操作(如呼叫、发送电子邮件、发送消息和地图定位器,可在“数据 > 操作”下找到)支持禁用状态的样式设置。为了指示重要操作(如发送电子邮件)被禁用(因为电子邮件字段中没有值),您可以给发送电子邮件 按钮添加红色边框。这将提醒用户填写电子邮件字段。

  2. 条件样式标签页:根据记录中的数据为组件设置不同的样式。标准在画布规则中设置,每个画布规则都会创建一个条件样式标签页。
复用样式
您可以通过将样式添加到预设中来实现复用。具体操作如下:
  1. 在画布中选择该元素,然后右键单击它。
  2. 选择添加到预设

要重复使用该样式于其他元素,

  1. 在画布上选择该元素。
  2. 在左侧面板中,点击预设
  3. 在“自定义”下选择您添加的预设,或从图库中选择一个预设。
以下样式选项可以添加到预设中:
  1. 文本、标签和值
  2. 字段
  3. 分栏
  4. 标签页
  5. 表格
  6. 按钮

注意
  1. 您最多可以向预设中添加 25 种样式
  2. 半粗字体样式在文本、字段和按钮组件中不受支持。

可重用组件

组件如数据、元素和样式的组合构成了模板的骨干。您可以将这种组合保存为可重用的组件。您可以通过将它们简单地拖放到画布上来在其他画布页面中使用这些组件。这既节省时间,又能确保页面之间的一致性。
 
在将组件添加到模板之前,如果它是一个自定义的可重用组件,您还可以通过悬停在组件上来预览它。

您可以从图库中选择现有组件,并将它们添加到画布上。
注意
  1. 您最多可以保存 25 个可重用组件。
  2. 一个组件可以在为不同 CRM 模块创建的模板中重复使用。为其中一个模块创建的字段将自动映射并与其他模块的字段一起显示。
  3. 如果字段无法匹配,将显示模块中选择的可用的相似字段类型。如果目标模块中不存在该字段类型,则将其标记为 N/A。在这两种情况下,您都可以通过右键单击组件来更改字段类型。

导出画布模板

一旦您创建了一个画布模板,您可以使用唯一密钥将其共享给您组织内的用户或另一个 CRM 组织内的用户。您可以从画布主页或画布构建器中启动导出。
  1. 导航至设置 > 定制 > 画布
  2. 点击详情视图标签页并选择移动设备
  3. 将鼠标悬停在移动端记录详情页上,点击(...)图标并选择导出画布
    (或)
    点击(...)图标并选择编辑。在画布构建器中,点击(...)图标并选择导出模板
  4. 画布模板导出 弹窗中,点击导出以生成该画布的唯一密钥。
  5. 点击复制以复制密钥。
这个密钥是一个字母数字代码,可以传输您模板的 UI。
注意:
要管理您的画布密钥
  1. 在画布主页上,点击(...)图标,选择管理画布 密钥
  2. 将画布模板悬停上并执行所需操作(预览复制删除)。
  3. 点击完成

导入画布模板

  1. 导航至设置 > 定制 > 画布
  2. 点击详情视图选项卡并选择移动设备
  3. 三种方式来启动模板的导入:
    1. 点击创建记录详情页面按钮旁边的下拉菜单,然后点击导入画布模板
    2. 从库选择模板 弹窗中,点击“创建空白模板”按钮旁边的下拉菜单,然后点击导入画布模板
    3. 在画布构建器中,点击(...)图标,选择导入画布模板。请注意,此选项仅在创建新画布页面时可用,而在编辑现有页面时不提供。
  4. 在弹出的窗口中,选择模块布局
  5. 输入模板密钥并点击导入

在 CRM 移动端应用中访问画布页面

在网页上创建移动端画布页面后,您可以通过以下说明轻松在 CRM 移动端应用中访问它们。

安卓

  1. 在 Zoho CRM 应用中,进入所需的模块(如线索、联系人等)。
  2. 点击所需的记录
  3. 点击  图标。
  4. 在出现的菜单中,点击切换视图
  5. 您的移动端画布页面将显示为列表供您选择。点击您想要访问的移动端画布页面

iOS

  1. 在 Zoho CRM 应用中,进入所需的模块(如线索、联系人等)。
  2. 点击所需的记录
  3. 点击更多(  )图标。
  4. 点击切换视图
  5. 您的移动端画布页面将显示为列表供您选择。点击您想要访问的移动端画布页面