M213 入力画面
最終更新 2017年9月27日

処理フォーム画面をデコレーションする(HTML/JavaScript)

データ項目の[説明文]を設定すれば、入力フォームの下部に "注記" として表示されるようになります。プレーンテキストだけでなく HTML や JavaScript も設定できるので、"業務上の注意" を強調させる、"関連サイトの URL" のリンク表示させる、"入力文字数カウンタ" を表示させるなど、業務効率を上げる様々な工夫を実現できます。

M213-1


a. 入力例の掲示
業務データの入力例を列挙し、入力フォーマットのゆらぎを統制する
b. 基準値の掲示
選定基準や判断基準を掲載し、入力者の主観によるバラツキを減らす
c. 注意喚起
業務方針や年間目標を組織内に浸透させる
  • 入力ミスを減らす方法としては、”あらかじめ入力された状態” を実現する[初期値]も有効です (M207)

a. 各データ項目の説明文
フォーム表示されている項目(編集可能)の説明文が掲示されます
b. ガイドパネル型データの説明文
工程プロパティで表示設定になっている説明文が掲示されます
  • [ガイドパネル]は “入力ヒント” を掲示するための特別なデータ項目です (M205)

a. 静的なヒントを掲示する
プレーンテキストや HTML で、業務のヒントとなる情報を記載します
b. 外部情報を掲示する
HTML タグ “iframe” で、外部サイトの情報を取り込みます
c. 動的な情報を掲示する
JavaScript で入力中データを参照するなどして、掲示内容を変更します
  • JavaScript を用いた表示変更やデータ通信は自己責任で設定してください
  • JavaScript ライブラリ “jQuery” も活用可能です
  • jQuery で HTML 内の input 要素を参照する場合、name 属性で検索するなどして参照します
  • 具体的なスクリプト設定例は、ワークフローサンプル等を参考にしてください

R2130 “jQuery”を利用した DOM要素(inputタグ等)の操作サンプル

M213-2
M213-3
M213-1
M213-3
M213-4



a. 区切り
見出しタグ(h4)の背景色を設定すれば、業務データのまとまりが分かりやすくなります。UI デコレータ

ご注意) サンプル例示されているコードにつき簡易な動作検証は行っておりますが、あらゆる環境での動作が保証されているものではありません。ご利用に際しては必ず自己責任でお使いください。また将来の製品アップデート時に動作しなくなる可能性についても予めご了承のうえでご利用ください。デコレーション・アイデア

