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