本文介绍详情页插件的概念以及如何通过纷享的平台能力扩展对象详情页，进而实现以下场景：

• 详情页标题除了显示对象名称之外还需要显示对象的APIName

本教程将帮助你了解如何从零开始开发详情页插件，并实现上述功能。

概述

对象详情插件是一种扩展方式，旨在帮助开发人员创建灵活且交互性强的对象详情界面。该插件允许用户轻松进行 UI 层面的修改动作，从而满足不同业务场景下的需求。

主要特性

目前支持以下扩展：

1. 扩展按钮：删除按钮、新增按钮、修改按钮
2. 扩展字段：自定义详细信息组件中的字段
3. 修改对象数据

开发指南

如何从零开始开发详情页插件

步骤一：创建自定义插件

1. 登录 纷享后台 。

2. 在左侧导航栏单击进入 自定义插件 页面

   

3. 单击 新建，填写 名称、支持终端、插件类型，单击 下一步，单击使用 空模板，新建代码文件并复制粘贴以下代码，选择 入口文件，单击 发布。

   

   

   

   export default class Plugin {
       apply() {
           return [
               {
                   event: "detail.render.before",
                   functional: this.renderBefore.bind(this)
               }
           ];
       }
       renderBefore(context, plugin) {
           return Promise.resolve({
               describe: {
                   ...context.data.describe,
                   display_name: `${context.data.describe.display_name}-${context.data.describe.api_name}`
               }
           });
       }
   }

步骤二：配置自定义插件

1. 在左侧导航栏单击进入 自定义对象 页面。

   

2. 单击 对象名称 ，进入对象管理，单击 布局，单击 详情页布局 ，单击 网页端，进入布局设计器。

   

   

3. 修改 右侧全局设置 中的 PC端详情页JS插件 字段 ，选择刚才新建的插件，单击 保存并退出。

   

步骤三：体验效果

查看当前对象数据详情页，我们发现标题前的区域除了显示对象名称之外，还可以显示对象的APIName。

事件与上下文

事件

名称	功能
detail.parse.before	该钩子发生在详情页处理数据之前
detail.render.before	该钩子发生在详情页渲染之前
detail.render.after	该钩子发生在详情页渲染之后
detail.form.render.before	该钩子发生在详情页详细信息组件渲染之前
detail.previewImage.before	该钩子发生在详情页图片字段预览之前
detail.head_info.render.before	该钩子发生在详情页标题栏组件渲染之前
detail.logs.render.before	该钩子发生在详情页操作日志渲染之前
detail.relatedlist.render.before	该钩子发生在渲染详情页相关对象表格之前调用
detail.relatedlist.render.after	该钩子发生在渲染详情页相关对象表格之后调用
detail.multitable.render.before	该钩子发生在渲染详情页从对象表格之前调用
detail.multitable.render.after	该钩子发生在渲染详情页从对象表格之后调用

上下文

bizApi

名称	功能
refresh	刷新详情页
hidePage	关闭详情页
fullScreen	全屏详情页
prevPage	上一条数据
nextPage	下一条数据

dataGetter

名称	功能
getData	获取当前对象的数据
getDescribe	获取当前对象的对象描述