intra-mart Accel Platform 2023 Autumn に「ガントチャートテンプレート」が提供されました。
この CookBook では、ガントチャートテンプレートとマスタメンテナンステンプレートを組み合わせて進捗管理アプリを作成する方法について紹介します。

ガントチャートテンプレートは既存のデータをガントチャートとして表示することを想定しています。
そのため、ガントチャートテンプレートは表示するデータの取得・処理部分が作成されません。ご利用いただく状況に合わせて IM-LogicDesigner のフロー定義を編集をする必要があります。
IM-LogicDesigner の出力値に合わせてデータをマッピングするとガントチャートとして表示できます。

この CookBook では、マスタメンテナンステンプレートを利用してタスク管理アプリを作成し、ガントチャート画面を追加する手順についてご紹介します。

完成イメージ

サンプル

この CookBook で使用するサンプルのインポートファイルです。

im_cookbook_234169.zip
- Accel Studio 資材です。
  intra-mart Accel Platform 2023 Autumn 以降でインポートできます。
- ダウンロードして Accel Studio のインポート画面からインポートしてください。
cookbook_234169.csv
- ガントチャートに表示するサンプルデータです。
- TableMaintenance のテーブル・インポートからCSVファイルをインポートしてください。
  オプション設定はファイルエンコーディングをUTF-8に変更してください。

レシピ

マスタメンテナンステンプレートでアプリを作成する

マスタメンテナンステンプレートからアプリケーションを作成します。

Accel Studio の「業務テンプレート一覧」からマスタメンテナンスを選択します。
アプリケーション情報(Application information)項目には下記を入力してください。

項目名(英語)	入力内容
アプリケーションID(Application ID)	im_cookbook_234169
IDの決定に利用する文字列(String Used to Decide ID)	im_cookbook_234169
アプリケーション名(Application name)	im_cookbook_234169
説明(Description)	空欄

扱うデータの定義(Definition of data handled)項目は以下に従って入力してください。
intra-mart Accel Platform 2023 Autumn で Accel Studio に追加された「簡易に設定する」を利用してエンティティの新規作成をしていきます。

エンティティの設定で「新しくエンティティを作成する(Create a new entity)」を選択

「簡易に設定する(Set up simply)」が表示されます。

IM-Repository資材の設定で「簡易に設定する(Set up simply)」を選択

エンティティ名(Entity Name)とエンティティに紐づくテーブル名(Table Name Linked to Entity)に下記を入力します。

項目名(英語)	入力内容	補足事項
エンティティ名(Entity Name)	im_cookbook_234169
エンティティに紐づくテーブル名(Table Name Linked to Entity)	cookbook_234169	Accel Studio ではテーブル名の最初に `im` を付けることができません。

エンティティ情報(Entity Information)のテーブルに下記を入力します。

「追加(Add)」ボタンでカラムの追加をして内容を入力してください。

物理名(Physical Name)	表示名(Display Name)	データ型(Data Type)	表示形式(Display Format)	主キー(Primary Key)	必須(Required)	検索条件(Filtering)
task_id	task_id	文字列(String)	テキストボックス(Text Box)	チェック	チェック	チェック
group_name	group_name	文字列(String)	テキストボックス(Text Box)			チェック
task_name	task_name	文字列(String)	テキストボックス(Text Box)			チェック
start_date	start_date	日付(Date)	日付(Date)			チェック
end_date	end_date	日付(Date)	日付(Date)			チェック
progress	progress	整数	数値ボックス			チェック

アプリケーションを作成します。

画面下部のアプリケーション作成(Create Application) ボタンを押します。
入力内容に問題がなければ、テンプレートビルドジョブ(Template Build Job)画面に遷移しビルドが始まります。

ここまでの手順でマスタメンテナンステンプレートからアプリを作成できました。
次は作成したアプリにサンプル用のデータをインポートします。

サンプルデータのインポート

ガントチャートに表示するためのサンプルデータを用意しています。
「エンティティに紐づくテーブル名」で指定したテーブル名の cookbook_234169でテーブルが作成されているので、このテーブルにデータを追加します。

cookbook_234169.csv

TableMentenance の テーブル・インポート 画面からインポートしてください。
ファイルエンコーディングは UTF-8を選択してください。
インポート時はテーブル名とファイル名を同じ文字列にする必要があります。

インポートが完了したら、次はガントチャートをアプリに追加します。

作成したアプリにガントチャートを追加する

作成したアプリの詳細画面からリソースを追加する

マスタメンテナンステンプレートから作成したアプリの詳細画面から、テンプレートからリソース追加(Add Resource from Template)ボタンを押します。
作成したアプリの詳細画面は Accel Studio のアプリケーション一覧よりアプリを選択すると遷移できます。

Accel Studio の「業務テンプレート一覧」からガントチャートを選択します。
アプリケーション情報(Application information) 項目には下記を入力してください。

項目名	入力内容
アプリケーションID(Application ID)	変更不可
IDの決定に利用する文字列(String Used to Decide ID)	im_cookbook_234169_ganttchart
アプリケーション名(Application name)	変更不可
説明(Description)	変更不可

