データ項目 |
データ項目を設定し、プロセスを通じてやりとりされるデータ項目を定義します。 データ項目ごとに、[名称]・[データタイプ]・[入力条件]などを設定します。 |
---|---|
データタイプ詳細 | データ項目の各データタイプに関するプロパティを説明します。 |
JavaScriptを使用した データ項目の操作 |
JavaScriptを使用して、タスク処理時にデータ項目のデータを取得・編集・設定を行う方法を紹介します。 JavaScriptは、データ項目設定画面の[説明]プロパティまたは[高度なレイアウト]画面にて記述することができます。 |
高度なレイアウト | オリジナルで作成したHTMLファイルを使用して、タスク処理画面のレイアウトをカスタマイズします。 |
データタイプ | データ項目参照 |
---|---|
件名 | 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"] |
値の取得とチェック | 入力後すぐに入力値のチェックを行う |
---|---|
値の変換と設定 | 入力した全角数字を半角数字に変換する |
状態の変更 | 選択した内容によって、入力項目を表示・非表示にする |
属性の変更 | 選択した内容によって、表示する画像を変更する |
APIの実行 | APIの実行結果を入力値として設定する |
入力値が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文字以上の場合はエラーとします。(1) 値が変更された際のイベントハンドラ(change)を記述しています。
<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>
全角数字を半角数字に変換します。[高度なレイアウト]画面での記述例
<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>
全角数字を半角数字に変換します。(1) 値が変更された際のイベントハンドラ(change)を記述しています。
<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>
結果により、他の項目を表示・非表示にします。[高度なレイアウト]画面での記述例
<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>
結果により、他の項目を表示・非表示にします。(1) 値が変更された際のイベントハンドラ(change)を記述しています。
<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>
評価結果により、表示する画像を変更します。[高度なレイアウト]画面での記述例
<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>
評価結果により、表示する画像を変更します。(1) 値が変更された際のイベントハンドラ(change)を記述しています。
<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>
<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)を記述しています。