複数ページのフォームで計算を設定する

✔ 概要

複数ページのフォームで、各ページの入力値を利用して計算する方法を説明します。

フォーム形式により、設定方法が異なります。

フォームの場合

ここでは以下の例で説明します。

設定方法

  • 複数のレイアウトを利用した複数ページ間の計算

    ワークフローシステムでは、複数のレイアウト(Formエディターのページ)を利用した複数ページのフォームを作成できます。
    ここでは、1ページ目の入力値と2ページ目の入力値をスクリプトで取得し、合計を3ページ目の入力テキストに表示する方法を説明します。

    ヒント

    フォーム上のオブジェクトを利用して計算を行う機能として、オブジェクトの [計算]タブ を利用する方法がありますが、 [計算]タブ で指定できるのは、同一レイアウト内のオブジェクトとなります。
    そのため、レイアウトを跨いだ計算には、本項のようにJavaScriptを利用します。

    オブジェクトの配置/設定

    • フォームにオブジェクトを配置します。
      ここでは例として、3ページのフォームを作成し、以下のオブジェクトを配置します。

      オブジェクトの概要 オブジェクト名
      1ページ目に配置する入力テキスト(入力用) ITEXT000
      2ページ目に配置する入力テキスト(入力用) ITEXT001
      3ページ目に配置する入力テキスト(計算結果格納用) ITEXT002
    • 配置したオブジェクトのプロパティに以下を設定します。

      • [フォーマット]タブ

        項目 設定値
        分類 数値

    JavaScriptファイルの登録

    • 以下のJavaScriptをテキストファイルに記述します。
      ここでは例として「calc」という名前の関数を記述します。
      拡張子を"js"にして任意のファイル名(半角英数字)で保存します。

      function calc(){
      
          // APIをインスタンス化
          var forms = new iftc.cwf.api.Forms();
      
          // 1ページ目の入力テキストの値(フォーマット除去)
          var val1 = forms.getRawValue(document.getElementsByName('ITEXT000')[0]);
          // 2ページ目の入力テキストの値(フォーマット除去)
          var val2 = forms.getRawValue(document.getElementsByName('ITEXT001')[0]);
      
          if(val1 == ""){
              val1 = 0;
          }
          if(val2 == ""){
              val2 = 0;
          }
      
          // 1ページ目の値と2ページ目の値の合計を3ページ目の入力テキストに設定
          // (フォーマットが設定された入力テキストの更新)
          forms.updateValue(document.getElementsByName('ITEXT002')[0] , Number(val1) + Number(val2));
      
      }
      

      注意

      登録するファイルはUTF-8形式で作成してください。

    • 作成したJavaScriptファイルを外部ファイルとしてサーバーおよびフォームに登録します。
      登録方法は 外部ファイルとしてJavaScriptを登録する を参照ください。

    オブジェクトの設定

    オブジェクトの配置/設定 で配置したオブジェクトのうち、ITEXT000(1ページに配置)とITEXT001(2ページに配置)のプロパティに以下を設定します。

    • [HTML]タブ

      項目 設定値
      JavaScript

      トリガー/JavaScriptイベントで以下を選択します。

      トリガー フォーカスを外す
      JavaScriptイベント名 onBlur

      トリガーを選択後、[編集]ボタンをクリックし、以下のスクリプトを設定します。

      // 計算処理呼び出し
      calc();
      

    フォームの保存

    Formエディターでフォームを保存します。

    動作確認

    Formエディター ツールバーの[HTMLプレビュー]からプレビューを表示します。
    プレビュー画面にて、計算処理が正常に動作することを確認してください。


  • マルチフォーム機能を利用した複数ページ間の計算

    マルチフォームが設定されたフォームでは、同じフォーム識別子のページを申請時に最大10ページまで追加できます。
    ここでは、同じフォーム識別子のページの「ページごとの明細計(小計)」「全ページ合計(総計)」を入力フォーム上に表示する方法を説明します。

    ◇作成イメージ(2ページ入力した例)


    フォーム・オブジェクトの配置/設定

    • フォームにマルチフォームの設定を行います。
      ここでは例として、最小1ページ、最大5ページのフォームを作成します。
      ツールバーの[マルチフォーム]ボタンをクリックし[フォーム設定]ダイアログで設定します。

      項目 設定値
      マルチフォーム設定 チェックあり
      最小・最大ページ数 1 - 5
      フォーム識別子 FORM01

    • フォームに以下4つのオブジェクトを配置します。
      ※ 罫線やラベルは記載していません。適宜配置してください。

      • 配置するオブジェクトの概要

        ※ 配置するオブジェクトの設定等は後述の「配置するオブジェクトの詳細」を参照

        オブジェクト オブジェクトの概要
        明細1 任意の数値を入力するオブジェクト
        明細2 任意の数値を入力するオブジェクト
        小計 ページごとに明細計(明細1 + 明細2)を表示するオブジェクト
        総計 全ページの合計を表示するオブジェクト
      • 配置するオブジェクトの詳細

        明細1

        オブジェクト種別 入力テキスト
        オブジェクト名 NUM001
        フォーマット 数値
        計算 計算の種類:計算しない
        HTML マルチフォームでオブジェクトをページごとに区別する:チェックあり

        明細2

        オブジェクト種別 入力テキスト
        オブジェクト名 NUM002
        フォーマット 数値
        計算 計算の種類:計算しない
        HTML マルチフォームでオブジェクトをページごとに区別する:チェックあり

        小計(ページごとの明細計)

        オブジェクト種別 入力テキスト
        オブジェクト名 PAGE_TOTAL
        フォーマット 数値
        計算 計算の種類:和(+)
        全ページ集計を行う:チェックなし
        計算に使うカラム:NUM001 , NUM002
        HTML マルチフォームでオブジェクトをページごとに区別する:チェックあり

        総計(全ページ合計)

        オブジェクト種別 入力テキスト
        オブジェクト名 ALL_TOTAL
        フォーマット 数値
        計算 計算の種類:和(+)
        全ページ集計を行う:チェックあり
        計算に使うカラム:NUM001 , NUM002
        HTML マルチフォームでオブジェクトをページごとに区別する:チェックなし

    フォームの保存・アップロード

    Formエディターでフォームを保存し、フォームをサーバーにアップロードします。

    ワークフローの設定

    作成したフォームをワークフローに設定します。

    注意

    マルチフォーム(ページを追加する)機能はFormエディターのプレビューでは確認できません。
    フォームをワークフローに設定し、ユーザー画面から確認する必要があります。

    動作確認

    ワークフローシステムにログインし、申請フォームを表示します。
    複数ページで計算処理が正常に動作することを確認してください。

