データ項目の［説明文］を設定すれば、入力フォームの下部に "注記" として表示されるようになります。プレーンテキストだけでなく HTML や JavaScript も設定できるので、"業務上の注意" を強調させる、"関連サイトの URL" のリンク表示させる、"入力文字数カウンタ" を表示させるなど、業務効率を上げる様々な工夫を実現できます。
1. デコレーション（入力ヒント）の活用シーンについて、概要を理解する
- a. 入力例の掲示
- 業務データの入力例を列挙し、入力フォーマットのゆらぎを統制する
- b. 基準値の掲示
- 選定基準や判断基準を掲載し、入力者の主観によるバラツキを減らす
- c. 注意喚起
- 業務方針や年間目標を組織内に浸透させる
- 入力ミスを減らす方法としては、"あらかじめ入力された状態" を実現する［初期値］も有効です （M207）
2. 各工程におけるデコレーションの仕組みについて、概要を理解する
- a. 各データ項目の説明文
- フォーム表示されている項目（編集可能）の説明文が掲示されます
- b. ガイドパネル型データの説明文
- 工程プロパティで表示設定になっている説明文が掲示されます
- ［ガイドパネル］は "入力ヒント" を掲示するための特別なデータ項目です （M205）
3. デコレーションする（入力ヒントを設定する）
- a. 静的なヒントを掲示する
- プレーンテキストや HTML で、業務のヒントとなる情報を記載します
- b. 外部情報を掲示する
- HTML タグ "iframe" で、外部サイトの情報を取り込みます
- c. 動的な情報を掲示する
- JavaScript で入力中データを参照するなどして、掲示内容を変更します
- JavaScript を用いた表示変更やデータ通信は自己責任で設定してください
- JavaScript ライブラリ "jQuery" も活用可能です
- jQuery で HTML 内の input 要素を参照する場合、name 属性で検索するなどして参照します
- 具体的なスクリプト設定例は、ワークフローサンプル等を参考にしてください
R2130: "jQuery"を利用した DOM要素（inputタグ等）の操作サンプル
R2131: 処理フォーム画面で利用できる HTML タグ
X. 業務アプリ
Z. 追加情報: HTML を使ったデコレーション例
- a. 区切り
- 見出しタグ（h4）の背景色を設定すれば、業務データのまとまりが分かりやすくなります。
ガイドパネル デコレータ
Z. 追加情報: JavaScript を使ったデコレーション例
ご注意） サンプル例示されているコードにつき簡易な動作検証は行っておりますが、あらゆる環境での動作が保証されているものではありません。ご利用に際しては必ず自己責任でお使いください。また将来の製品アップデート時に動作しなくなる可能性についても予めご了承のうえでご利用ください。 デコレーション・アイデア（2020-11-20）
- 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) でエスケープする必要があります（公式セレクタ）
コメント
0件のコメント
サインインしてコメントを残してください。