完成イメージ

レシピ

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

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

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 ではマスタメンテナンスで管理するデータをガントチャート画面に表示するため、サンプルデータの生成処理は削除します。

概要

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

データを取得する

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)

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

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

/**
 * 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 を選択して「入力を追加」ボタンで追加します。
下記に従ってマッピングを行ってください。

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

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

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

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