旧バージョン形式のフォーム(JSP)の場合

ワークフローシステムでは、複数のレイアウト(Formエディターのページ)を利用した複数ページのフォームを作成できます。
ここでは、1ページ目の入力値と2ページ目の入力値をスクリプトで取得し、合計を3ページ目の入力テキストに表示する方法を説明します。

ヒント

フォーム上のオブジェクトを利用して計算を行う機能として、オブジェクトの [計算]タブ を利用する方法がありますが、 [計算]タブ で指定できるのは、同一レイアウト内のオブジェクトとなります。
そのため、レイアウトを跨いだ計算には、本項のようにJavaScriptを利用します。

設定方法

オブジェクトの配置/設定

  • フォームにオブジェクトを配置します。
    ここでは例として、3ページのフォームを作成し、以下のオブジェクトを配置します。

    オブジェクトの概要 オブジェクト名
    1ページ目に配置する入力テキスト(入力用) PTEXT000
    2ページ目に配置する入力テキスト(入力用) PTEXT001
    3ページ目に配置する入力テキスト(計算結果格納用) PTEXT002
  • 配置したオブジェクトのプロパティに以下を設定します。

    • [フォーマット]タブ

      項目 設定値
      分類 数値

JavaScriptファイルの登録

  • 以下のJavaScriptをテキストファイルに記述します。
    ここでは例として「calc」という名前の関数を記述します。
    拡張子を"js"にして任意のファイル名(半角英数字)で保存します。

    function calc(){
    
        // 1ページ目の入力テキストの値
        var val1 = document.getElementsByName('PTEXT000')[0].value;
        // 2ページ目の入力テキストの値
        var val2 = document.getElementsByName('PTEXT001')[0].value;
    
        if(val1 == ""){
            val1 = 0;
        }
        if(val2 == ""){
            val2 = 0;
        }
    
        // 1ページ目の値と2ページ目の値の合計を3ページ目の入力テキストに設定
        document.getElementsByName('PTEXT002')[0].value = Number(val1) + Number(val2);
    }
    

    注意

    登録するファイルはUTF-8形式で作成してください。

  • 作成したJavaScriptファイルを外部ファイルとしてサーバーおよびフォームに登録します。
    登録方法は 外部ファイルとしてJavaScriptを登録する を参照ください。

