JavaScriptを使用したデータ項目の操作

機能概要

JavaScriptを使用して、タスク処理時にデータ項目のデータを取得・編集・設定を行う方法を紹介します。
JavaScriptは、データ項目設定画面の[説明]プロパティまたは[高度なレイアウト]画面にて記述することができます。
JavaScriptの使用およびその動作に関する保証はしておりません(HTMLも同様)。
      使用する場合は、必ず本番環境と同条件のテスト環境であらかじめ動作確認を行ってください。

JavaScript、JQuery、ExtJSおよびHTMLの使用経験者を対象としています。

機能一覧

データ項目 データ項目を設定し、プロセスを通じてやりとりされるデータ項目を定義します。
データ項目ごとに、[名称]・[データタイプ]・[入力条件]などを設定します。
データタイプ詳細 データ項目の各データタイプに関するプロパティを説明します。
JavaScriptを使用した
データ項目の操作
JavaScriptを使用して、タスク処理時にデータ項目のデータを取得・編集・設定を行う方法を紹介します。
JavaScriptは、データ項目設定画面の[説明]プロパティまたは[高度なレイアウト]画面にて記述することができます。
高度なレイアウト オリジナルで作成したHTMLファイルを使用して、タスク処理画面のレイアウトをカスタマイズします。

仕様制限

記述場所

タスク処理画面のレイアウトにより、以下の2カ所どちらかに記述します。 データ項目設定画面に関する詳細は、「データ項目」を参照してください。

基本仕様

前提条件

DataSpider BPMでは、jQueryを使用することができます。
値の取得および設定などは、jQueryを使用すると容易であるため、ここではjQueryの使用を前提とした説明を行います。

データ項目の参照方法

データ項目の参照方法は、データタイプによって異なります。
また、[説明]プロパティと[高度なレイアウト]画面でも記述方法が異なります。
[高度なレイアウト]画面での記述の場合、主に以下の記述方法の差異があります。
各データ項目の値の取得および設定は基本的には以下の構文となります。
データタイプ データ項目参照
件名 input[name="title"]
文字型
-[単一行]
input[name="data[XX].input"]
文字型
-[複数行]
textarea[name="data[XX].input"]
数値型 input[name="data[XX].input"]
選択型
-[ラジオボタン]
-[チェックボックス]
input[name="data[XX].selects"]
チェックされている値:
input[name="data[XX].selects"]:checked
選択型
-[セレクトボックス]
select[name="data[XX].selects"]
選択型
-[検索セレクトボックス]
input[name="data[XX].selects"]
日付型 input[name="data[XX].input"]
日時型 日付部: yyyy-mm-dd
input[name="data[XX].input"]
時刻部: HH:MM
input[name="data[XX].time"]
ユーザ型 input[name="data[XX].email"]
組織型 input[name="data[XX].qgroupName"]
掲示板型 textarea[name="data[XX].input"]
上記の「XX」部分はデータ項目番号と呼ばれ、アプリ作成時にデータ項目を定義した順番に依存します。
       データ項目番号に関する詳細は、「データ項目」を参照してください。
データ項目を指定する際に、[フィールド名]で指定することはできません。
ユーザ型のデータ項目に値を設定した場合、画面が再描画されないため設定したメールアドレスに該当するユーザ名が表示されません。
[高度なレイアウト]画面の場合、選択型(ラジオボタン、チェックボックスおよびセレクトボックス)のデータ項目への参照は、Ext.getCmp(<データ項目のid>)を使用してください。
      <データ項目のid>は、タスク実行時のHTMLソースを確認してください。
データ項目番号に関する詳細は、「データ項目」を参照してください。

サンプル

値の取得とチェック 入力後すぐに入力値のチェックを行う
値の変換と設定 入力した全角数字を半角数字に変換する
状態の変更 選択した内容によって、入力項目を表示・非表示にする
属性の変更 選択した内容によって、表示する画像を変更する
APIの実行 APIの実行結果を入力値として設定する
サンプルコードでは、データ項目の操作を行う記述のみを抜粋しております。

値の取得とチェック: 入力後すぐに入力値のチェックを行う

シナリオ

  1. 入力後、次の項目にフォーカスを移動する際に入力値を取得し、入力値をチェックします。
  2. 入力した値が10文字以上の場合は、エラーメッセージを表示します。

実装

[説明]プロパティでの記述例
入力値が10文字以上の場合はエラーとします。
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('input[name="data[0].input"]').change(function(){ (1) var inputVal = jQuery('input[name="data[0].input"]').val(); (2) if (inputVal.length > 10){ (3) alert('入力値:' + inputVal + '¥n' + '内容:' + '入力値は10文字以内にしてください。'); (4) } }); }); </script>
[高度なレイアウト]画面での記述例
入力値が10文字以上の場合はエラーとします。
<script type="text/javascript"> Ext.onReady(function(){ setTimeout(function(){ myFunction(); }, 1500); function myFunction(){ jQuery("div#data-0").change(function(){ (1) var inputVal = jQuery('input[name="data[0].input"]').val(); (2) if (inputVal.length > 10){ (3) alert('入力値:' + inputVal + '¥n' + '内容:' + '入力値は10文字以内にしてください。'); (4) } }); } }); </script>
(1) 値が変更された際のイベントハンドラ(change)を記述しています。
(2) valメソッドにて、入力した値を取得しています。
(3) 10文字以上の入力があった場合の判定をしています。
(4) alertメソッドにて、エラーメッセージを表示しています。