画面下部の既存アプリケーションの更新(Update Existing Application) ボタンを押します。
マスタメンテナンスのときと同様に、入力内容に問題がなければテンプレートビルドジョブ(Template Build Job)画面に遷移しビルドが始まります。

ここまでの手順で Accel Studio アプリとしてマスタメンテナンス、ガントチャートを追加できました。
ここからはマスタメンテナンスで管理するデータをガントチャートに表示するために、ガントチャートのデータ取得部分に手を加えていきます。
ガントチャートテンプレートから作成された IM-LogicDesigner のフローを編集します。

IM-LogicDesigner の編集

マスタメンテナンスで管理するデータを取得する処理をガントチャートのフローに追加します。
ガントチャートテンプレートから作成されたフロー定義「一覧取得処理(List Acquisition Process)」を編集します。
作成したアプリの詳細画面(Details)から「ロジック(Logic)」タブにある「im_cookbook_234169 一覧取得処理(im_cookbook_234169 List Acquisition Process)」をクリックしてフローの編集を始めます。
備考に『「ガントチャート」テンプレートから作成された一覧取得処理です。(This is a list acpuisition process created from the "Gantt Chart" template.)』と記載されたフローです。

アプリケーション作成時点では、サンプルデータを生成する処理が用意されています。
この CookBook ではマスタメンテナンスで管理するデータをガントチャート画面に表示するため、サンプルデータの生成処理は削除します。

概要

マスタメンテナンスアプリで管理しているデータを取得します。
「一覧取得処理(List Acquisition Process)」の出力値に設定された形式にデータを整形します。
出力値にデータをマッピングします。

データを取得する

IM-Repository のタスクを利用してデータを取得します。

エンティティデータの検索タスクの追加

「IM_Repository」カテゴリの「エンティティデータの検索」タスクを追加します。
右側のタスク固有設定(Task Unique Setting)のエンティティID(Entity ID)からマスタメンテナンステンプレートから作成したエンティティを指定します。この CookBook では im_cookbook_234169 です。
ソートや絞り込みも可能ですが、この CookBook では全件取得とします。

取得したデータを整形する

「エンティティデータの検索」タスクから取得したデータを出力値に合わせて整形します。JavaScriptユーザ定義を利用します。
DBテーブルの中身をそのまま取得した状態となっているので、group_name でグルーピングします。

JavaScriptユーザ定義の追加

「ユーザ定義追加(Add User Definition)」カテゴリから「JavaScript定義新規作成(JavaScript Definition Edit)」を選択し、JavaScriptユーザ定義を追加します。
下記を入力して「登録(Resister)」から登録します。

ユーザ定義共通設定(JavaScript Definition Edit)

利用範囲(Available Range)	「フロー定義内のみで利用する(Use Only in Flow Definition)」にチェック
ユーザ定義ID(User Definition ID)	im_cookbook_234169
ユーザ定義名(User Definition Name)	変数を整形(format variables)

入力値(Input Value)
「JSON入力(JSON Input)」にペーストして決定後、startDate, endDate を date型に、progress をinteger型に変更してください。

{
  "records": [
    {
      "taskId": "string",
      "groupName": "string",
      "taskName": "string",
      "startDate": "date",
      "endDate": "date",
      "progress": "integer"
    }
  ]
}

{

"records": [

{

"taskId": "string",

"groupName": "string",

"taskName": "string",

"startDate": "date",

"endDate": "date",

"progress": "integer"

}

]

}

返却値(Return Value)
「JSON入力(JSON Input)」にペーストして決定後、startDate, endDate を date型に、progress をinteger型に変更してください。

{
  "ganttDataList": [
    {
      "groupName": "string",
      "taskList": [
        {
          "id": "string",
          "name": "string",
          "startDate": "date",
          "endDate": "date",
          "progress": "integer"
        }
      ]
    }
  ]
}

{

"ganttDataList": [

{

"groupName": "string",

"taskList": [

{

"id": "string",

"name": "string",

"startDate": "date",

"endDate": "date",

"progress": "integer"

}

]

}

]

}

JavaScript定義(JavaScript Definition)
「スクリプト(Script)」にペーストしてください。
group_name で各 task をまとめて返却値の形にします。

/**
 * run.
 *
 * @param input {Array} - task input data.
 * @return {Object} task result.
 */
function run(input) {
  // 出力値の初期化
  var outputData = {
    "ganttDataList": []
  };

  // 入力データを処理して出力値に変換
  for (var i = 0; i < input.records.length; i++) {
    var item = input.records[i];
    var groupName = item.groupName;
    var task = {
      "id": item.taskId,
      "name": item.taskName,
      "startDate": item.startDate,
      "endDate": item.endDate,
      "progress": item.progress
    };

    // グループが存在するか確認
    var groupIndex = -1;
    for (var j = 0; j < outputData.ganttDataList.length; j++) {
      if (outputData.ganttDataList[j].groupName === groupName) {
        groupIndex = j;
        break;
      }
    }

    if (groupIndex !== -1) {
      // グループが存在する場合、タスクを追加
      outputData.ganttDataList[groupIndex].taskList.push(task);
    } else {
      // グループが存在しない場合、新しいグループを作成してタスクを追加
      var newGroup = {
        "groupName": groupName,
        "taskList": [task]
      };
      outputData.ganttDataList.push(newGroup);
    }
  }

  return {
    ganttDataList: outputData.ganttDataList
  };
}

