2022-08-31 / Questetra Developers Blog /
tutorial questetra form javascript api

フォーム画面のデコレーションで利用できる「Questetra Form JavaScript API」の基本的な使い方を次の3つの記事で学びます。

一連の記事は「フォーム画面で「Questetra Form JavaScript API」を利用する」を分割・再編集した内容になります。

1. フォーム画面をデコレーションする

Questetra BPM Suiteでは、HTML を記述してフォーム画面をデコレーションできます。

  • データ入力時の注意事項など説明文を表示する
  • 表示する文字を装飾する
  • 参考にするサイトへのリンクを表示する

また、Javascript および「Questetra Form Javascript API」を利用すれば、更に次のようなことも実現できます（Professional）。

  • 入力文字数を自動でカウントする
  • オリジナルの入力チェックを追加する

一連のチュートリアルで、「Questetra Form Javascript API」およびこれらの利用方法を学んでいきます。

2. ワークフローアプリを準備する

「Questetra Form Javascript API」を利用したサンプルコードを実行するためのワークフローアプリを準備します。アプリを新規作成し、順次設定を行なってください。

2.1. ワークフロー図の設定

スイムレーン上に、開始イベント・ヒューマンタスク・終了イベントがひとつずつ配置されているワークフロー図を作成します。ヒューマンタスクの名称は「H1. Input」に変更してください。

2.2. データ項目の設定

複数行と単一行のふたつの文字型データ項目を追加し、次のように設定します。

項目名データタイプフィールド名編集可否（「H1. Input」工程）備考
テキスト入力文字 (複数行)q_Input_Text編集可ここに文字を入力します
文字数文字 (単一行)q_Characters_Count編集可入力された文字数を表示します

2.3. フォーム画面の確認

ヒューマンタスク「H1. Input」フォームのプレビュー画面を開いてください。プレビュー画面でデータ項目「テキスト入力」「文字数」がそれぞれ、編集可能な入力フィールドとして画面表示されていれば、準備は完了です。

2.0.2. Form Preview

3. データ項目の値を取得／更新する

フォーム画面に配置されたボタンをクリックした時に、データ項目の値を取得し、加工後に別のデータ項目の値を更新する、という処理を実装します。
この処理を通じて、「Questetra Form Javascript API」を利用してフォーム画面上のデータ項目の値を取得／更新する方法を学びます。

ボタンクリック時に次の一連の処理を行うサンプルコードを記述します。

  1. データ項目「テキスト入力」に入力された文字列を取得する
  2. 入力された文字列の文字数をカウントする
  3. カウント結果をデータ項目「文字数」にセットする

「Questetra Form JavaScript API」では、次の形式でデータ項目の値の取得／更新を行います。

  • データ項目の値を取得する
    • const value = qbpms.form.get( ‘{データ項目のフィールド名}’ );
  • データ項目の値を更新する
    • qbpms.form.set( ‘{データ項目のフィールド名}’, {データ型に応じた形式の値} );
  • 値の更新では、フォーム画面のフィールドに表示されている値を上書きします。タスクの保存や完了を行わない限り、サーバ上の値は更新されません。
  • データ型に応じて、取得／更新時のオブジェクトは異なります。詳細は、リファレンス「R2132: Questetra Form JavaScript API」 を参照ください。

3.1. コードの設定

データ項目「文字数」の［説明］欄に、下記のコードを設定します。

<button type="button" onclick="user_countInputText()">文字数カウント</button> 
<script>
// 文字数カウント処理
function user_countInputText(){

  // 「テキスト入力」データ項目の値の取得
  const strInputText = qbpms.form.get('q_Input_Text');

  // 文字数のカウントと、文字数の値を「文字数」データ項目へ設定
  qbpms.form.set('q_Characters_Count', strInputText.length);
}
</script>

Questetra で利用されているものとの競合を避けるため、独自の関数の名前／要素の ID は “user_” ではじまるように定義します。

コード設定後、「H1. Input」工程のプレビュー画面を表示します。データ項目「文字数」の下に［文字数カウント］ボタンが追加されていれば、設定は完了です。

2.1.1 Form Preview

3.2. 動作確認

記述したスクリプトの動作確認を行いましょう。「H1. Input」工程のプレビュー画面を開いてください。

データ項目「テキスト入力」に適当な文字を入力した後、［文字数カウント］ボタンをクリックしてください。 「文字数」に、「テキスト入力」に入力された文字の数が表示されます。

「テキスト入力」に入力された文字列を取得し、文字数をカウントした後に「文字数」に値をセットする処理が動作していることを確認できました。

今回はサンプルなのでプレビュー画面でコードの動作確認をしています。
実務で利用するワークフローアプリについては、プレビュー画面での確認だけでなく、実際のタスク処理画面でも動作確認を行うようにしてください（［デバッグ実行］やアプリリリース後に［新規開始］を行ってください）。

本記事では、「Questetra Form Javascript API」を利用してフォーム画面上のデータ項目の値を取得／更新する方法を学びました。
次は、イベントハンドラの登録／削除の方法について学びます。

%d人のブロガーが「いいね」をつけました。