UPDATED本記事の内容は、次の3つの記事に分割・再編集されております。新しい記事を参照ください。利用して、フォーム画面をデコレーションしたり、カスタマイズしたりすることができます。etc.フォーム画面のデコレーションやカスタマイズは、(ガイドパネル型を含む)データ項目設定の[説明]欄に、HTMLやJavaScriptを記述することで行います。API」を利用すると、次のことを実現できます。API」の実際の使い方を説明します。コードの動作は保証されておりません。将来バージョンにおいて動作や振る舞いが変わる可能性もございますので、利用される際には、将来のメンテナンス(保守)の必要性も考慮のうえ、ご利用ください。事前準備)ワークフローアプリを新規作成するワークフローアプリを新規作成し、編集画面を開いてください。「ワークフロー図」タブで、1つのスイムレーンと、開始イベント・ヒューマンタスク・終了イベントを1つずつ配置してください。Input」とタスク名を変更しておきましょう。データ項目の設定データ項目を、次のように追加・設定します。ここに文字を入力します。入力文字数のカウント結果を表示します。設定後の確認[フォームプレビュー]ボタンを押して、フォームプレビュー画面を開いてください。プレビュー画面でデータ項目[テキスト入力][文字数]がそれぞれ、入力フィールドとして画面表示されていれば、設定完了です。入力フィールドの値の取得/代入この節では、ボタンがクリックされると入力された文字数がカウントされる処理を、フォーム画面に組み込みます。この実装を通して、「入力フィールドの値の取得/代入」方法を学びます。API」を用いた記述方法は、下記になります。コードの設定データ項目[文字数]の設定画面にて、[説明]欄に下記のコードを貼り付け、[適用して保存]してください。strInputText.length);}</script>このコードでは、次の処理を行っています。はじまるように定義しますコードを設定すると、入力フィールド[文字数]の下に[文字数カウント]ボタンが追加されます。フォームプレビュー画面を再読込して確認してください。[文字数カウント]ボタンが追加されたことまで確認したら、ここで一度、ワークフローアプリの[リリース]を行ってください。組み込んだコードの動作確認を行いましょう。Input」タスク処理画面を開いてください。入力フィールド[テキスト入力]に適当な文字を入力し、[文字数カウント]ボタンをクリックしてください。入力フィールド[文字数]に、入力フィールド[テキスト入力]に入力した文字の数が表示されました。[文字数カウント]ボタンをクリックするたび入力した文字数が表示されるように、処理を追加することができました。イベント発生時に動作するようにします。この実装を通じて、「入力フィールドへのイベントハンドラの登録/削除」方法を学びます。API」を用いた記述方法は、下記になります。あることに注意してください。コードの設定データ項目[文字数]の[説明]欄に、下記のコードを上書きで貼り付け、[適用して保存]してください。strInputText.length);}</script>このコードでは、次の処理を行っています。関数「user_registerHandlers()」は、入力フィールド[テキスト入力]へchangeイベントハンドラを登録する関数「user_deregisterHandlers()」は、入力フィールド[テキスト入力]からchangeイベントハンドラを削除する関数「user_countInputText()」は、入力された文字数のカウント処理コードを設定すると、[文字数カウント]ボタンが消え、代わりに[イベント登録][イベント削除]の2つのボタンが表示されます。フォームプレビュー画面を再読込して確認してください。ボタンが変更されたことまで確認したら再度、ワークフローアプリを[リリース]してください。組み込んだコードの動作確認を行いましょう。Input」タスク処理画面を開いてください。入力フィールド[テキスト入力]に適当な文字を入力してからフォーカスを移動させて、[テキスト入力]のchangeイベントを発生させてみましょう。入力フィールド[文字数]には、入力された文字数が表示されないと思います。実はこの段階では、入力フィールド[テキスト入力]のchangeイベント発生時の処理がまだ登録されていません。ここで[イベント登録]ボタンをクリックしてください。changeイベント発生時処理が登録されたことで、文字数カウントが行われるようになりました。入力フィールド[テキスト入力]に適当な文字を入力してみましょう。[テキスト入力]のchangeイベントが発生するたびに都度、入力フィールド[文字数]へ入力された文字数が表示されるようになりました。次に、[イベント削除]ボタンをクリックしてください。changeイベント発生時処理が削除され、文字数カウント処理が無効化されました。入力フィールド[テキスト入力]に適当な文字を入力しフォーカスを移動させて[テキスト入力]のchangeイベントを発生させても、今度は文字数カウント処理が行われなくなりました。changeイベント発生時に都度入力した文字数が表示されるという処理の追加や削除を行うことができました。イベント発生時に行わせることにチャレンジします。イベントハンドラの登録/削除」方法を学びます。API」を用いた記述方法は、下記になります。イベントであること、データ項目が引数に含まれないことに注意してください。コードの設定データ項目[文字数]の[説明]欄に、下記のコードを上書きで貼り付け、[適用して保存]してください。ハンドラ登録処理の実行user_onReady();</script>このコードでは、次の処理を行っています。事前準備段階のワークフローアプリと同じ見た目に戻ります。フォーム画面(プレビュー)を再確認してください。ボタンが削除されたことまで確認したら再度、ワークフローアプリを[リリース]してください。組み込んだコードの動作確認を行いましょう。Input」タスク処理画面を開いてください。入力フィールド[テキスト入力]に適当な文字を入力してからフォーカスを移動させて、[テキスト入力]のchangeイベントを発生させてみましょう。イベント(すなわち画面描画)時に、changeイベント発生時の文字数カウント処理が登録されているため、入力フィールド[文字数]の文字数のカウント処理が、何かしらのボタンをクリックするまでもなく、自動的に行われるようになりました。何かのボタンをクリックしなくても自動的に入力文字数をカウントしてくれるようになりました。いままでの実装してきた内容より、さらにユーザビリティが向上したと思います。フォーム画面で独自の入力チェックを行う今までのサンプルの実践を通して得た知識を元に、応用編にチャレンジしましょう。フォーム画面に、クライアントサイドでの独自の数値チェックを組み込んでみます。新たに、次のようにデータ項目を追加してください。[小数点以下の桁数]は不問です。[選択肢種別]は「固定の選択肢」、[選択肢]の内容CSVは下記のとおり。[依存する親データ項目]は設定不要です。追加したデータ項目[数値]の[説明]欄に、下記のコードを貼り付け、[適用して保存]してください。ここは関数スコープなので、関数定義名称は"user_"始まりでなくても構いません。validateNum();});</script>このコードでは、次の処理を行っています。イベント発生時処理(無名関数)の定義は下記のとおり。イベントハンドラを登録する処理ここまで準備ができたら再度、ワークフローアプリを[リリース]してください。組み込んだコードの動作確認を行いましょう。Input」タスク処理画面を開いてください。changeイベントを発生させましょう。[数値]に入力されている値は、[数値の条件]を満たさないので、バリデーションエラー「数値が条件を満たしていません」が表示されます。変更入力してchangeイベントを発生させましょう。今度は[数値の条件]を満たすので、バリデーションエラー「数値が条件を満たしていません」が非表示になります。再度[数値の条件]を満たさなくなるので、バリデーションエラー「数値が条件を満たしていません」が再表示されます。changeイベント発生時に、[数値]と[数値の条件]の入力内容でバリデーションを実施し、エラーであればエラーメッセージが表示されるようになりました。case文を追加・変更するなどし、メッセージ表示/非表示の切り替えなど挙動確認をしてください。API」の使い方が理解できたかと思います。いった、クライアントサイドでの独自の入力チェックの追加といったフォーム画面のカスタマイズは、ユーザビリティの向上に役立ちます。API」は、アイデア/使い方次第で、フォーム画面をもっと便利にカスタマイズすることが可能です。フォーム画面のカスタマイズにチャレンジしてみてください。(必須)サイト%d人のブロガーが「いいね」をつけました。