示例：创建仪表板

此示例显示您如何在 Process Portal 中创建仪表板以及仪表板如何运行。

1. 在您的流程应用程序中，将依赖关系添加至 Dashboards 8.5.0 工具箱中。 有关将依赖关系添加至工具箱的信息，请参阅在 Designer 视图中创建、更改和删除工具包依赖关系。
2. 创建称为 MyTaskPage 的人员服务。 要了解更多信息，请参阅构建遗留人员服务。
3. 在 MyTaskPage 的“变量”页面中，添加以下专用变量：

   变量名称	类型（类型的位置）
   chartdata	ChartData (Dashboards 8.5.0)
   tasklistdata	TaskListData (Dashboards 8.5.0)
   chartdisplayoptions	ChartDisplayOptions (Dashboards 8.5.0)

   MyTaskPage 的“变量”页面与以下截屏相似：
   
4. 在 MyTaskPage 图中，将服务器脚本和 Coach 添加到布局中。将开始节点连接至脚本，并将脚本连接至 Coach。
   
5. 在实施属性中选择服务器脚本并添加以下 JavaScript 代码。 此代码会初始化仪表板使用的变量。

   var tlProps = new tw.object.TaskListProperties();
   tlProps.includeRiskStateSummary = true;
   
   tw.local.chartdata = new tw.object.ChartData();
   tw.local.chartdata.plots = new tw.object.listOf.ChartDataPlot();
   tw.local.chartdata.plots[0] = new tw.object.ChartDataPlot();
   tw.local.chartdata.plots[0].series = new tw.object.listOf.ChartDataSeries();
   tw.local.chartdata.plots[0].series[0] = new tw.object.ChartDataSeries();
   tw.local.chartdata.plots[0].series[0].label = "Task risk states for current user";
   tw.local.chartdata.plots[0].series[0].data = new tw.object.listOf.ChartDataPoint();
   
   var tld = tw.system.retrieveTaskList(tlProps, 0, 0);
   tw.local.tasklistdata = tld;
   var riskstatesKeys = tld.riskStateSummary.keyArray();
   for (var i=riskstatesKeys.length;i--;) {
   	var dataPoint = new tw.object.ChartDataPoint();
   	dataPoint.name = tld.riskStateSummary.keyArray()[i];
   	dataPoint.value = tld.riskStateSummary.valueArray()[i];
   	tw.local.chartdata.plots[0].series[0].data.insertIntoList(0, dataPoint);
   }
   
   //Setting the configuration options for the chart by script instead of the UI
   tw.local.chartdisplayoptions = new tw.object.ChartDisplayOptions();
   tw.local.chartdisplayoptions.plots = new tw.object.listOf.ChartPlotDisplayOptions();
   tw.local.chartdisplayoptions.plots[0] = new tw.object.ChartPlotDisplayOptions();
   tw.local.chartdisplayoptions.plots[0].plotType = "Columns";
   tw.local.chartdisplayoptions.plots[0].displayHorizontalAxis = true;
   tw.local.chartdisplayoptions.plots[0].displayVerticalAxis = true;

   提示： 如果您看到警告图标，请检查变量拼写。
6. 在 Coach 中，为仪表板创建布局：
   1. 在选用板过滤器中，选择仪表板以将“仪表板”控件放置到选用板中。
   2. 添加定制 HTML 高级项目。在其属性中，粘贴以下代码：

      <style>
      .DashboardTitle {
      	background-color: rgb(222,231,239);
      	text-indent: 50px;
      	font-size: 24px; 
      }
      </style>

      此代码会缩进至标题，因此不会被设置 Process Portal 的登录页面的功能部件所覆盖。
   3. 要在仪表板中添加标题，请添加“输出文本”控件，并将其标签设置为 My Tasks。清除其绑定，因为不需要绑定。在其 HTML 属性中，添加 DashboardTitle 类。 此类是您在定制 HTML 中为其设置 CSS 规则的类。
   4. 要包含仪表板的可视元素，请添加“水平部分”控件。在该部分的常规属性中，将其标签可视性设置为隐藏。
   5. 要将任务列表添加到仪表板中，请将与 tasklistdata 专用变量绑定的“任务列表”控件添加到水平部分。
   6. 要将图表添加到仪表板中，请将与 chartdata 专用变量绑定的“图表”控件添加到水平部分。
   7. 要设置图表的外观，请设置以下配置属性，以配置“图表”控件：

      配置属性	值
      标题	按“风险状态”划分的任务
      宽度	600
      高度	300
      主题	存在风险或过期
      显示选项	chartdisplayoptions 变量

   8. 将“导航控制器”添加到布局。 “导航控制器”提供从仪表板到“工作”页面的导航。
   9. 除去缺省情况下 Coach 提供的确定按钮。 由于无需转换到其他 Coach，因此无需此按钮。
   该 Coach 的布局与以下截屏类似：
   
7. 在 MyTaskPage 人员服务的“概述”页面中，设置显示设置：
   • 对于显示目标，请选择核准人团队。
   • 对于显示为，请选择仪表板。
8. 保存您的仪表板。

结果

登录至 Process Portal 时，示例仪表板位于任务列表中。选择示例仪表板时，即可看到其内容：任务列表和图表。 任务列表可能包含如下截屏中所显示的任务：

如果任务列表不包含任务，那么您可以使用“招聘样本”来填充该任务列表，前提是有样本可用。在“工作”页面中，选择标准 HR 开启新职位。该操作会创建提交请求任务。请勿完成并提交任务，因为该操作会将此任务移至任务流中的另一个步骤。如果您返回至 MyTaskPage 仪表板，那么任务列表中包含此任务。

从列表中选择任务时，会打开“工作”页面并显示任务详细信息。如果您不完成该任务并返回至示例仪表板，那么任务列表仍包含该任务。如果您随后选择新任务，那么“工作”页面会显示新任务。当您返回至先前的任务时，会保留您单击下一步或提交时表单中存在的数据。