Accel-Mart Quick チュートリアルガイド 第14版 2023-02-08

4.4.5. 表形式のフォームを作成する

ツールキットの入力アイテムである「グリッドテーブル」を利用して表形式のフォームを作成する方法を解説します。
このチュートリアルでは、「申請者」が備品の単価と数量を入力すると、金額とその合計金額が自動で入力される「備品購入申請書」を作成します。
ワークフローを作成するユーザのロールには「Accel-Mart Quick ワークフロー管理者」を設定する必要があります。
../../../_images/table_13.png
図:作成するフォーム

コラム

ユーザへのロールの設定方法は以下を参照してください。

4.4.5.1. 想定されるユースケース

表形式の入力フォームを作成したい場合にご使用いただけます。

4.4.5.2. ワークフローの名前を登録する

ワークフロー「【チュートリアル】備品購入申請フロー」を新規作成します。
登録方法の詳細は「簡単なワークフローを作成する」-「ワークフローの名前を登録する」を参照してください。
../../../_images/table_2.png
図:登録するワークフロー

4.4.5.3. ルート定義を設定する

ルート定義を設定します。
設定方法の詳細は「簡単なワークフローを作成する」-「ルート定義を設定する」を参照してください。
../../../_images/table_3.png
図:設定するルート定義

4.4.5.4. 「申請者」のフォームを設定する

「申請者」で申請するための画面を設定します。
  1. 「申請者」ノードをダブルクリックして、「フォーム-登録」画面を表示します。

    ../../../_images/table_4.png
    図:「IM-BIS-フロー編集」
  2. フォーム名に「備品購入申請書フォーム」と入力し、「登録」ボタンをクリックします。

    ../../../_images/table_5.png
    図:「フォーム-登録」

4.4.5.4.1. アイテムを設定する

ツールキットからフォームで使用するアイテムを配置、見た目を設定します。
  1. 「ツールキット」をクリックします。

  2. 「表示アイテム」から「見出し」、「共通マスタアイテム」から「ユーザ選択」「所属組織選択」を配置します。

    ../../../_images/table_16.png
    図:表示アイテムと共通マスタアイテムの配置
  3. 「入力アイテム」から「日付」「グリッドテーブル」「関数」を配置します。

    ../../../_images/table_14.png
    図:入力アイテムの配置
  4. 「ボタンアイテム」から「ボタン(処理モーダル)」「ボタン(戻る)」を配置します。

    ../../../_images/table_17.png
    図:ボタンアイテムの配置
  5. 配置したアイテムのラベルを図のように設定します。

    ../../../_images/table_6.png
    図:アイテムの配置

    コラム

    • グリッドテーブル
    表の項目に入力するためのアイテムです。
    フィルタで表示内容を絞り込んでの表示やページャー機能を利用できます。
    詳細は以下を参照してください。

4.4.5.4.2. グリッドテーブルのプロパティを設定する

グリッドテーブル「備品購入」の列として、入力項目「購入日」「品名」「単価」「数量」「金額」を設定します。
  1. 「備品購入」をダブルクリックし、「プロパティ」を表示します。

  2. 「列の定義」をクリックします。

  3. plus_icon をクリックして、グリッドテーブルで入力する項目を追加します。

  4. 「列名」「タイプ」を図のように設定します。

    ../../../_images/table_8.png
    図:「備品購入」-「プロパティ」-「基本設定」
  5. 設定した内容が図のように表示されます。

    ../../../_images/table_15.png
    図:入力項目設定後の備品購入
  6. 「詳細設定」タブをクリックし、「テーブル識別ID」に「table」と入力します。

    この「テーブル識別ID」は、後述する「合計金額」の算出で使用します。
    ../../../_images/table_7.png
    図:「備品購入」-「プロパティ」-「詳細設定」
