2022-09-26 / Questetra Developers Blog /

選択型データ項目は、登録されているリストから選択する形で入力できるデータ項目です。登録されているリストが、例えば「社員情報」であれば、個々の社員には氏名の他にメールアドレスや所属チームといった情報が付帯していることがあります。

本記事では、選択型（検索セレクト）データ項目で選択指定すると選択肢に関連する情報が他のデータ項目に自動でセットされる仕組みについて考察します。

具体的には、

  • 処理担当者が選択型データ項目で社員を指定する
  • 指定された社員の［メールアドレス］［氏名］［チーム名］がそれぞれ文字型データ項目にデータが自動入力される

といった動作を実現します。

フォーム画面のデコレーションで実現する方法（Professional）

Professional エディションでは、データ項目の設定で［説明］欄に<script>タグを指定できます。ここで、処理フォーム上でデータ項目に値が自動セットされるようにスクリプトを記述します。

Questetra Form JavaScript API

Questetra Form JavaScript API を利用すれば、フォーム画面のデータ項目の値を取得したり、更新したりすることができます。また、データ項目の値が更新されたときに特定の処理を呼び出すことも可能です。

Reference：R2132: Questetra Form JavaScript API

今回は、Questetra Form JavaScript API を利用して、次の処理を行うようなコード（スクリプト）を記述します。

  • 処理担当者が選択型データ項目で選択肢を指定すると作動
  • 指定された選択肢の表示ラベルを解析
  • 解析した文字列をそれぞれの文字型データ項目にセット

関連記事「Google スプレッドシートの社員情報をワークフローアプリで管理する」で作成したサンプルアプリにスクリプトを設置して自動入力を実現します。

このワークフローアプリでは

  • 「チーム名 / 氏名 /メールアドレス」という表示ラベルを持つ選択肢マスタが作成されている
  • ［社員マスタ（参照用）］データ項目で上記の選択肢マスタが参照されている
  • ［メールアドレス］［氏名］［チーム名］の文字型データ項目がある

となっています。

このアプリのタスク処理画面で処理担当者が社員を選択すると、スクリプトによって［メールアドレス］［氏名］［チーム名］に値が自動セットされるようになります。

スクリプトの設定

設定を入力する場所

スクリプトを設定するのは、データ項目設定画面にある［説明］欄です。対象となるタスク処理画面で［編集可］となっているデータ項目、あるいは［表示のみ］となっているガイドパネル型データ項目であれば、いずれのデータ項目に設定しても同じ動作をします。

サンプルアプリでは［社員マスタ（参照用）］（選択型、検索セレクト）の［説明］欄に設定することにします。

設定内容

［説明］欄に以下のコードを記述します。

<script>
function user_qbpmsFormSet() {
  const choice = qbpms.form.get("q_staff");
  let displayLabel = choice[0].display ;
  let info = displayLabel.split(" / ") ;
  qbpms.form.set("q_staff_team", info[0]) ;
  qbpms.form.set("q_staff_name", info[1]) ;
  qbpms.form.set("q_staff_email", info[2]) ;
}

qbpms.form.on('change', 'q_staff', user_qbpmsFormSet);
</script>

各行について説明します。

function user_qbpmsFormSet() {

イベントが発火したときに動作する関数（function）の名前を定義します。ワークフロー基盤で定義されているものと区別するために user_ から始まる名称が推奨されています。

choice = qbpms.form.get("q_staff");

変数 choice を定義し、内容に q_staff （［社員マスタ（参照用）］）で選択された選択肢を指定します。

 displayLabel = choice[0].display ;

変数 displayLabel を定義し、内容に choice の［表示ラベル］を指定します。[0] は最初に選択された選択肢を指定するためで、選択型のデータが対象の場合に必要となります。

info = displayLabel.split(" / ") ;

変数 info を定義し、内容は displayLabel を ” / ” で分割したものです。［表示ラベル］は、チーム名 / 氏名 /メールアドレス となっているので、それぞれに分割します。”/” の前後にスペースが入っているので、区切り文字にスペースを含めることで配列からスペースを除去しています。

qbpms.form.set("q_staff_team", info[0]) ;
qbpms.form.set("q_staff_name", info[1]) ;
qbpms.form.set("q_staff_email", info[2]) ;

q_staff_team（［チーム名］文字型）、q_staff_name（［氏名］文字型）、q_staff_email（［メールアドレス］文字型）の各データ項目に info の配列をそれぞれセットします。

qbpms.form.on('change', 'q_staff', user_qbpmsFormSet);

イベントハンドラを登録します。［社員マスタ（参照用）］（q_staff ）で選択が行われる（change イベントが発火）と定義された処理（user_qbpmsFormSet）が実行される、という内容になっています。

［社員番号］に関して、今回利用したサンプルアプリで利用している選択肢マスタで扱っていなかったので自動セットの対象としませんでした。選択肢マスタに登録するようにすれば、その他の情報も自動セットできるようになります。

フォーム画面で自動入力を利用することで、処理担当者の労力の軽減や作業効率の向上を期待できます。デコレーションを利用した入力支援の方法として、ご検討ください。

Appendix: Professional 以外での実現方法

Basic / Advanced エディションでは、フォーム画面のデコレーションで <script> タグを利用できないため、「Questetra Form JavaScript API」を利用することが出来ません。

Basic では代替の方法はありませんが、Advanced を利用の方は次のような方法で複数データ項目への自動入力を実現できます。

Google スプレッドシートから情報を取得する方法（Advanced）

選択型データ項目は［表示ラベル］と［選択肢ID］の２つの項目を持ちます。しかし「氏名」に対して「メールアドレス」「所属チーム」のように複数の項目がある場合は、外部（例えば Google スプレッドシート）にそれらの情報を保存して利用する方法が考えられます。

具体的な実現方法は「Google スプレッドシートの社員情報をワークフローアプリで管理する」の「社員取得/更新」のフローを参照してください。

この記事のアプリでは、ビルトイン自動工程［Google スプレッドシート: 行取得］が使用されています。自動工程の「取得した行のデータを列ごとにデータ項目を指定して保存する」機能を利用して［メールアドレス］［氏名］［チーム名］の各データ項目に値がセットされるようになっています。

ただし、取得対象の社員を選択して、［メールアドレス］［氏名］［チーム名］に値がセットされるには次のヒューマン工程［確認/編集］まで待つことになります。

なお、スプレッドシートの列を追加すれば、「電話番号」や「住所」などの情報も登録できます。また、社員情報に限らず顧客情報や備品の貸出記録など、スプレッドシートで管理している情報であれば幅広く応用できます。

  • 1回の ［Google スプレッドシート: 行取得］工程の実行で最大10項目（列）まで自動セットできます
  • 11項目以上の場合は自動工程を複数個設置して取得項目を別けてください
%d人のブロガーが「いいね」をつけました。