実行結果


10文字以上の値を入力します。


エラーメッセージが表示されます。

値の変換と設定: 入力した全角数字を半角数字に変換する

シナリオ

  1. 入力後、次の項目にフォーカスを移動する際に入力値を取得します。
  2. 入力値に全角数字が存在している場合は、半角数字に変換します。

実装

[説明]プロパティでの記述例
全角数字を半角数字に変換します。
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('input[name="data[1].input"]').change(function(){ (1) var fullTxt = new Array('1', '2', '3', '4', '5', '6', '7', '8', '9', '0'); var halfTxt = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 0); var inputVal = jQuery('input[name="data[1].input"]').val(); (2) var cnt; while(inputVal.match(/[0-9]/)){ (3) for(cnt = 0; cnt < fullTxt.length; cnt++){ inputVal = inputVal.replace(fullTxt[cnt], halfTxt[cnt]); (4) } } jQuery('input[name="data[1].input"]').val(inputVal); (5) }); }); </script>
[高度なレイアウト]画面での記述例
全角数字を半角数字に変換します。
<script type="text/javascript"> Ext.onReady(function(){ setTimeout(function(){ myFunction(); }, 1500); function myFunction(){ jQuery("div#data-1").change(function(){ (1) var fullTxt = new Array('1', '2', '3', '4', '5', '6', '7', '8', '9', '0'); var halfTxt = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 0); var inputVal = jQuery('input[name="data[1].input"]').val(); (2) var cnt; while(inputVal.match(/[0-9]/)){ (3) for(cnt = 0; cnt < fullTxt.length; cnt++){ inputVal = inputVal.replace(fullTxt[cnt], halfTxt[cnt]); (4) } } jQuery('input[name="data[1].input"]').val(inputVal); (5) }); } }); </script>
(1) 値が変更された際のイベントハンドラ(change)を記述しています。
(2) valメソッドにて、入力した値を取得しています。
(3) 全角の数字が存在するか確認しています。
(4) 全角の数字を半角の数字に変換しています。
(5) valメソッドにて、変換した値を設定しています。

実行結果


全角数字を含んだ値を入力します。


フォーカスを移動すると、半角数字に変換されます。

状態の変更: 選択した内容によって、入力項目を表示・非表示にする

シナリオ

  1. [アンケート結果]を以下のラジオボタンから選択します。
    1. A,とても参考になった
    2. B,参考になった
    3. C,あまり参考にならなかった  ※初期値
    4. D,まったく参考にならなかった
    5. E,その他
  2. 選択した結果により、[理由/その他]の項目が表示・非表示となります。
    • 「参考になった」以上の場合: [理由/その他]の項目が非表示になります。
    • 「あまり参考にならなかった」以下の場合: [理由/その他]の項目が表示されます。

実装

[説明]プロパティでの記述例
結果により、他の項目を表示・非表示にします。
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('input[name="data[2].selects"]').change(function(){ (1) var selectsVal = jQuery('input[name="data[2].selects"]:checked').val(); (2) if (selectsVal == 'A' || selectsVal == 'B'){ jQuery('textarea[name="data[3].input"]').hide(); (3) } else { jQuery('textarea[name="data[3].input"]').show(); (4) } }); }); </script>
[高度なレイアウト]画面での記述例
結果により、他の項目を表示・非表示にします。
<script type="text/javascript"> Ext.onReady(function(){ setTimeout(function(){ myFunction(); }, 1500); function myFunction(){ jQuery("div#data-2 input").click(function(){ (1) var selectsId = this.id.match(/radiofield-[0-9]+/); (2) var selectsVal = Ext.getCmp(selectsId).inputValue; (2) if (selectsVal == 'A' || selectsVal == 'B'){ jQuery('textarea[name="data[3].input"]').hide(); (3) } else { jQuery('textarea[name="data[3].input"]').show(); (4) } }); } }); </script>
(1) 値が変更された際のイベントハンドラ(change)を記述しています。
      [高度なレイアウト]画面での選択型(ラジオボタン)は、changeイベントをハンドリングできないため、ここではinputに対してclickイベントに記述しています。
(2) valメソッドにて、選択した値を取得しています。
      [高度なレイアウト]画面での選択型(ラジオボタン)は、ラジオボタンのidを取得し、inputValueにて選択した値を取得しています。
           選択型データ項目(検索セレクトボックス以外)のid取得は、以下を参考にしてください。 (3) 「とても参考になった」(A)または「参考になった」(B)の場合は、[理由/その他]項目を非表示にしています。
(4) 上記以外を選択した場合は、[理由/その他]項目を表示しています。

実行結果


「参考になった」を選択すると、[理由/その他]項目が非表示(入力不可)となります。


