OutSystemsでワークフローを実現するBPT (Process) で、ユーザーに割り当てたタスクを確認するUIがタスクボックスです。
Reactive Webにも、これをカスタマイズする仕組みが提供されていたので試してみました。
環境
Personal Environment(Version 11.10.0 (Build 22910))
Service Studio(Version 11.10.9)
Sample Reactive Taskbox(Version 1.0.1)
タスクボックスとは
OutSystemsでワークフローを実現するための仕組み、Processに関連した要素です。
プロセス中で人にタスクを割り当てるHumanActivityというものをProcess内に配置できます。
このHumanActivityで自分にわりあたっているタスクを表示するUIです。
一覧表示されるタスクから選択して、決められた作業（承認とか却下など）を行うこともできます。
Traditional WebではデフォルトでこのUIが表示されていました。
タスクを割り当てる手順は、以下の記事の手順を確認してみてください。
シンプルなBPTの実装例
インストール
Sample Reactive Taskboxからファイルをダウンロードして自分の環境にインストールする。
omlファイルなので、Service Studioで開いただけではインストールされません。Publishを忘れずに。
Platform Serverのバージョンが低いと、Human Activity（ユーザーにタスクを割り当てる機能）のDestination（タスクを処理する画面の設定）が使えないようなので注意。
Note: Reactive apps can have human activities with a destination from platform server version 11.8 onward.
(Sample Reactive TaskboxのDetailsより）
Reactive Web AppでBPT Taskboxを表示させる
Traditional Webだと、設定しなくてもBPT Taskboxを呼び出すUIは表示されていましたが、Reactive Webでは設定が必要です。
インストールしたタスクボックス（Sample Reactive Taskbox）を対象画面で表示されるように配置します。
参照追加
Manage Dependenciesを開き、インストールしたタスクボックスにあるTaskbox Blockを参照追加。
利用しているLayout Blockを確認
モジュール内の全画面にタスクボックスを表示するためには、ThemeのBlocks/Layoutプロパティに設定されているLayout Blockに配置します。通常、作成した画面のレイアウトにはこのBlockがデフォルトで使われるため。もちろん、画面作成後に別のレイアウトを選択していたら、そちらのBlockにもTaskboxを配置しないといけないですね。
ここでは、Layouts UI FlowのLayoutTopMenu Blockを使っていることが確認できました。
Layout BlockにTaskbox Blockを配置
LayoutTopMenu Blockを開いてTaskbox Blockを配置します。Placeholder以外であればどこに配置してもいいようです。ここではfooter HTML ElementにTaskbox Blockを配置しました。
どこにBlockを配置しても、画面上では右下にUIが表示されます。
動作確認
プロセスを割り当てたユーザーでテスト対象モジュールを開いてみるとこんな感じになりました。
要件に応じてカスタマイズ
各プロジェクトで使う場合には、「Sample Reactive Taskbox」という名前では違和感があるはず。モジュール名を変更しておきましょう。
例えば、「Sample 」の部分を除外するなど。
TaskboxはBlockとして提供されているので、自由に変更できます。
例として、ActivityGuidance BlockのLabelに「 Dummy」というテキストを追加してみたところです。
