예제: 대시보드 작성

이 예제는 대시보드를 작성하는 방법과 대시보드가 Process Portal에서 작동하는 방법을 나타냅니다.

1. 프로세스 애플리케이션에서 Dashboards 8.5.0 Toolkit에 종속 항목을 추가하십시오. Toolkit에 종속 항목을 추가하는 데 대한 정보는 Designer 보기에서 Toolkit 종속성 작성, 변경 및 삭제의 내용을 참조하십시오.
2. MyTaskPage라는 사용자 서비스를 작성하십시오. 정보는 Heritage 사용자 서비스 빌드의 내용을 참조하십시오.
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. 대시보드에 제목을 추가하려면 출력 텍스트 제어를 추가하고 해당 레이블을 내 태스크로 설정하십시오. 바인딩이 필요하지 않으므로 해당 바인딩을 지우십시오. 해당 HTML 속성에서 DashboardTitle 클래스를 추가하십시오. 이 클래스는 사용자 정의 HTML에서 CSS 규칙을 설정하는 클래스입니다.
   4. 대시보드의 비주얼 요소를 포함하려면 가로 섹션 제어를 추가하십시오. 섹션의 일반 특성에서 해당 레이블 가시성을 숨기기로 설정하십시오.
   5. 태스크 목록을 대시보드에 추가하려면 tasklistdata 개인용 변수에 바인드되는 태스크 목록 제어를 가로 섹션에 추가하십시오.
   6. 차트를 대시보드에 추가하려면 chartdata 개인용 변수에 바인드되는 차트 제어를 가로 섹션에 추가하십시오.
   7. 차트의 모양을 설정하려면 다음 구성 특성을 설정하여 차트 제어를 구성하십시오.

      구성 특성	값
      제목	위험 상태별 태스크
      너비	600
      높이	300
      테마	위험 또는 기한이 지남
      표시 옵션	chartdisplayoptions 변수

   8. 탐색 제어기를 레이아웃에 추가하십시오. 탐색 제어기는 대시보드에서 작업 페이지로의 탐색을 제공합니다.
   9. 기본적으로 Coach에서 제공하는 확인 단추를 제거하십시오. 상태 전이할 다른 Coach가 없으므로 이 단추가 필요하지 않습니다.
   Coach 레이아웃은 다음 화면 캡처와 유사합니다.
   
7. MyTaskPage 사용자 서비스의 개요 페이지에서 노출 설정을 설정하십시오.
   • 노출 대상으로 승인자 팀을 선택하십시오.
   • 다음으로 노출됨으로 대시보드를 선택하십시오.
8. 대시보드를 저장하십시오.

결과

Process Portal에 로그인하면 예제 대시보드가 태스크 목록에 있습니다. 예제 대시보드를 선택할 때 해당 컨텐츠(태스크 목록 및 차트)를 볼 수 있습니다. 다음 화면 캡처에 표시된 것과 같이 태스크 목록에 태스크가 포함될 수 있습니다.

태스크 목록에 태스크가 없으면 고용 샘플이 사용 가능한 경우 이 샘플을 사용하여 태스크 목록을 채울 수 있습니다. 작업 페이지에서 Standard HR Open New Position을 선택하십시오. 이 조치는 제출 요청 태스크를 작성합니다. 해당 조치가 태스크를 태스크 플로우의 다른 단계로 이동하므로 태스크를 완료 및 제출하지 마십시오. MyTaskPage 대시보드로 돌아가면 태스크 목록에 이 태스크가 있습니다.

목록에서 태스크를 선택할 때 작업 페이지가 열리고 태스크 세부사항을 표시합니다. 태스크를 완료하지 않고 예제 대시보드로 돌아가면 여전히 태스크 목록에 태스크가 포함됩니다. 그런 다음 새 태스크를 선택하면 작업 페이지에 새 태스크가 표시됩니다. 이전 태스크로 돌아가면 다음 또는 제출을 클릭했을 때의 양식으로 되어 있던 데이터가 유지됩니다.