グリッドテーブル「備品購入」の列の詳細を設定します。
  1. 「購入日」の column_definition_settings_icon をクリックし、「列プロパティ」タブに遷移します。

  2. 「フィールド識別ID」が未入力になっているため、「date」と入力します。

    ../../../_images/table_9.png
    図:「備品購入」-「プロパティ」-「購入日」-「列プロパティ」
  3. 「基本設定」タブをクリックして「列の定義」へ戻ります。

  4. 同様の手順で、「単価」の「フィールド識別ID」に「price」、「フィールド初期値」に「0」と入力します。

    ../../../_images/table_18.png
    図:「備品購入」-「プロパティ」-「単価」-「列プロパティ」
  5. 「数量」の「フィールド識別ID」に「quantity」、「フィールド初期値」に「1」と入力します。

    ../../../_images/table_19.png
    図:「備品購入」-「プロパティ」-「数量」-「列プロパティ」

    コラム

    「フィールド初期値」にあらかじめ数値を入力しておくことで、単価や数量が未入力だった場合に「金額」の式結果が「NaN」と表示されることを防ぎます。
  6. 「単価」(フィールド識別ID「price」)と「数量」(フィールド識別ID「quantity」)の積を算出するため、「金額」の「式」に「price * quantity」と入力します。

  7. 後述する「合計金額」で利用するため、「式評価結果のデータ型」に「数値」、「フィールド識別ID」に「amount」と入力します。

    ../../../_images/table_10.png
    図:「備品購入」-「プロパティ」-「金額」-「列プロパティ」

    コラム

    あらかじめ指定した値や、フォーム内の他の画面アイテムの値などを参照して処理するための計算や関数を設定します。
    他の画面アイテムの値を参照する場合には、参照する画面アイテムの「フィールド識別ID」(※)で指定します。
    固定の文字を指定する場合は、ダブルクォーテーション「”」で囲みます。
    ※画面アイテム「複数行文字列」、「リッチテキストボックス」は対象外です。

    アイテムごとの「利用できる演算子、関数」の詳細は、「ツールキットで利用できるアイテム(ワークフロー)」か、各アイテムの「プロパティ」の help_icon から参照してください。
  8. 「単価」に入力した値と「数量」に入力した値の積が、「金額」に自動で入力されるようになりました。

4.4.5.4.3. 関数のプロパティを設定する

グリッドテーブル「備品購入」の列である「金額」の合計値が、「合計金額」へ自動入力されるように設定します。
  1. 「合計金額」をダブルクリックして「プロパティ」を表示します。

  2. グリッドテーブル「備品購入」(テーブル識別ID「table」)の列である「金額」(フィールド識別ID「amount」)の合計値を算出するため、「式」に「sum(table@amount)」と入力します。

  3. 「最大入力値」が「500」になっているため、「9999999999」と入力します。

    ../../../_images/table_11.png
    図:「合計金額」-「プロパティ」-「基本設定」

    コラム

    • 数値系関数「sum(合計)」の指定方法
    「sum({合算対象の数値}, …)」の書式で書きます。

    合算対象の数値は、固定の数値、または、数値が入力された画面アイテムのフィールド識別IDを指定します。
    明細テーブルの列を対象に合算する場合には、「sum(@合算対象列のフィールド識別ID)」で列を対象に指定できます。
    グリッドテーブルの列を対象に合算する場合には、「sum(テーブル識別ID@合算対象列のフィールド識別ID)」で列を対象に指定できます。
    対象に使用できる画面アイテムの入力値、固定の値のデータ型は数値のみです。
  4. 「金額」の合計値が「合計金額」に入力されるようになりました。

  5. 最後に「更新」をクリックして、フォームの設定内容を保存します。

4.4.5.5. 申請画面の画面設定を他の画面と共有する

ここまでの手順で作成した画面を、「承認者」の承認時にも参照できるように設定します。
設定方法の詳細は「簡単なワークフローを作成する」-「申請画面の画面設定を他の画面と共有する」を参照してください。
../../../_images/table_12.png
図:共有完了後のフロー

4.4.5.6. ワークフローを申請する

フォームに設定した「備品購入申請書」が申請時に画面として表示されることを確認します。
また、「単価」「数量」に任意の値を入力すると、「金額」と「合計金額」が自動で入力されることを確認します。
  1. メニューの「申請」から、「申請一覧」画面を表示します。

  2. 「【チュートリアル】備品購入申請フロー」をクリックします。

  3. 「備品購入申請書」画面が表示されます。

  4. 「単価」「数量」に任意の値を入力すると、「金額」と「合計金額」が自動で入力されることが確認できます。

    ../../../_images/table_13.png
    図:「備品購入申請書」
  5. 「申請」ボタンをクリックし、申請します。