图
简化集成
对于无需外部后端的简单操作：
高级集成
序列图
 | 以下序列演示一般 (推荐) 操作顺序。在某些情况下，实际实施可能会偏离此工作流。 |
常规工作流
详情：
1. 用户可导航至跟踪器的文档视图。
◦ 在文档视图中，外部小组件可显示在右侧面板中。
2. 文档视图渲染 IFrame。
◦ 外部小组件会封装到 IFrame 中。
3. IFrame 调用小组件的 viewUrl。
◦ 在 Codebeamer 中配置小组件期间，IFrame 尝试从 viewURL 载入小组件 UI。
4. 外部小组件实例化
5. 获取身份验证令牌
6. 身份验证令牌
7. 获取配置
8. 外部小组件配置
9. 获取基本 URL
10. REST API V3 URL
11. 设置小组件高度
12. 小组件后端初始化
13. 后端实例
14. 获取选定项
15. 项 ID
16. 获取项详情
17. 从 Codebeamer 获取项详情
18. 项详情
19. 其他计算/外部服务调用
20. 项详情
21. 结果小组件 HTML
◦ 根据需要，相应的项详情包含小组件 HTML。
22. 显示文档视图
◦ 用户可以在右侧面板上看到选定项正确填充的外部小组件。
选定项已在 Codebeamer 中更改
| | 前置条件：用户登录跟踪器项的“文档视图”页面。 |
用例：用户更改选定项 (例如，在跟踪器仪表板上执行操作)，因此外部小组件内容应更新。
详情：
1. 小组件创建回调，以便接收关于项选择变更的通知
2. 小组件在 CB 前端
3. 用户更改项选择
4. CB 前端通过注册的回调通知外部小组件
5. 在内部注册新项 ID
◦ 修改存储在小组件侧的选定项 ID。
6. 获取项详情
7. 从 CB 获取项详情
8. 项详情
9. 其他计算/外部服务调用
◦ 小组件后端可以进行其他操作：使用其自身的数据库，甚至调用外部小组件操作所必需的外部服务。
10. 项详情
11. 更新的小组件 HTML
◦ 小组件 HTML 将根据更改的项详情进行更改。
12. 显示更新的“文档视图”页面
◦ 用户可以看到更新的外部小组件内容属于 CB 中的选定项。
在 CB 中重新加载项
用例：用户修改外部小组件用户界面上项的某些特性。此修改应在 CB 中更新。
详情：
1. 用户对外部小组件进行项修改。
◦ 外部小组件也可用于项更新。从理论上讲，REST API V3 支持的所有操作均可实现。
2. 修改请求
◦ 从小组件前端发送到小组件后端的修改请求 (例如，POST HTTP 请求)。
3. 相应的更新方法
◦ 后端应调用在 Swagger 客户端上运行的相应 update/... 方法 (这将调用相应的 REST API V3 端点)。
4. 更新结果
◦ 更新结果与在 Swagger 客户端运行该方法相同，具体由外部小组件实施决定，例如如何处理和显示失败的更新。
5. 其他计算/外部服务调用
◦ 小组件后端可以进行其他操作，使用其自身的数据库，甚至调用外部小组件操作所必需的外部服务。
◦ 例如，在成功更新的情况下，可以在不同的外部系统或其自身的数据库中进行相同的修改。
6. 更新的结果
◦ 小组件后端会通知前端更新结果。
7. 重新加载项请求
◦ 根据更新结果，外部小组件可从 CB 用户界面请求重新加载项。
8. 在 CB 用户界面上重新加载项
◦ 如果给定页面支持此项重新加载功能，CB 会从数据库中重新加载给定项。
9. 刷新文档视图以更新项
◦ 用户可以在 CB 应用程序中查看对外部小组件所做的修改。
外部小组件部署
• 从理论上讲，外部小组件可以是 Internet 中的任何外部 Web 应用程序 (通过其 URL 包含在 IFrame 中)。
• 当前，使用单独 docker 容器部署外部小组件，因此，每个外部小组件都有其自身的轻型 docker 容器。
演示应用
Angular 应用
要确定与此小组件兼容的 Angular 版本，请查看项目的 package.json 文件中的 "dependencies" 对象。
Typescript 应用
JavaScript 应用