Ejemplo: creación de un panel de control

En este ejemplo se muestra cómo crear un panel de control y cómo éste funciona en Heritage Process Portal.

1. En la aplicación de proceso, añada una dependencia al kit de herramientas Paneles de control 8.5.0. Si desea más información sobre cómo añadir una dependencia a un kit de herramientas, consulte Creación, cambio y supresión de una dependencia de kit de herramientas en la vista Designer.
2. Crear un servicio de usuario llamado MyTaskPage. Si desea más información, consulte Creación de un servicio de usuario de herencia.
3. En la página Variables de MyTaskPage, añada las siguientes variables privadas:

   Nombre de variable	Tipo (ubicación del tipo)
   chartdata	ChartData (Paneles de control 8.5.0)
   tasklistdata	TaskListData (Paneles de control 8.5.0)
   chartdisplayoptions	ChartDisplayOptions (Paneles de control 8.5.0)

   La página Variables de MyTaskPage es similar a esta captura de pantalla:
   
4. En el diagrama MyTaskPage, añada un script de servidor y un Coach al diseño. Conecte el nodo de inicio con el script y el script con el Coach.
   
5. Seleccione el script del servidor y añada el siguiente código JavaScript a las propiedades de implementación. Este código inicializa las variables que utiliza el panel de control.

   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);
   }
   
   //Establecer opciones de configuración para el gráfico por script y no por interfaz de usuario
   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;

   Consejo: Si ve iconos de aviso, compruebe la ortografía de las variables.
6. En el Coach, cree el diseño del panel de control:
   1. En el filtro de la paleta, seleccione Paneles de control para colocar los controles del panel de control en la paleta.
   2. Añada un elemento HTML personalizado avanzado. En sus propiedades, pegue el código siguiente:

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

      El código sangra el título, de modo que no queda solapado por la característica que establece la página de inicio de sesión de Process Portal.
   3. Para añadir el título al panel de control, añada un control de Texto de salida y establezca su etiqueta en Mis tareas. Borre su enlace ya que el enlace no es necesario. En sus atributos HTML, añada la clase DashboardTitle. Esta clase es la clase para la que establece la regla CSS en el HTML personalizado.
   4. Para contener los elementos visuales del panel de control, añada un control Sección horizontal. En las propiedades generales de la sección, establezca su visibilidad de etiqueta en Ocultar.
   5. Para añadir la lista de tareas al panel de control, añada un control Lista de tareas enlazado a la variable privada tasklistdata para la sección horizontal.
   6. Para añadir la lista de tareas al panel de control, añada un control Gráfico enlazado a la variable privada chartdata para la sección horizontal.
   7. Para establecer el diseño del diagrama, configure el control Gráfico estableciendo las siguientes propiedades de configuración:

      Propiedad de configuración	Valor
      Título	Tareas por estado de riesgo
      Anchura	600
      Altura	300
      Tema	En riesgo o vencido
      Mostrar opciones	Variable chartdisplayoptions

   8. Añadir un controlador de navegación al diseño. El controlador de navegación permite navegar desde el panel de control a la página Trabajar.
   9. Elimine el botón Aceptar que el Coach proporciona de forma predeterminada. El botón no es necesario ya que no hay ningún otro Coach con el que realizar la transición.
   El diseño del Coach es similar a esta captura de pantalla :
   
7. En la página Visión general del servicio de usuario MyTaskPage, establezca los valores de exposición:
   • En Expuesto a, seleccione el equipo Aprobadores.
   • En Exponer como, seleccione Panel de control.
8. Guarde el panel de control.

Resultados

Cuando inicie la sesión en Heritage Process Portal, el panel de ejemplo estará en la lista de tareas. Cuando seleccione el panel de control de ejemplo, podrá ver su contenido: la lista de tareas y el gráfico. La lista de tareas puede contener tareas como las que se muestran en la captura de pantalla siguiente :

Si la lista de tareas no contiene tareas, puede utilizar el ejemplo Hiring Sample para llenar la lista de tareas si éste está disponible. En la página Trabajar, seleccione Standard HR Open New Position. Esta acción crea la tarea Submit Requisition. No complete ni envíe ninguna tarea porque esta acción mueve la tarea a un paso del flujo de tareas. Si vuelve al panel de control MyTaskPage, la lista de tareas contiene esta tarea.

Cuando selecciona una tarea de la lista, se abre la página Trabajar y visualiza los detalles de la tarea. Si no completa la tarea y vuelve al panel de control de ejemplo, la lista de tareas continúa conteniendo la tarea. Si, a continuación, selecciona la tarea nueva, la página Trabajar muestra la nueva tarea. Cuando regresa a la tarea anterior, se conservan los datos que estaban en el formulario cuando ha pulsado Siguiente o Enviar.