自定义小组件

自定义小组件可将外部服务引入 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 文件中授权连接,请将 "userAccess" 设置为 "true"。

  • 要将授权仅限制为安装该自定义小部件的 SDAdmin,请将 "userAcess" 设置为 "false"

 

 在 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": "单行文本",
}],
}]
}