Chapter 3: 出張申請アプリを作る

チュートリアルの実践的な課題として、Chpt.2で作成したアプリを改造して、より実用的なものに近づけた出張申請アプリを作成しましょう。Chpt.2 のアプリのモデラーを開いてください。[アプリ設定]→ 対象行をクリック →[編集]です。

バージョンの番号がスクリーンショットと違うと思いますが、気にしなくて大丈夫です。

データ項目の追加

まずデータ項目から編集していきます。出張申請アプリとして適切な入力フォームを作っていきましょう。データ項目タブを開いてください。既に [数値]と[日付]はありますが、それに[日付( 2 つ目になります)][ユーザ][文字]の 3 つを追加します。そして各項目の名前を次のように編集してください。フィールド名も編集してください。

データの種類名前フィールド名
数値金額q_number0
日付開始日q_date1
日付( 2 つ目)終了日q_date2
ユーザ申請者q_user3
文字内容q_string4

項目名やフィールド名はそれぞれのデータ項目の設定ダイアログで編集できます。※フィールド名は、”q_” はじまりで、64 文字以下にしてください。アルファベット・数字・アンダーバーのみ、使用可能です。

このようになれば OK です。データ項目は「データ項目一括追加機能」からも追加できますが、ここではその説明は省略いたします。

次にデータ編集許可設定をします。Chpt.2 でも説明しましたが、[申請]タスクでは[件名]データに書き込めるが、[確認]タスクでは表示しかできないといったように、各データ項目はそれぞれのヒューマンタスクに対して異なる編集許可を出せるのでしたね。ワークフロー図タブを開き、[申請]と[確認]のヒューマンタスクの設定ダイアログから編集してください。

すべてのデータ項目について、[申請]タスクでは[編集可]、[確認]タスクでは[表示のみ] に設定してください。[適用して閉じる]ボタンで編集を終わりましょう。

入力フォームのレイアウト設定

より見やすいように、フォームの見た目や初期入力値なども変更していきます。試しに、データ項目タブの右上にある[フォームプレビュー]ボタンをクリックしてみてください。現在の設定で生成される入力フォームが表示されます。このままでも正しく動作はしますが、項目の順番を変えたり段組みの設定をしたりすれば、さらに使いやすいアプリになるでしょう。

まず項目の順番を変更します。データ項目タブの左側にある項目リストは、ドラッグ&ドロップで項目の順番を変えることができます。次のような順番に並び替えてください。

  • 件名
  • 金額
  • 開始日
  • 終了日
  • 申請者
  • 内容

次に段組みの設定をします。データ項目リストの右側に段組の設定ボタンがあります。

「開始日」と「終了日」の「段組」を 2 に設定してください。

これで「開始日」と「終了日」が 1 列に横並びで表示されるようになります。

このようになれば OK です。

入力値に関する設定

フォームに入力される値に関する設定を行います。各項目について以下のように設定を変更してください。

金額

出張申請ですから金額の入力は必須です。[金額]の設定ダイアログを開き、[必須]にチェックしてください。

また、出張費は負の数になりませんし、あまりにも高額な申請は出せないようにするべきです。[最小値]に 0 、[最大値]に 2000000 と入力しましょう。これで、申請できる出張費が 0 円から 200 万円に制限されました。

そのことをユーザに説明するために、説明のテキストボックスに「金額の上限は 200 万円です」などの但し書きを入れておくといいでしょう。

申請者

[申請者]の入力も必須なので、[必須]にチェックしてください。

そして多くの場合、出張申請を出すのは申請者本人だと考えられます。[申請者]の初期値を申請者本人にするには、[初期値]にプロセス開始ユーザを設定してください。これで「プロセスを開始したユーザ=申請者スイムレーンの処理担当者」が、初期値として最初から入力されるようになります。

内容

長い文章も記述しやすいように、フォームタイプ複数行を選択しましょう。テキストボックスが複数行表示の大きなものになります。

また[内容]の入力も必須です。

そして、適当なプレースホルダテキストを入力します。プレースホルダテキストとは、テキストボックスに何も入力されていないときに薄い色で表示されるテキストです。入力例などを設定することが多いので、例えば「京都-東京 20000 円」などと入力しておけばいいでしょう。

入力を始めると消えてしまうテキストなので、注意事項など重要なことは書かないようにしましょう。

開始日/終了日

この 2 項目は必須にしておくだけで OK です。[必須]のチェックを入れておきましょう。

