ガントチャートを使うには

109 views

画面と操作概要

ガントチャート画面

可能なこと

  • タスクの追加・削除を行います
  • 追加・削除時はデータベースには保存せずにJSONデータとして保管されています
  • “保存ボタン”を押下することでJSONデータから実データベースに更新されます
  • 日付を更新するのみでタスクの表示日付を移動します。
  • ガントチャートは親、子の2階層までとなっております。



タスクバー中央部をドラッグ&ドロップすることでタスクの開始日、終了日を同時に移動させることができます。

また両サイドのハンドルをそれぞれドラッグ&ドロップすることで開始日、終了日をそれぞれ移動させることができます。
タスクバーをダブルクリックすることで詳細画面が開きます。

詳細画面

詳細の画面では親ID、表示順番、タスク名、開始日、終了日が必須です。
それ以外についてはカスタマイズ可能です。

タスクを作成する前に・・・

Magic xpa をインストールしたままではグラフのウィジェットを持っていない状態です。
そのためウィジェットを追加する必要があります。
フォルダをダウンロードして設定する必要がありますので、下記に示す記事へアクセスし手順を進めてください。
カスタムウィジェットの登録方法

タスクの概要



ガントチャートのタスクは次の構成で作成いたします。

タスク名 解説
メインタスク:G0040(オンライン) ガントチャート部分でタスクバーの操作、データベースへの登録などを行います。
サブタスク:Detail(オンライン) ガントチャートのタスクバーをクリックした場合やタスクの新規追加を行った場合に詳細を登録する画面です。
サブタスク:Blob作成(バッチ) ガントチャートに渡すJSONデータを作成いたします。
サブタスク:データ削除処理(バッチ) データベースからタスクを削除いたします。
サブタスク:データ挿入処理(バッチ) JSONデータを元にデータベースへ登録を行います。

プログラム作成の手順

今回のプログラム作成手順では次の順番で作成します。

  1. データリポジトリを準備する
  2. メインタスクとサブタスクを作成しタスク特性を設定する
  3. メインタスク:G0040の詳細を作りこむ
  4. サブタスク:Detailの詳細を作りこむ
  5. サブタスク:Blob作成の詳細を作りこむ
  6. サブタスク:データ削除処理の詳細を作りこむ
  7. サブタスク:データ挿入処理の詳細を作りこむ
  8. メニューへの追加設定をする
  9. SmartUXstudio:ページを表示する設定を行う
  10. SmartUXstudio:ガントチャートウィジェットを配置する
  11. SmartUXstudio:タイプスクリプトファイルを編集する

データリポジトリの準備

データリポジトリへ次のテーブルを準備します。

項目名 書式 内容
(任意)プロジェクトIDや顧客IDなど 任意(ペットショップデモではN8) 複数のガントチャートが必要な場合
ID N プロジェクトID毎のユニーク番号
pID N 親番号。指定がない場合は0
Sort N 全体の表示順番
Task A タスク内容
DateFrom D 開始日
DateTo D 終了日

タスクを作成する

G0040(タスク特性)



汎用:タスクタイプをWeb Clientにします。



インタフェース:ルートに「G0040」を設定します。



データ:トランザクションモードを「なし」、空のデータビュー許可なども「No」に設定します。

Detail(タスク特性)



汎用:タスクタイプをWeb Clientにします。



データ:トランザクションモードを「なし」、空のデータビュー許可なども「No」に設定します。

Blob作成(タスク特性)



汎用:タスクタイプをバッチ
DataViewToJSONはエディタに定義された項目を基に、JSON形式のBLOBオブジェクトを作成しますのでデータをループさせることはありません。

データ削除処理(タスク特性)



ガントチャートデータを削除いたします。
汎用:初期モードを削除にします。

データ挿入処理(タスク特性)


汎用:タスクタイプをバッチ
メインソースがなく、登録を1回行ったら終了させたいのでタスク終了条件をYESチェック時期を後置にしています。

G0040タスクを作成する

データビュー

<見本>

<記述内容>

※メインソースは使いません

VCustomer


顧客IDとして利用します。
別画面にてプロジェクトを指定し、ガントチャートのみのプログラムを作成する場合はこの部分をパラメーターにします。

変数名 解説
vIndex 詳細画面のIDに渡すキーを設定します。
タスクバーをダブルクリックすることで、タスクバーに設定されたIDをvIndexに代入いたします。
新規追加の場合はvIndexに「0」を代入いたします。
BlobGuntt ガントチャートのJSONデータが保持されています。
インスタンスにはM=マルチを設定してください。
初めにBlob形式で作成し、後ほどJSON形式に戻します。
なぜならJSON形式で作成するとフォームエディター上でBlobGunttが表示されず、設定できない状態になるからです。
そのためォーム画面の選択肢に登場させてからJSON形式に戻します。
btnSearch 顧客ID条件設定後にBlob作成するために押下するボタンです。
クリックすることでBlob作成バッチが起動します。
btnSave データ削除処理バッチとデータ挿入処理バッチが動きます。
動くことでJSONデータを実データベースに保存いたします。
btnClick 詳細画面を呼ぶボタンです。
HTML上には存在しませんがタスクバーをダブルクリックすると、TypeScript側のSimulateClick処理で”btnClickをクリックする”イベントを発行しています。
btnCancel 必要ありません。
btnDelete 該当顧客IDのガントチャートを削除いたします。
JSONCnt JSONデータの数を一時的に保存いたします。
count インクリメント用変数
Rturn 必要ありません
顧客名取得