「まったく参考にならなかった」を選択すると、[理由/その他]項目が表示(入力可)されます。

属性の変更: 選択した内容によって、表示する画像を変更する

シナリオ

  1. [評価結果]を以下のラジオボタンから選択します。
    1. excellent,非常に良い
    2. good,良い
    3. usual,普通  ※初期値
    4. nogood,悪い
    5. bad,非常に悪い
  2. 選択した結果に応じて、表示するアイコン画像が変更されます。
    1. 非常に良い: face_mark_excellent.pngを表示します。
    2. 良い: face_mark_good.pngを表示します。
    3. 普通: face_mark_usual.pngを表示します。
    4. 悪い: face_mark_nogood.pngを表示します。
    5. 非常に悪い: face_mark_bad.pngを表示します。

実装

[説明]プロパティでの記述例
評価結果により、表示する画像を変更します。
<br> <img id="faceimg" src="http://store.testserver.com/image_store/face_mark_pic/face_mark_usual.png" width="40" height="40" alt="顔マーク"> <br> <br> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('input[name="data[4].selects"]').change(function(){ (1) var selectsVal = jQuery('input[name="data[4].selects"]:checked').val(); (2) var picUrl = 'http://store.testserver.com/image_store/face_mark_pic/face_mark_' + selectsVal + '.png'; (3) jQuery('#faceimg').attr('src', picUrl); (4) }); }); </script>
[高度なレイアウト]画面での記述例
評価結果により、表示する画像を変更します。
<br> <img id="faceimg" src="http://store.testserver.com/image_store/face_mark_pic/face_mark_usual.png" width="40" height="40" alt="顔マーク"> <br> <br> <script type="text/javascript"> Ext.onReady(function(){ setTimeout(function(){ myFunction(); }, 1500); function myFunction(){ jQuery("div#data-4 input").click(function(){ (1) var selectsId = this.id.match(/radiofield-[0-9]+/); (2) var selectsVal = Ext.getCmp(selectsId).inputValue; (2) var picUrl = 'http://store.testserver.com/image_store/face_mark_pic/face_mark_' + selectsVal + '.png'; (3) jQuery('#faceimg').attr('src', picUrl); (4) }); } }); </script>
(1) 値が変更された際のイベントハンドラ(change)を記述しています。
      [高度なレイアウト]画面での選択型(ラジオボタン)は、changeイベントをハンドリングできないため、ここではinputに対してclickイベントに記述しています。
(2) valメソッドにて、選択した値を取得しています。
      [高度なレイアウト]画面での選択型(ラジオボタン)は、ラジオボタンのidを取得し、inputValueにて選択した値を取得しています。
           選択型データ項目(検索セレクトボックス以外)のid取得は、以下を参考にしてください。 (3) 選択した値から、「http://store.testserver.com/image_store/face_mark_pic/face_mark_<選択した値>.png」のURLを作成します。
(4) 「faceimg」というidが付けられたimgタグの[src]属性の値を、上記で作成したURLに変更します。

実行結果


「良い」を選択すると、それに対応した画像が表示されます。


「非常に悪い」を選択すると、それに対応した画像が表示されます。

APIの実行: APIの実行結果を入力値として設定する

シナリオ

  1. タイトルに値を入力します。
  2. 次の項目にフォーカスを移動する際に、実行者自身のメールアドレスを取得し、担当者メールアドレス入力フィールドに値を設定します。

実装

ここでは、実行者自身のユーザ情報を取得するため、DataSpider BPMが提供しているシステム設定APIから、"/API/User/Quser/self"を使用します。
APIにより実行に必要な権限が異なります。タスク処理ユーザがそのAPIを実行可能かどうかを確認して使用してください。
実行者自身のユーザ情報を取得するAPIに関する詳細は、
「システム設定API」-「自身のユーザ情報を取得する: /API/User/Quser/self 」を参照してください。

[説明]プロパティでの記述例
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('input[name="title"]').change(function(){    (1)
            jQuery.getJSON("/userweb/API/User/Quser/self", function(json){    (2)
                jQuery('input[name="data[5].input"]').val(json.quser.email);    (3)
            });
        });
    });
</script>
[高度なレイアウト]画面での記述例
<script type="text/javascript">
    Ext.onReady(function(){
        setTimeout(function(){
            myFunction();
        }, 1500);

        function myFunction(){
            jQuery("div#data-title").change(function(){    (1)
                jQuery.getJSON("/userweb/API/User/Quser/self", function(json){    (2)
                    jQuery('input[name="data[5].input"]').val(json.quser.email);    (3)
                });
            });
        }
    });
</script>
(1) 値が変更された際のイベントハンドラ(change)を記述しています。
(2) getJSONメソッドを使用し、実行者自身のユーザ情報を取得するAPIを実行します。実行結果はjson形式で取得します。
(3) 取得したjsonからメールアドレスを指定(json.quser.email)し、その値をvalメソッドにてデータ項目に設定します。

実行結果


タイトルに値を入力後に、実行者自身のメールアドレスを表示しています。