スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法

このクックブックでは、スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法をご紹介します。
ポートレットは、スプレッドシートとIM-Workflow REST APIを利用して作成します。
スプレッドシートの利用は、下記を参考して設定してください。
[IM-Spreadsheet 利用ガイド] - [セットアップ方法]

今回は以下のIM-Workflow REST APIを利用しています。

メソッド	URI	概要
GET	/api/workflow/flow-groups/active-matter-tasks	案件状態(未処理)のフローグループ / フロー構造情報取得

intra-mart Accel Platform 2020 Summer(8.0.26)のREST APIの公開に合わせて、上記のAPIを一部修正しています。それに合わせて、本稿のスクリプトについても修正をしました。
REST APIの仕様については、こちらを参照してください。

完成イメージ

グループポータル画面

ポートレットでは特定のフローグループのフロー毎の未処理件数を表示します。
[Go]ボタンをクリックすると選択したフローで絞り込まれた状態で、案件一覧-未処理-画面に遷移します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

スプレッドシートエクスポートファイル : im_cookbook_164127_spreadsheet
ファイルを解凍後、スプレッドシートのインポート機能から種別「json」としてインポートしてください。
手順の詳細は以下のドキュメントを参照してください。
[IM-Spreadsheet 利用ガイド]- [インポートを行う]

レシピ

スプレッドシートを作成します。
作成したスプレッドシートをポートレットとして利用可能にします。
グループポータルにポートレットを追加します。

1. スプレッドシートを作成します。

シートにテーブルを配置し、テーブル名を「FlowTable」とします。

スクリプトの設定を行います。
手順の詳細は以下のドキュメントを参照してください。
[IM-Spreadsheet 利用ガイド]- [スクリプトを設定する]

スクリプト設定ダイアログを表示し、「ユーザスクリプト」に以下を設定します。
その際、「FLOW_GROUP」にポートレットの表示対象にするフローグループIDを指定します。

function onInit (spread) {
  // フロー情報追加
  let addFlowInfo = function (childNodes, flowInfoList, innerFlag) {
    // ポートレットの表示対象にするフローグループIDを指定してください。
    const FLOW_GROUP = 'flow-group-a';
    $.map(childNodes, function(value, index) {
      if (value.type === 'flow_group' && value.parentFlowGroupId === FLOW_GROUP) {
        addFlowInfo(value.childNodes, flowInfoList, true);
      } else if (value.type === 'flow' && (value.parentFlowGroupId === FLOW_GROUP || innerFlag)) {
        let flowInfo = value.identify.substring(0, value.identify.indexOf('@'));
        flowInfoList.push({'Flow name' : value.label, 'Count number' : value.mattersCount, ' ' : flowInfo});
      }
    });
  };
  // ボタン追加
  let addButton = function (sheet, length) {
    const BUTTON_POS = 3;
    let dataPos = 4;
    for (let i = 0; i < length; i++) {
      let cellType = new GC.Spread.Sheets.CellTypes.Button(); 
      cellType.text('Go'); 
      sheet.setCellType(dataPos++, BUTTON_POS, cellType); 
    }
  };

  $('<form id="wkf-portlet_golist" method="POST" action="" target="_parent"></form>')
      .appendTo(document.body);

  const token = document.querySelector('meta[http-equiv="X-Intramart-Secure-Token"]').content;
  const baseUrl = jQuery('base').attr('href');
  const activeSheet = spread.getActiveSheet();
  let table  = activeSheet.tables.findByName('FlowTable');
  table.bindingPath('flowInfo');
  let sheetInfo = {};
  let tasks = {};
  let tableColumns = []; 
  let datasource = {flowInfo : []};

  // 案件情報の取得
  $.ajax({ type: 'GET', 
           // REST APIのURL
           url: baseUrl + 'api/workflow/flow-groups/active-matter-tasks', 
           headers: {  
             // セキュアトークン
             'X-Intramart-Secure-Token': token
           }, 
           async: true, 
           dataType: 'json',
         }).done(function(response) {
           let data = response.data;
           $.map(data.flowTree, function(value, index) {
             addFlowInfo(value.childNodes, datasource.flowInfo);
           });
           let ds = new GC.Spread.Sheets.Bindings.CellBindingSource(datasource);
           activeSheet.setDataSource(ds);
           addButton(activeSheet, datasource.flowInfo.length);
         }).fail(function(response) { 
           // セッションタイムアウトエラー
           if (response.status === 401) {
             imuiShowErrorMessage('Session Time Out');
             return;
           } 
           // システムエラー
           imuiShowErrorMessage('System Error');
         });
}
function onSave (spread) {
}
function onImport (spread) {
}
function onExport (spread, context) {
}
function onPrint (spread, context) {
}

