CookBook

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

投稿日:

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_234169Accel Studio ではテーブル名の最初に im を付けることができません。

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

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

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

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

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

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


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

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

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)
利用範囲(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型に変更してください。
  • 返却値(Return Value)
    「JSON入力(JSON Input)」にペーストして決定後、startDate, endDate を date型に、progress をinteger型に変更してください。
  • JavaScript定義(JavaScript Definition)
    「スクリプト(Script)」にペーストしてください。
    group_name で各 task をまとめて返却値の形にします。

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

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

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

JavaScript定義 のマッピング設定

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

im_repositorySearchEntityData1JavaScript定義(im_cookbook_234169)
task_idtaskId
group_namegroupName
task_nametaskName
start_datestartDate
end_dateendDate
progressprogress

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

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

im_cookbook_234169終了タスク
ganttDataListganttDataList

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





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

-CookBook

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

IM-FormaDesignerにてブラウザのツールバーに任意のタイトルを設定する方法

このCookBookでは、IM-FormaDesignerにてブラウザーのツールバーに任意のタイトルを設定する方法について紹介しています。 設定方法は下記の2パターンです。 「スクリプト」アイテムを使 …

no image

Accel-Mart Plus on AWSにて複数のベースURLを利用する方法

製品標準の設定では、テナント一つにつき、一つの BaseURL のみが設定可能ですが、BaseUrlProvider インタフェースを実装することで、複数の BaseURL を持たせることができます。 …

no image

ViewCreatorとIM-FormaDesignerを利用して、既存テーブルのデータを表示する。

このCookBookでは、ViewCreatorとForma画面を利用して、既存テーブルのデータを表示する方法を説明します。 ViewCreatorでテーブルデータの一覧を表示し、IM-FormaDe …

no image

Formaの実行画面でアクセスログを収集する

このCookBookでは、Formaの実行画面で、アクセスログを収集する方法を紹介します。 サンプルでは、登録画面を開いた時点とデータ登録を実行した時点で、ログを収集します。 ログを収集することで、登 …

no image

BloomMaker で3桁区切りの数値フォーマットを自動で行うテキストボックスを作成する方法

この CookBook では、IM-BloomMaker を使用して、3桁区切りの数値フォーマットを自動で行うテキストボックスを作成する方法を紹介します。 ※この CookBook は 2021 Su …