/**

* run.

* @param input {Array} - task input data.

* @return {Object} task result.

function run(input) {

// 出力値の初期化

var outputData = {

"ganttDataList": []

};

// 入力データを処理して出力値に変換

for (var i = 0; i < input.records.length; i++) {

var item = input.records[i];

var groupName = item.groupName;

var task = {

"id": item.taskId,

"name": item.taskName,

"startDate": item.startDate,

"endDate": item.endDate,

"progress": item.progress

};

// グループが存在するか確認

var groupIndex = -1;

for (var j = 0; j < outputData.ganttDataList.length; j++) {

if (outputData.ganttDataList[j].groupName === groupName) {

groupIndex = j;

break;

}

if (groupIndex !== -1) {

// グループが存在する場合、タスクを追加

outputData.ganttDataList[groupIndex].taskList.push(task);

} else {

// グループが存在しない場合、新しいグループを作成してタスクを追加

var newGroup = {

"groupName": groupName,

"taskList": [task]

};

outputData.ganttDataList.push(newGroup);

}

return {

ganttDataList: outputData.ganttDataList

};

}

ルーティングとマッピング

「エンティティデータの検索」タスクとJavaScript定義(JavaScript Definition) の「変数を整形(format variables)」を追加したら開始タスクから終了タスクまで繋げていきます。
下記順番でタスクを繋げてください。

開始 → エンティティデータの検索 → JavaScript定義 → 終了

JavaScript定義のマッピング設定

JavaScript定義をダブルクリックしてマッピング設定を開きます。
左上のセレクトボックスから「エンティティデータの検索」タスクの im_repositorySearchEntityData1 を選択して「入力を追加」ボタンで追加します。
下記に従ってマッピングを行ってください。

im_repositorySearchEntityData1	JavaScript定義(im_cookbook_234169)
task_id	taskId
group_name	groupName
task_name	taskName
start_date	startDate
end_date	endDate
progress	progress

終了タスクのマッピング設定

終了タスクをダブルクリックしてマッピング設定を開きます。
左上のセレクトボックスからJavaScript定義の im_cookbook_234169 を選択して「入力を追加」ボタンで追加します。
下記に従ってマッピングを行ってください。

im_cookbook_234169	終了タスク
ganttDataList	ganttDataList

IM-LogicDesigner の作業は以上です。変更を保存してください。
ガントチャート画面を開くとCSVファイルからインポートしたデータが表示されます。

以上でマスタメンテナンステンプレートを利用してタスク管理アプリを作成し、ガントチャート画面を追加する手順は終了です。
インポートしたサンプルデータは 2023/09/01 から 2023/10/31 の期間を表示すると画面に表示されます。
ガントチャート画面を開いてご確認ください。
ガントチャート画面のURLは以下です。ベースURL部は環境に合わせて変更してください。
http://localhost:8080/imart/accel-studio-app/im_cookbook_234169_ganttchart/ganttchart

ガントチャートテンプレートを使ってみる

目次

完成イメージ

サンプル

レシピ

マスタメンテナンステンプレートでアプリを作成する

エンティティの設定で「新しくエンティティを作成する(Create a new entity)」を選択

IM-Repository資材の設定で「簡易に設定する(Set up simply)」を選択

エンティティ名(Entity Name)とエンティティに紐づくテーブル名(Table Name Linked to Entity)に下記を入力します。

エンティティ情報(Entity Information)のテーブルに下記を入力します。

アプリケーションを作成します。

サンプルデータのインポート

作成したアプリにガントチャートを追加する

作成したアプリの詳細画面からリソースを追加する

IM-LogicDesigner の編集

概要

データを取得する

エンティティデータの検索タスクの追加

取得したデータを整形する

JavaScriptユーザ定義の追加

ルーティングとマッピング

JavaScript定義のマッピング設定

終了タスクのマッピング設定

ガントチャートテンプレートを使ってみる

目次

完成イメージ

サンプル

レシピ

マスタメンテナンステンプレートでアプリを作成する

エンティティの設定で「新しくエンティティを作成する(Create a new entity)」を選択

IM-Repository資材の設定で「簡易に設定する(Set up simply)」を選択

エンティティ名(Entity Name)とエンティティに紐づくテーブル名(Table Name Linked to Entity)に下記を入力します。

エンティティ情報(Entity Information)のテーブルに下記を入力します。

アプリケーションを作成します。

サンプルデータのインポート

作成したアプリにガントチャートを追加する

作成したアプリの詳細画面からリソースを追加する

IM-LogicDesigner の編集

概要

データを取得する

エンティティデータの検索タスクの追加

取得したデータを整形する

JavaScriptユーザ定義の追加

ルーティングとマッピング

JavaScript定義 のマッピング設定

終了タスクのマッピング設定

JavaScript定義のマッピング設定