オブジェクトの設定

オブジェクトの配置/設定 で配置したオブジェクトのうち、PTEXT000(1ページに配置)とPTEXT001(2ページに配置)のプロパティに以下を設定します。

  • [JSP]タブ

    [登録済みのイベント一覧]で[追加]ボタンをクリックし、[JavaScriptの編集]ダイアログで以下を設定します。

    項目 設定値
    イベントタイミング onBlur
    実行するJavaScript
    // 計算処理呼び出し
    calc();
    

フォームの保存

Formエディターでフォームを保存します。

動作確認

Formエディター ツールバーの[HTMLプレビュー]からプレビューを表示します。
プレビュー画面にて、計算処理が正常に動作することを確認してください。

旧バージョン形式のフォーム(PDF)の場合

ワークフローシステムでは、複数のレイアウト(Formエディターのページ)を利用した複数ページのフォームを作成できます。
ここでは、1ページ目の入力値と2ページ目の入力値をスクリプトで取得し、合計を3ページ目の入力テキストに表示する方法を説明します。

ヒント

フォーム上のオブジェクトを利用して計算を行う機能として、オブジェクトの [計算]タブ を利用する方法がありますが、 [計算]タブ で指定できるのは、同一レイアウト内のオブジェクトとなります。
そのため、レイアウトを跨いだ計算には、本項のようにJavaScriptを利用します。

設定方法

オブジェクトの配置/設定

  • フォームにオブジェクトを配置します。
    ここでは例として、3ページのフォームを作成し、以下のオブジェクトを配置します。

    オブジェクトの概要 オブジェクト名
    1ページ目に配置する入力テキスト(入力用) PTEXT000
    2ページ目に配置する入力テキスト(入力用) PTEXT001
    3ページ目に配置する入力テキスト(計算結果格納用) PTEXT002
  • 配置したオブジェクトのプロパティに以下を設定します。

    • [フォーマット]タブ

      項目 設定値
      分類 数値

Acrobat JavaScript関数の登録

合計を計算する関数を登録します。

  • 1ページ目のFormエディターのメニューバーで[オプション - アクション(PDF) - JavaScript関数登録]を選択します。[追加]ボタンをクリックし以下を設定します。

    項目 設定値
    関数名

    任意の関数名

    例)calc

    関数名を入力後、フォーカスを外すと、Acrobat JavaScriptの入力欄が有効になり、関数の雛形が表示されます。
    Acrobat JavaScript

    以下のAcrobat JavaScriptを記述します。

    function calc(){
    
        // 1ページ目の入力テキストの値
        var val1 = this.getField("PTEXT000").value;
        // 2ページ目の入力テキストの値
        var val2 = this.getField("PTEXT001").value;
    
        if(val1 == ""){
            val1 = 0;
        }
        if(val2 == ""){
            val2 = 0;
        }
    
        // 1ページ目の値と2ページ目の値の合計を3ページ目の入力テキストに設定
        this.getField("PTEXT002").value = val1 + val2;
    }
    

    ヒント

    2ページ目以降には「JavaScript関数登録」は不要です。

  • 入力後、[OK]ボタンをクリックし[JavaScriptの編集]ダイアログ、[JavaScript関数登録]ダイアログを閉じます。

オブジェクトの設定

オブジェクトの配置/設定 で配置したオブジェクトのうち、PTEXT000(1ページに配置)とPTEXT001(2ページに配置)のプロパティに以下を設定します。

  • [アクション]タブ

    項目 設定値
    トリガー フォーカスを外す
    アクション

    [追加]ボタンをクリックし以下を設定します。

    アクションの選択 JavaScriptの実行
    JavaScriptの編集
    // 計算処理呼び出し
    calc();
    

フォームの保存

Formエディターでフォームを保存します。

動作確認

Formエディター ツールバーの[PDFプレビュー]-[入力時PDF]からプレビューを表示します。
プレビュー画面にて、計算処理が正常に動作することを確認してください。