function onInit (spread) {

// フロー情報追加

let addFlowInfo = function (childNodes, flowInfoList, innerFlag) {

// ポートレットの表示対象にするフローグループIDを指定してください。

const FLOW_GROUP = 'flow-group-a';

$.map(childNodes, function(value, index) {

if (value.type === 'flow_group' && value.parentFlowGroupId === FLOW_GROUP) {

addFlowInfo(value.childNodes, flowInfoList, true);

} else if (value.type === 'flow' && (value.parentFlowGroupId === FLOW_GROUP || innerFlag)) {

let flowInfo = value.identify.substring(0, value.identify.indexOf('@'));

flowInfoList.push({'Flow name' : value.label, 'Count number' : value.mattersCount, ' ' : flowInfo});

}

});

};

// ボタン追加

let addButton = function (sheet, length) {

const BUTTON_POS = 3;

let dataPos = 4;

for (let i = 0; i < length; i++) {

let cellType = new GC.Spread.Sheets.CellTypes.Button();

cellType.text('Go');

sheet.setCellType(dataPos++, BUTTON_POS, cellType);

}

};

$('<form id="wkf-portlet_golist" method="POST" action="" target="_parent"></form>')

.appendTo(document.body);

const token = document.querySelector('meta[http-equiv="X-Intramart-Secure-Token"]').content;

const baseUrl = jQuery('base').attr('href');

const activeSheet = spread.getActiveSheet();

let table = activeSheet.tables.findByName('FlowTable');

table.bindingPath('flowInfo');

let sheetInfo = {};

let tasks = {};

let tableColumns = [];

let datasource = {flowInfo : []};

// 案件情報の取得

$.ajax({ type: 'GET',

// REST APIのURL

url: baseUrl + 'api/workflow/flow-groups/active-matter-tasks',

headers: {

// セキュアトークン

'X-Intramart-Secure-Token': token

async: true,

dataType: 'json',

}).done(function(response) {

let data = response.data;

$.map(data.flowTree, function(value, index) {

addFlowInfo(value.childNodes, datasource.flowInfo);

});

let ds = new GC.Spread.Sheets.Bindings.CellBindingSource(datasource);

activeSheet.setDataSource(ds);

addButton(activeSheet, datasource.flowInfo.length);

}).fail(function(response) {

// セッションタイムアウトエラー

if (response.status === 401) {

imuiShowErrorMessage('Session Time Out');

return;

}

// システムエラー

imuiShowErrorMessage('System Error');

});

}

function onSave (spread) {

}

function onImport (spread) {

}

function onExport (spread, context) {

}

function onPrint (spread, context) {

}

「イベントハンドラ」の「ButtonClicked」に以下を設定します。

function handler(e, info) {
  let flowInfo = info.sheet.getCell(info.row, 3).text();
  // 案件一覧-未処理-画面のパス 
  let path = 'im_workflow/matters/status/active-matter-tasks';
  let group, flowId;
  if (flowInfo.indexOf('/') > 0) {
    group = flowInfo.substring(0, flowInfo.indexOf('/'));
    flowId = flowInfo.substring(flowInfo.indexOf('/') + 1);
    path = path + '/group/' + group;
  } else {
    flowId = flowInfo;
  }
  path = path + '/flow/' + flowId;
  $('#wkf-portlet_golist').attr('action', path).submit();
}

function handler(e, info) {

let flowInfo = info.sheet.getCell(info.row, 3).text();

// 案件一覧-未処理-画面のパス

let path = 'im_workflow/matters/status/active-matter-tasks';

let group, flowId;

if (flowInfo.indexOf('/') > 0) {

group = flowInfo.substring(0, flowInfo.indexOf('/'));

flowId = flowInfo.substring(flowInfo.indexOf('/') + 1);

path = path + '/group/' + group;

} else {

flowId = flowInfo;

}

path = path + '/flow/' + flowId;

$('#wkf-portlet_golist').attr('action', path).submit();

}

2. 作成したスプレッドシートをポートレットとして利用可能にします。

非同期ページポートレットとして登録します。
URLには1で作成したスプレッドシートの埋め込み用URL（表示専用）のコンテキストパス以降knowledgeからのURLを設定してください。

ポートレット追加方法の詳細は、以下を参照してください。
[ポータル管理者操作ガイド]- [ポートレットを設定する]

3. グループポータルにポートレットを追加します。

グループポータルに2で作成したポートレットを追加します。
詳細は、以下を参照してください。
[ポータル管理者操作ガイド]- [グループポータルポートレットを設定する]

最後に

intra-mart Accel Platform 2019 Summer(8.0.23) で追加されたIM-Workflowの各種ポートレットと組み合わせて、特定のフローグループ専用のポータルを作るなど、様々なポータルを作成することができます。
お客様の用途にあわせて是非ご活用ください。