顧客番号をキーにして顧客名を紹介リンクで所得します。
顧客番号の位置づけは変数VCustomerを選択し、終了にも設定します。

ガントチャートデータ存在チェック

データがある場合は表示しますが、無い場合はエラー文章を表示します。
判定を論理で判断し、ガントチャートデータの中から紹介します。
顧客番号の位置づけは変数VCustomerを選択し、終了にも設定します。

フォーム

<見本>

顧客名を配置した場合、そのままだとコントロール名が日本語なのでSmartUXで利用する際にエラーとなります。
コントロール名を「CustomerName」というようにアルファベット名に書き換えます。

ロジック

<見本>

<記述内容>

V_btnSearchクリック時

  1. BlobGuntt初期値を入れる。
    初期値を入れないと、データがある得意先からデータが無い得意先を選択した場合に以前のデータが残ってしまいます。
  2. Blob作成バッチをコール。
    ガントチャートのデータが存在する場合、BlobGunttにJSONデータを挿入するBlob作成バッチをコールします。
    これによって画面に配置してあるV_BlobGunttコントロールに値が設定されます。
  3. CallJS(‘onTextareaChange’)
    TypeScriptのonTextareaChange関数を起動して画面にガントチャートのデータを反映させます。
    onTextareaChange関数に関しては後述いたします。
V_btnClickクリック時



タスクバー中央部をダブルクリックした場合にコールされます。
ダブルクリックイベントはTypeScript側で設定いたします。

V_btnDeleteクリック時


ガントチャートデータの削除ボタンクリック時に起動し、バッチファイルのデータ削除処理を動かします。

