外观
如何配置详情页布局
通过配置详情页布局，管理员可以自定义用户查看单条数据记录时的页面呈现效果，以确保关键业务信息高效触达。
概述
详情页布局用于控制记录详情页中的字段、组件、按钮、相关列表和移动端摘要。管理员可以为不同的用户角色和业务类型分配专属的详情页布局。
开始之前
在配置详情页布局前，请确认：
- 您已创建好目标对象。
- 您已完成核心业务字段的配置。
- 您已梳理好各业务类型和用户角色需要展示的字段和按钮。
- 您已明确 Web 端与移动端是否需要独立的布局体验。
PC 端详情页布局
详情页 PC 端布局配置界面从左至右分为导航区、内容展示区、设置区三部分。
导航区（左侧）
布局配置界面左侧主要包含组件和字段信息两部分内容。
支持的组件类型：
| 组件分类 | 包含组件 | 说明 |
|---|---|---|
| 通用组件 | 标题和按钮 | 可配置详情页是否展示标签和按钮的显隐及按钮的外露个数 |
| 摘要信息 | 展示详情页中重点信息，可配置展示哪些字段 | |
| 其他组件 | 相关团队、跟进动态、详细信息、修改记录、流程列表、审批列表、嵌入页面、图表组件 | |
| 业务组件 | 相关对象、从对象 | 包含 SFA 预设的组件。从对象组件未开启独立配置时，沿用从对象列表页的配置 |
| 容器 | 页签容器、栅格容器 | 栅格容器可调整栅格数量及比例 |
字段信息：
- 支持字段的新增和显隐配置
- 字段信息包含 32 种字段类型以及 3 个场景化字段组
内容展示区（中间）
中间为页面的实时预览界面：
- 可以直接将左侧组件拖拽到页面上进行设置。
- 可在此处设置字段的隐藏和显示。
设置区（右侧）
布局配置界面右侧主要包括全局设置和组件设置两部分内容。
操作步骤
第一步：进入详情页布局配置
- 登录管理后台，进入 对象管理。
- 打开目标对象详情，选择 布局。
- 在布局列表中，选择 详情页布局，点击 新建 或选择已有布局进行编辑。
第二步：配置全局设置
在右侧设置区的 全局设置 中，可以配置基本信息与 UI 事件。
基本信息设置
| 设置项 | 说明 |
|---|---|
| 布局名称 | 可以自定义布局名称（支持多语言配置） |
| API Name | 系统自动生成，不支持修改 |
| 布局描述 | 可以自定义此详情页布局的布局描述 |
| 更换布局模版 | 支持上下布局和上左右布局两种模板 |
| JS 插件 | 支持 PC 端和移动端详情页 JS 插件 |
| 字段布局 | 支持开启字段的独立布局，主要分为左对齐、中线对齐和上下对齐三种方式 |
WARNING
如果配置为"上下布局"，将看不到原来经典的"上左右布局"中右侧放置相关团队卡片的配置区域。
UI 事件设置
通过触发 UI 事件执行函数，可以动态改变界面信息。
IMPORTANT
- UI 事件的执行结果只作用在新建/编辑页，实际生效以是否保存为准。
- 自定义对象全部支持 UI 事件，预设对象部分支持（销售线索、客户、订单/订单产品、商机 2.0/商机 2.0 明细）。
- 只有旗舰版和集团版支持该能力。
数据更新事件：
| 事件类型 | 触发时机 | 应用场景示例 | 配置方式 |
|---|---|---|---|
| 字段事件 | 新建/编辑页中某一字段修改（值改变且失焦）时 | 新建订单选择客户后，自动将客户地址同步到订单送货地址 | UI 事件 → 添加数据更新事件 → 字段事件 |
| 从对象事件 | 主从同时新建/编辑页，新建/编辑/删除从对象时 | 每新增一条订单产品明细，根据客户级别为该明细的优惠额度赋值 | UI 事件 → 添加数据更新事件 → 从对象事件 |
| 页面加载事件 | 新建/编辑页面加载时 | 创建电子签时，根据关联的业务数据自动创建签署人从数据 | UI 事件 → 添加数据更新事件 → 页面加载事件 |
NOTE
从对象事件仅在该对象存在从对象时才会出现入口。触发条件可选新增明细/编辑明细/删除明细。
校验事件：
- 触发时机：在新建/编辑页，当某一字段修改（值改变且失焦）时，触发自定义函数验证该字段值是否符合特定条件。
- 应用场景：填写手机号/邮箱格式错误时，能够立即给到前端提示。
- 配置方式：UI 事件 → 添加校验事件。
第三步：配置组件设置
1. 标题卡片设置
- 选择卡片模版设置：
- 通用样式：只需配置模版是否显示。
- 高级模版：支持配置字段的排列方式、颜色等，选择后在【字段设置】中配置参数。
- 按钮管理：设置按钮的显示和隐藏，以及外露个数。鼠标在按钮选项上悬停以设置显示/隐藏。
- 设置字段和组件的基本信息，以及显隐条件。
NOTE
在按钮管理中，只有将按钮位置设定为详情页的按钮才会在此处展示。未外露的按钮将被收纳在"更多"下拉菜单中。
2. 摘要字段管理
负责设置详情页摘要字段的显示和隐藏，鼠标在字段选项上悬停以设置显示/隐藏。
3. 详细信息
未开启新建/编辑页布局时，可以在详情页中配置详细信息中字段的显示/隐藏和数据范围。
第四步：配置按钮
- 在内容展示区选中 标题和按钮 组件。
- 在右侧属性设置中点击 按钮管理。
- 鼠标悬停在按钮选项上以设置显示或隐藏。
- 设置 外露按钮个数（未外露的按钮将被收纳在"更多"下拉菜单中）。
在按钮管理中设置位置为详情页的按钮，会出现在详情页标题和按钮组件中。管理员可以控制按钮是否展示，以及展示在外部还是收纳到更多操作中。
第五步：配置相关列表
当选择业务组件中的关联对象和从对象组件时，可以进行以下设置：
- 是否仅显示有数据列表
- 业务类型的展示样式
- 子对象是否相对于列表页布局设置而独立配置
- 对数据提前设置筛选条件
开启独立配置后，还可以管理从对象的通用/批量/单条操作按钮：
| 按钮类型 | 支持情况 | 配置说明 |
|---|---|---|
| 从对象通用按钮 | 暂不支持 | — |
| 批量操作按钮 | 支持显示/隐藏 | 在从对象后台将按钮位置设为【列表页批量操作】。配置完毕后，在从对象列表页选择数据时按钮显示在列表上方 |
| 单条操作按钮 | 支持显示/隐藏 | 在从对象后台将按钮位置设为【列表页单条操作】。配置完毕后，按钮出现在从对象列表页数据右侧【操作】一栏 |
NOTE
批量按钮无论是否满足预设执行条件，只要在列表中选择数据就会一直存在，点击执行后不符合条件的数据不会执行按钮操作。
移动端详情页布局
移动端详情页布局可沿用 PC 端布局，也可独立配置布局。
- 沿用 PC 端布局将同步网页端详情页布局摘要字段及相关信息的设置。
- 移动端详情页支持单独配置布局。
摘要字段
负责设置详情页摘要字段的显示和隐藏，鼠标在字段选项上悬停以设置显示/隐藏。
导航容器
- 点击页签可配置页签，对页签进行排序、增加自定义页签。
- 点击导航下的组件，可配置组件的属性。
NOTE
- 从对象可开启独立配置，未开启独立配置时，沿用 Web 端组件设置。
- 若出现移动端详情页页签与后台布局配置不匹配的情况，是因为用户在前端详情页手动配置了页签（仅对当前用户生效）。可在页签配置中选择 导航设置 > 恢复初始配置，恢复后移动端详情页页签与后台布局配置同步。
按钮管理
- 可以进行显示和隐藏设置。
- 在后台管理按钮配置中设置按钮位置为详情页。
- 配置完毕后，在移动端的详情页底部显示。
预期结果与验证
- 登录 Web 前端，打开该对象的某条记录，确认顶部标题、外露按钮、摘要字段、页签排版及相关列表显示符合配置。
- 登录移动端 App，确认摘要卡片、底栏按钮和页签与后台移动端配置一致。