创建定制仪表板

在线编辑

Draft comment:
This topic only applies to BAW, and is located in the BAW repository. Last updated on 2025-01-20 10:38

要显示您感兴趣的业务信息，您可以创建定制仪表板。

关于本任务

您可以通过创建随后作为仪表板公开的人员服务，将定制仪表板添加到 Process Portal 。人员服务可位于任何流程应用程序中。通过使用仪表板，用户可以查看与业务流程相关的业务数据。然后，用户可以使用仪表板来响应该业务数据或者其他项目（例如，消息）。

过程

添加对仪表板工具箱以及包含仪表板所使用的资源的其他工具箱的依赖关系。
有关信息，请参阅修改工具包依赖关系。仪表板工具箱包含 coach 视图以及您可用来创建仪表板的其他资源。
创建用户通过仪表板进行监控和交互的人员服务。
有关信息，请参阅构建传统人员服务。
在人员服务的 " 概述 " 页面中，将公开目标字段设置为其成员可以查看和使用仪表板的团队。将显示为字段设置为仪表板。
有关信息，请参阅公开传统人员服务。
可选: 设置 Process PortalProcess Portal 针对仪表板名称显示的标签。
如果未设置标签，那么 Process Portal 将使用人员服务的名称作为标签。
有关信息，请参阅全球化仪表板名称。
使用一个或多个 Coach 为仪表板创建用户界面。
有关信息，请参阅构建 Coach。通常，Coach 包含一个或多个 Coach 视图。这些 Coach 视图可以是库存或响应控件、仪表板工具箱中的控件或定制 Coach 视图。有关创建 Coach 视图的信息，请参阅开发可复用视图。
提示: Process Portal 具有一个控件，可用于将当前页面设置为内容区域中的起始页面。
当正在为 Coach 设计布局时，请确保对该控件的位置进行补偿。例如，移动 Coach 视图，以使控件不与其重叠，方法是使用 CSS 规则来创建页边距或添加填充。
在您的定制仪表板中，如果您希望仪表板工具箱中的控件浏览至您的定制仪表板内，请创建定制的“导航控制器”。将定制的“导航控制器”添加到您的定制仪表板中。
提示: 某些控件要求 "导航控制器" 控件在仪表板中可用。有关信息，请参阅仪表盘工具包中各个控件的文档。
要创建定制的“导航控制器”，请完成以下步骤：
1. 将仪表板工具箱内的“导航控制器”复制到您的流程应用程序中，或者复制到与您的流程应用程序具有依赖关系的工具箱中。
2. 打开副本的 " 行为 " 页面，然后选择 load 事件处理程序。
3. 编辑 topic.subscribe 回调函数，使其为目标仪表板构建正确的 URL。您可以使用 utilities.generateCustomDashboardURL = function(/*string*/type, /*string*/appName, /*string*/serviceName, /*object*/params, /*string, optional*/ snapshotName)来实现此目标。
  例如，
```
var urlType = null;
if ((!!(window.parent)) &&(window != window.parent)) { 
	// In Heritage Process Portal 
	urlType = utilities.constants.PORTAL_DASHBOARD_URL_TYPE; 
} else { 	
	// Not in Heritage Process Portal 
	urlType = utilities.constants.SERVICE_URL_TYPE; 
}
var targetLocation = utilities.generateCustomDashboardURL(urlType, "MyApp", MyHumanService", params)
console.log(targetLocation);
```
  params 可从已发布的事件构建。其格式如下：
```
params = {
	"tw.local.param01":"data"
	"tw.local.param02":"data2"
}
```
  针对导航创建的 URL 因用户查看仪表板的位置不同而不同：
  - 如果用户在 Process Portal看到仪表板， URL 的格式为 /dashboards/{PROCESS_APP_NAME}/{HUMAN_SERVICE_NAME} ，后面是传递给仪表板人工服务的附加参数。例如，要传递流程应用程序标识，URL 为：/dashboards/{PROCESS_APP_NAME}/{HUMAN_SERVICE_NAME}?tw.local.processAppId=myProcessID。
  - 如果用户在 Process Designer 或定制门户网站中看到仪表板，那么 URL 的格式为 /teamworks/executeServiceByName?processApp={PROCESS_APP_NAME}&serviceName={HUMAN_SERVICE_NAME}，后跟要传递给仪表板人员服务的其他参数。

在需要执行仪表板导航的任何定制 Coach 视图中，将事件发布至“导航控制器”预订的主题。

回调函数会为事件构建有效内容。

例如，仪表板工具箱中的“流程摘要”Coach 视图具有以下回调：

this.doNavigationCallback = function _doNavigationCallback_ProcessSummary(evt){
	try{
		var data = (!! this.context.binding) ?  this.context.binding.get("value") : null;
		if(data!=null && typeof(data.processId)!="undefined" && data.processId!=""){
			var params = {};
			params[dutils.constants.DASHBOARD_NAVIGATION_SOURCE] = "ProcessSummary";
			params[dutils.constants.DASHBOARD_NAVIGATION_DESTINATION] = dutils.constants.PROCESS_PERFORMANCE_SERVICE;
			params[dutils.constants.PROCESS_ID_PARAMETER] = data.processId;
			topic.publish(dutils.constants.DASHBOARD_NAVIGATION_TOPIC, params);
		}
	} catch (e) {
		console.error(e);
	}
};

在此情况下，有效内容为：

"sourceControl":"ProcessSummary", 
"destinationService":"Process+Performance",
"tw.local.processAppId":"myProcessID"

有关更多示例，请参阅仪表板工具箱中的“导航控制器”和 Coach 视图。