V_btnSaveクリック時

  1. データベースから該当ガントチャートを削除
  2. カウンターのクリア
  3. JSONデータ{“data”:[{・・・以下の個数を数えたものをJSONCnt変数に代入する
  4. カウンター < JSONCntのうちはループさせる

  5. 数字10桁のIDを宣言
  6. JSONデータ{“data”:[{“ID”:”T+1”},{“ID”:”T+2”}・・・]
    のIDの値を次々と読み取って5.で宣言したIDに代入する。
  7. データ挿入処理をコールする。
    パラメータは「顧客コード」「先ほど取得したID」「カウンター」をデータ挿入処理バッチに渡す。
  8. countをインクリメントする。
  9. 「保存しました」のメッセージを表示

Detailタスクを作成する

データビュー

<見本>

<記述内容>

変数名 解説
vID タスクバーをダブルクリックすることで受け取るIDパラメータ
新規作成の場合は0を取得します。
BtnUpdate 更新ボタン
BtnDelete 削除ボタン
vpID タスクのユニークID
vSort 表示順番
vTask タスク名
vDateFrom タスク開始日
vDateTo タスク終了日
MaxID 現チャートのIDの最大値

フォーム

<見本>



ウィンドウタイプをオーバーレイに変更する。

ロジック

タスク前


<if>の場合
vIndex(G0040で設定されたIndex番号)が0の場合は新規タスクとなり、それ以外は修正タスクとなりエディタコントロールに値がセットされます。
たとえばvTask(タスク名)ですと
JSONFind(‘L’VAR,’/data’,’ID’,vIndex)でJSONデータで {“ID”:vIndexの値}を探して行を確定します。
JSONGet(‘L’VAR,’/data[確定した行]/Task’)でJSONデータから「確定した行」のTaskの値をvTaskに代入しております。
<Else>では、開始日(vDateFrom)と終了日(vDateTo)に「Date()」を設定します。

V_BtnUpdateボタンクリック時


更新ボタンクリック時の処理です。

タスク名であれば
JSONModify(‘L’VAR,’/data[‘ & Trim(Str(JSONFind(‘L’VAR,’/data’,’ID’,vIndex),’10’))&’]/Task’,vTask)
というように画面上の「vTask」の値を該当「vIndex」の行の「{“Tsk”:””}」に値を設定しタスクを閉じます。
vpIDの場合であれば
JSONModify(‘L’VAR,’/data[‘ & Trim(Str(JSONFind(‘L’VAR,’/data’,’ID’,K),’10’))&’]/pID’,BC)

もし新規タスクの場合はIDの最大値を算出して+1したものをIDに設定いたします。
次にJSONInsertを使用し現在のJSONデータに対してデータを追加いたします。
項目を追加する場合はこちらにも追加が必要です。

V_BtnDeleteボタンクリック時


削除時にはJSONDelete関数にてJSONデータから該当行を削除致します。

Blob作成タスクを作成する

データビュー


顧客番号で範囲指定したデータをDataViewToJSONでJSON形式に変更します。
ロジック側で「'{“data”:’ & DataViewToJSON(0,Trim(Z),’@’)&’}’」とdata要素の入れ子にしています。

ロジック


コールプログラムパラメーター

オンラインタスクG0040にて宣言しているBlobGunttに対して
‘{“data”:’ & DataViewToJSON(0,Trim(Z),’@’)&’}’
JSONデータを代入しています。

データ削除処理タスクを作成する

データビュー


顧客番号の範囲で削除を行います。

データ挿入処理タスクを作成する

データビュー


登録リンクにて行を挿入いたします。

代入する値としてTask(タスク名)を例に挙げますと
JSONGet(‘L’VAR,’/data[‘ & Trim(Str(BB,’10’)) & ‘]/Task’)
JSONからタスク名を抽出してデータベースに代入しています。

メニューから開く設定

以上でプラグラムの動きを作成し終わりました。
しかしこのままでは作成したページへのルートが作られておらず、たどり着く道筋がありません。
そのためサイドメニューへページを追加し開けるようにしましょう。
追加方法は、以下のURLから参照ページをご覧ください。
簡単なプログラムを構築する際の「メニューへの追加」

SmartUX側での編集

ルートを追加しページを追加する

プログラムをSmartUX側で編集するために最初に必要な作業となります。
また、ウィジェットの基本的な配置方法やマッピングについても説明しているため追加方法とともに、以下のURLから参照ページをご覧ください。
簡単なプログラムを構築する際の「SmartUX側」
初めに画面に必要なウィジェットを配置します。
G0040の画面は次の完成画面をご参考ください。

Detailの画面は次の完成画面をご参考ください。

Detailの画面の場合、デフォルトの設定ではオーバーレイ画面が300px四方で固定されているため、画面を広げる作業が必要です。
詳しい方法を次のページからご参照ください。
オーバーレイ画面のサイズを変更するには

ガントチャートウィジェットを配置


ガントチャートウィジェットをドラッグ&ドロップで配置します。

アウトラインの「ganttJson」をクリックし、プロパティシートを表示させるアイコンをクリックします。

DataにV_BlobGunttを設定(マッピング)いたします。

タイプスクリプト「G0040.component.ts」の編集


6行目のinport群の下に以下の2行を追記してください。
(6行目とは「import { TaskBaseMagicComponent, magicProviders } from “@magic-xpa/angular”;」のこと)

import { GanttChartComponent } from '../../../msj/gantt-chart.component';
import { ViewChild } from '@angular/core';

次に15行目の「export class G0040 ~」群の中にある以下の記述をご確認ください。

  override createFormControlsAccessor(formGroup: FormGroup) {
this.mgfc = new MgFormControlsAccessor(formGroup, this.magicServices);
}

この記述の直下に以下のコードを記述してください。

  
  onEvent = ($event) => {
    if ($event.event == "click") {
      this.mg.setValueToControl(this.mgc.V_vIndex,$event.id);
      $event.json = JSON.stringify($event.json);
      this.mg.setValueToControl(this.mgc.V_BlobGuntt,$event.json);
    }

    if ($event.event == "dblclick") {
      this.mg.setValueToControl(this.mgc.V_vIndex,$event.id);
      this.mg.simulateClick(this.mgc.V_btnClick);
    }
    if ($event.event == "save") {
      $event.json = JSON.stringify($event.json);
      this.mg.setValueToControl(this.mgc.V_BlobGuntt,$event.json);
      this.mg.simulateClick(this.mgc.V_btnSave);
    }
  };
 
  @ViewChild('ganttChart') ganttChart: GanttChartComponent;
  onTextareaChange(): void {
    
    if (this.ganttChart) {
      this.ganttChart.watchTextAreaForJSON();
    }
  }

追加した後の画面は次のようになります。

「G0040.component.ts」への記述解説

解説
$event.event == “click” タスクバーをクリックした場合の処理

this.mg.setValueToControl(this.mgc.V_vIndex,$event.id);
V_vIndexにIDを設定する

$event.event == “dblclick” タスクバーをダブルクリックした場合の処理

this.mg.simulateClick(this.mgc.V_btnClick);
V_btnClickをクリックしたことにする

$event.event == “save” 保存ボタンをクリックした場合の処理

this.mg.simulateClick(this.mgc.V_btnSave);
V_btnSaveをクリックしたことにする

onTextareaChange(): void {
                    if (this.ganttChart) {
            this.ganttChart.watchTextAreaForJSON();
          }
        }
      

JSONデータを元にガントチャートを表示する

Share this Article

ガントチャートを使うには

Or copy link

CONTENTS