a. jQuery ライブラリ
“入力のヒント” に JavaScript を記述する際、ライブラリ “jQuery” が利用可能です。 (全ての動作を保証するものではありません)
b. jQuery の特徴
jQuery とは JavaScript のコーディングを簡易化できるライブラリです(初版2006年)。 “フォーム入力” や “クリック操作” 等の状況に応じた入力画面変化を簡単に設定できるため、業務に応じた入力効率の向上を追及することが可能です。 jQuery("div.column").click(function(){ jQuery(this).css( "background-color", "lightgray") }); といった構文で記述します。 (JavaScript の基礎知識が必要です)
c. “入力ヒント” における注意事項
各データ項目の[説明文]にある HTML/JavaScript は全てロードされますが、工程により[表示のみ][非表示]となっている場合、当該データ項目の[説明文]はロードされません。(ただしガイドパネルの[説明]にある HTML/JavaScript は[表示のみ]でロードされます)。 不適切な JavaScript/jQuery によって入力画面が不安定になる可能性があります。 “$” による省略表記は利用できません。 原則として、”[” や “(” などのメタ文字は “\\” (two backslashes) でエスケープする必要があります(公式セレクタ
d. 業務に役立つ関数およびサンプルコード
♦ イベント / Event = 属性セレクタ、Classセレクタ、IDセレクタなどで指定

jQuery('input[name="data\\[3\\].input"]').on('keypress keyup change',function(){ // 第3項目の入力値に変化があれば
//keypressで半角英数の入力を検知し、keyupでdeleteキーとbackspaceキーの入力を検知
//change でフォーカス外れを検知
 myfunc(); 
}); 

jQuery('textarea[name="data\\[4\\].input"]').on('keypress keyup change',function(){ // 第4項目の入力値に変化があれば
//keypressで半角英数の入力を検知し、keyupでdeleteキーとbackspaceキーの入力を検知
//change でフォーカス外れを検知
    var thisValueLength = jQuery(this).val().length; //文字数をカウント
    jQuery('#mycounter').html(thisValueLength + "characters"); // <p id="mycounter"></p> 内のHTMLを書き換え 
}); 

jQuery('input[name="data\\[3\\].input"], textarea[name="data\\[4\\].input"]').on('keypress keyup change',function(){ 
// 第3もしくは第4項目に変化があれば(カンマでセレクタを列挙)
//keypressで半角英数の入力を検知し、keyupでdeleteキーとbackspaceキーの入力を検知
//change でフォーカス外れを検知
    myFunc(); 
}); 

jQuery('.myButton').on('click',function(){ // <input type="button" value="Google Map" class="myButton"> がクリックされれば
    myFunc(); 
}); 

♦参照 / Retrieving = フォーム内:val() タグ内:text() html()

var textStr = jQuery("select[name='data\\[9\\].selects']").val(); // セレクトボックス
var textStr = jQuery("select[name='data\\[9\\].selects'] option:selected").text(); // セレクトボックス (label)
var textStr = jQuery("input[name='data\\[9\\].selects']:checked").val(); // ラジオボタン
var textStr = jQuery("input[name='data\\[9\\].selects']").val(); // 検索セレクト(id)
var textStr = jQuery("input[name='data\\[9\\].dummy']").val(); // 検索セレクト(label)

var textStr = jQuery("#readonly_9").text(); 
// <div id="readonly_9" class="fit"><div class="auto-link" id="ext-gen1193">Hello hello</div></div>
// → Hello hello 

var htmlStr = jQuery("#readonly_9 > ul").html(); 
// <div id="readonly_7" class="fit"><ul class="readonly-select"><li>sample choice true</li></ul></div>
// → <li>sample choice true</li>

♦書換 / Rewriting = フォーム内:val(textStr) タグ内:text(textStr) html(htmlStr)

<script type="text/javascript">
jQuery('input[name="data\\[1\\].input"]').on('change',function(){ 
//データ項目番号「1」のTextフォーム値に変化があれば、
//(change でフォーカス外れを検知)

  var thisValue = jQuery(this).val();

  var myRegex = /^https:\/\/|^http:\/\//; // "http://" もしくは "https://" で始まる (正規表現)
  var newValue = thisValue.replace( myRegex, "" ); // マッチした部分を削除
  // ex) "http://www.questetra.com" → "www.questetra.com"

  var newValueLc = newValue.toLowerCase(); // 小文字化 ※ドメイン部以外にも適用される点に注意

  jQuery('input[name="data\\[1\\].input"]').val( newValueLc );
});
</script>

<script type="text/javascript">
jQuery('input[name="data\\[1\\].input"]').on('keypress keyup change',function(){ 
//データ項目番号「1」のTextフォーム値に変化があれば、
var thisValue = jQuery(this).val();
//文字数が13桁以上なら文字列の分割
if( thisValue.length > 13 ){
  jQuery('input[name="data\\[2\\].input"]').val( thisValue.substr(0, 6) );
  jQuery('input[name="data\\[3\\].input"]').val( thisValue.substr(6, 13) );
});
</script>

<script type="text/javascript">
jQuery('input[name="data\\[1\\].input"]').on('keypress keyup change',function(){ 
//データ項目番号「1」のTextフォーム値に変化があれば、
//keypress で半角英数の入力を検知し、keyup で delete キーと backspace キーの入力を検知
//change でフォーカス外れを検知
var thisValueLength = jQuery(this).val().length;
 
//文字数が13桁ならチェックディジットを算出
if( thisValueLength == 13 ){
  var mysum = 0;
  var thisValue = jQuery(this).val();
 
 for( i=1; i < 13; i++){
 mysum += parseInt( thisValue.charAt(i) ) * (i % 2 + 1);
 }
 
  var checkdigitnum = 9 - mysum % 9;
  var typedcd = parseInt( thisValue.charAt(0) );
 
// <p id="mymessage1"></p> 内のHTMLを書き換える
  if( typedcd == checkdigitnum ){
    jQuery( '#mymessage1' ).html("OK");
  } else {
    jQuery( '#mymessage1' ).html("<font color=red>NG</font>");
  }
} else {
  jQuery( '#mymessage1' ).html("<font color=blue>13桁の数字を入力してください</font>");
}
});
</script>