自定义小组件
自定义小组件可将外部服务引入 ServiceDesk Plus,以扩展该application的功能。它们使您能够从 ServiceDesk Plus 内部访问第三方application和网页。小组件是可嵌入的 UI 组件,您可以使用自定义小组件包来创建它们。
自定义小组件仅适用于 ServiceDesk Plus 企业版。
目前,您最多可以创建 10 个小组件,并且每个小组件最多可包含 4 个小组件项。
您可以将自定义小组件配置为可从以下位置访问:
- 仪表板
- Web 选项卡
- 请求详细信息
- 变更详细信息
- 资产详细信息
- 发布详细信息
- 自定义模块详细信息
创建自定义小组件包
自定义小组件包是一个配置文件和资源文件的集合,例如 html、png、js 或 css 文件,这些文件是创建自定义小组件所必需的。这有助于嵌入第三方application并扩展 ServiceDesk Plus 的功能。
要创建自定义小组件包,
- 使用资源文件开发应用包。
- 创建 plugin-manifest.json 文件。
- 将应用包和 plugin-manifest.json 文件压缩为 zip 文件。
- 在自定义小组件页面上传该 zip 文件。
以下文档说明了创建应用包和 plugin-manifest.json 文件的过程。
开发应用包
在 app 文件夹中为小组件创建一个资源文件。生成一个指向小组件项登录页的 URL。在 plugin-manifest.json 文件中配置 路径 URL 时输入此 URL。
您可以使用 Util 函数在 ServiceDesk Plus 和自定义小组件之间建立连接。使用 Util 函数,您可以从自定义小组件向application服务器添加数据,或从自定义小组件获取 URL 或其他任何数据等小组件数据。
创建 Plugin-Manifest.JSON 文件
plugin-manifest.json 文件包含自定义小组件的配置详细信息。此文件中包含的一些键是可选的,而另一些是必填的。
请使用以下说明为这些键提供值:
- Widgets*:一个 JSON 数组,包含自定义小组件项的详细信息。您必须在自定义小组件包中至少添加一个小组件项。最多可添加四个小组件项。每个小组件项都必须具有以下属性集。
- name*:小组件项的名称(最多 100 个字符)。
- description:对小组件项的简要说明。
- path url*:小组件项的 URL 路径。示例格式:("/app/index.html")
- PropertyJSON:包含自定义小组件项的属性。
- white_list:输入域 URL 路径以发起 API 调用。示例格式:("api.zoom.us")
- visible_to:根据角色限制用户对自定义小组件的可用性。
- icons:用于为您的小组件项提供图标的可选键。默认情况下,系统会根据小组件项名称生成一个图标。您可以在插件清单文件中为 30X30 键输入图标 URL 作为值,以上传一个最大为 30x30 像素的图标。图标会根据application主题动态呈现为深色或浅色。
- 主题图标:您可以为不同主题提供不同的图标。主题图标的 URL 应包含 "dark" 或 "light" 版本。示例格式:"icons": {"dark": "/app/[icon-name].png", "light": "/app/[icon-name].png"}。
- Locations*:定义在 ServiceDesk Plus 中可以呈现自定义小组件的位置。您必须至少为小组件项提供一个位置。目前,您可以在以下位置配置自定义小组件:
位置 | JSON 键格式 | 说明 |
Web 选项卡 | "webtab" | 自定义小组件将作为 Web 选项卡添加到导航窗格中。 |
主页 | "dashboard" (适用于技术人员和请求者) | 自定义小组件会嵌入到仪表板中。仪表板小组件只能启用。要添加小组件,请在仪表板上单击“新建”>“新建小组件”。 |
如果为请求者启用了自定义小组件,则该仪表板小组件可以嵌入到请求者门户主页中。要将小组件添加到请求者门户,请自定义“请求者主页”,并从预设小组件列表中添加该小组件。 |
请求详情页 | "request.detail.tab" | 作为选项卡添加到请求详情页中。 |
"request.detail.rightpanel" | 添加到请求详情页的右侧面板中。 |
变更详情页 | "change.detail.tab" | 作为选项卡添加到变更详情页中。 |
"change.detail.rightpanel" | 添加到变更详情页的右侧面板中。 |
发布详情页 | "release.detail.tab" | 作为选项卡添加到发布详情页中。 |
"release.detail.rightpanel" | 添加到发布详情页的右侧面板中。 |
资产详情页 | "asset.detail.tab" | 作为选项卡添加到资产详情页中。 |
"asset.detail.rightpanel" | 添加到资产详情页的右侧面板中。 |
自定义模块详情页 | "cm_{modulename}.detail.tab" | 作为选项卡添加到自定义模块详情页中。 |
"cm_{modulename}.detail.rightpanel" | 添加到自定义模块详情页的右侧面板中 |
其他配置
其他配置(如连接或模块)可增强自定义小部件的功能。其他配置的范围要么仅限于小部件项级别,要么可全局应用于所有小部件项。
配置连接:
连接允许您将自定义小部件与第三方 API 集成。您可以通过在小部件包中配置连接,从自定义小部件访问第三方application。您最多可以向一个自定义小部件添加四个连接。
要在插件清单文件中配置连接,您可以在创建连接后,直接将连接详细信息复制为 JSON 字符串。前往 管理 > 开发者空间 > 连接,并从连接详细信息页面复制 JSON 代码片段。
在 plugin-manifest 文件中配置连接的示例说明:
"connections": [{
"connectionLinkName":"twitter",
"connectionName":"twitter",
"serviceName":"twitter",
"userAccess":false,
"isUserDefinedService":false
}
],
范围:此配置为全局范围。连接会为所有自定义小部件项进行配置。
删除自定义小部件时,相关联的连接也会被删除。
配置模块:
模块允许您收集和存储附加数据。可以使用 JS API、API 或从application中,在自定义模块小部件中填充和管理数据。自定义模块详细信息只能通过自定义小部件进行更新/删除。
自定义模块的显示名称、显示复数名称和 API 名称在application中必须是唯一的。请在 plugin-manifest 文件中的相应字段中添加唯一值。
在 plugin-manifest 文件中配置模块的示例说明:
模块
"modules":[ {
"display_name": "zoom details1", //模块名称
"display_plural_name": "zoom_c3ustom_1widget",
"api_plural_name": "zoom_custom_3wi2dget",
"name": "zoom1_custo33m_widget",
"permission": { //模块的权限
"all": [
{
"field": "type",
"values": [
"用户",
"技术人员"
],
"condition": "是",
"logical_operator": "且"
}
],
"allowed_users": "全部"
},
"fields": [{
"additional_attributes":{"nullable":false}, //表示这是一个必填字段
"display_name": "request_id",
"name": "request_id",
"field_type": "单行文本",
"only_numeric": false
},
{
"display_name": "meeting_id",
"name": "meeting_id",
"field_type": "单行文本",
"only_numeric": true
},
{
"display_name": "ticket_name",
"name": "ticket_name",
"field_type": "单行文本",
"only_numeric": false
},
{
"display_name": "start_time",
"name": "start_time",
"field_type": "单行文本",
"only_numeric": false
},
{
"display_name": "duration",
"name": "duration",
"field_type": "单行文本",
"only_numeric": false
},
{
"display_name": "cur_tech_name",
"name": "cur_tech_name",
"field_type": "单行",
"only_numeric": false
}],
}]
范围:此配置针对每个小组件项单独生效。如果自定义小组件包包含多个小组件项,用户可以为每个小组件项分别唯一地配置自定义模块。
删除自定义小组件时,关联的自定义模块也会一并删除。
plugin-manifest.json 文件示例
{
"name": "会议应用",
"widgets": [
{
"name": "Zoom 应用",
"description": "一个允许技术人员跨不同平台远程访问设备的小组件。",
"locations": [
{
"name": "request.detail.rightpanel",
"is_enabled": true
}
],
"property_json": {
"icons":{
"dark":"/app/img/TV_icon.png"
},
"white_list": [
"api.zoom.us"
],
"visible_to": ["SDAdmin"],
},
"url": "/app/zoom.html"
}
],
"connections": [{
"connectionLinkName": "adminzoom",
"connectionName": "adminzoom",
"serviceName": "zoom",
"userAccess": false,
"isUserDefinedService": true,
"sharedBy": 5
}],
"modules":[ {
"display_name": "Zoom 详细信息",
"display_plural_name": "zoom_自定义小部件",
"description": "Zoom 自定义小部件详细信息",
"is_attachment_supported": true,
"api_plural_name": "zoom_custom_widget",
"name": "zoom1_custom_widget",
"permission": {
"all": [
{
"field": "type",
"values": [
"用户",
"技术人员"
],
"condition": "是",
"logical_operator": "且"
}
],
"allowed_users": "全部"
},
"fields": [{
"additional_attributes":{"nullable":false},
"display_name": "请求 ID",
"name": "request_id",
"field_type": "单行文本",
"only_numeric": false
},
{
"display_name": "meeting_id",
"name": "meeting_id",
"field_type": "单行文本",
"only_numeric": true
},
{
"display_name": "ticket_name",
"name": "ticket_name",
"field_type": "单行文本",
},
{
"display_name": "start_time",
"name": "start_time",
"field_type": "单行文本",
},
{
"display_name": "duration",
"name": "duration",
"field_type": "单行文本",
},
{
"display_name": "cur_tech_name",
"name": "cur_tech_name",
"field_type": "单行文本",
}],
}]
}