[フォームプレビュー]してこのような表示になっていれば、フォーム設定は完了です。

では[編集の終了]をしてモデラーを終了し、バージョン 3 をリリースして動作を確認しましょう。メニューの[ワークフロー]から[新規開始]ページを開いて、編集したアプリの新規プロセスを[開始 ]してください。いろいろな入力で[『申請』処理完了]ボタンを押してみましょう。設定はきちんと反映されているでしょうか?

  • [件名]以外の全項目が入力必須になっていますか?
  • [金額]に入力できるのは 0 ~ 2000000の数値だけになっていますか?
  • [申請者]の検索テキストボックスの初期値は申請者本人になっていますか?
  • [内容]のプレースホルダテキストは表示されていますか?

条件を満たさない項目がある状態で[処理完了]すると、該当部分に赤文字でエラーが表示されるはずです。そのように動作していれば、データ項目関係の設定は完了です!

[上司]スイムレーンの追加

Chpt.2 で作成したアプリでは、出張申請に目を通すのは[管理部]スイムレーンの処理担当者である、組織「10 管理部」の所属社員だけでした。ここではそれに加えて、申請者の上司が申請の承認を行うようにしましょう。この場合、申請者に合わせて[承認]タスクの担当者を変更できるような設計にしなければなりません。[承認]タスクの担当者指定は、組織データを活用することで自動的に行うようにできます。「申請者がどの組織に所属しているのか」「その組織のリーダは誰なのか」ということは、環境構築の時に登録済みだからです。

ワークフロー図の変更

では、またアプリを編集しましょう。アプリ設定ページからアプリの詳細ページを開いて、[編集]ボタンでモデラーを起動してください。

まずはワークフロー図の変更をします。今は[申請者]と[管理部]の 2 つのスイムレーンしかありませんが、そこに新しく[上司]スイムレーンを追加します。画面上部のパレットからスイムレーンを選択し、新しいスイムレーンを[申請者]スイムレーンと[管理部]スイムレーンの間に入れましょう。オブジェクトの配置は自動で調整されます。スイムレーンを追加したあと、設定ダイアログを開いて名前を「上司」に変えておいてください。

そして[上司]スイムレーンにヒューマンタスクを追加し、「承認」に名前を変更します。[承認]タスクが追加できたら、[申請]→[承認]→[確認]という順番でフローを引いてください。

フローの先端/根元をドラッグ&ドロップで掴んで動かすと、フローを引き直すことができます。もし要らないフローがでてきたら、Chpt.2 の「描き間違えたときは?」にもありましたが、フローを選択した時に表示されるゴミ箱アイコンで削除することができます。

このようになれば OK です。

処理担当者の設定

次に、[上司]スイムレーンの設定ダイアログで[上司]スイムレーンの処理担当者を[スイムレーン][申請者][と同じ組織のリーダ]に設定してください。

こうすることで、申請者が所属する組織を元に、[承認]タスクの担当者が自動で決められることになります。例えば「カナリア」の上司は「スマトラ」に、「オアフ」の上司は「ガラパゴス」になります。では組織のリーダである「スマトラ」や「ガラパゴス」はどうかというと、自分自身が指定されることになります。

今回は[〇〇と同じ組織のリーダ]を選択しましたが、プルダウンリストに表示されるように、組織を用いた相対指定の選択肢は全部で 10 通り用意されています。これにより様々なパターンに対処することができます。

これでアプリを保存してリリースしてください。「あなた」から申請を出しても、「あなた」の所属組織である「00 全社」には「あなた」しかいないはずなので、動作を確認するには「カナリア」や「スマトラ」がいいでしょう。

例えば「カナリア」から申請を出すと、自動で「スマトラ」に[承認]タスクが届きます。承認者を手動で指定する必要はありません。「スマトラ」は「10 管理部」での「カナリア」の上司にあたります。そして「スマトラ」から申請を出すと、[承認]タスクは「スマトラ」に届きます。「スマトラ」自身が「10 管理部」のリーダだからです。このように、申請者によって自動で[承認]タスクの送り先を変えるアプリが実装できました。

「Chpt.4: 条件により「分岐」させる」に続く

「はじめての Questetra BPM Suite / Chpt.3: 出張申請アプリを作る」への1件のフィードバック

  1. ピンバック: Your first step of Questetra BPM Suite / STEP2: Creating Simple App – Questetra Support

コメントは受け付けていません。

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