Skip to main content
Created for OutSystems 11. Not working on your version? Tell us about it!

 

 

 

 

 
Language:

 

 
 
 
OutSystems

リアクティブWebアプリでタスクボックスを使用する

タスクボックスはユーザーインターフェイスの一部です。これにより、ビジネスプロセステクノロジー(BPT)で発行されたタスクをユーザーが処理できるようになります。リアクティブWebアプリでタスクボックスを表示するには、Sample Reactive TaskboxコンポーネントのTaskboxブロックを使用します。

ブラウザ/アプリのタスクリスト

コンポーネントをインストールしてそれをアプリで参照し、[Interface]タブのUI Flows > SampleReactiveTaskbox > Taskbox > Taskboxに移動します。Taskboxブロックをいずれかのレイアウトブロックにドラッグし、アプリのすべての画面にタスクが表示されることを確認することを推奨します。

Service StudioのTaskboxブロック

サンプルプロセスの作成とタスクボックスの表示

この例に従うには、Price、Client、isPaidの各フィールドを持つInvoiceエンティティを作成します。また、すべての請求書を表示する画面と新しい請求書を作成する画面を作成します。

請求書を処理するサンプルプロセスを作成するには、以下の手順を実行します。新しい請求書が作成されると、ユーザーは支払いを処理し、ステータスを手動で支払い済みに設定する必要があります。

  1. Process]タブに移動し、Processesフォルダを右クリックして[Add Process]を選択します。プロセスのプロパティで以下の値を設定します。

    • Name]フィールドに「InvoiceProcessing」と入力します。
    • Launch On]フィールドをダブルクリックして、請求書を作成するサーバーアクションを選択します。これで、新しい請求書があるたびに新しいタスクが作成されるようになります。
    • Detail]フィールドに「Invoices and payments」と入力します。
  2. ProcessツールボックスからHuman Activityノードをドラッグして、プロセスフローのStartノードの下にドロップします。Human Activityのプロパティで以下の値を設定します。

    • Name]フィールドに「HumanActivityPayment」と入力します。
    • Label]フィールドに「Process the invoice payment」と入力します。
    • User]フィールドに「GetUserId()」と入力します。これで、アプリを読み込んでサインインしたユーザーがタスクを操作できるようになります。
    • Destination]リストで請求書を編集するときに使用する画面を選択し、適切な識別子を設定します。この例では、[Destination]で「MainFlow\InvoiceDetail」を使用し、識別子として「InvoiceId」を使用します。ユーザーがアプリでタスクをクリックすると、[InvoiceDetail]画面に移動します。
    • Detail]フィールドに「"Payment for #" + InvoiceId」と入力します。

    プロセスのフロー

  3. Interface]タブに戻ります。[UI Flows]タブのSampleReactiveTaskbox > Taskbox > Taskboxに移動します。Taskboxブロックを以下のようにドラッグします。

    • タスクボックスをある画面のみに表示する場合は、その画面にドラッグします。
    • タスクボックスをアプリのすべての画面に表示する場合は、レイアウトブロックにドラッグします。この例では、アプリが使用するレイアウトであるLayoutTopMenuのメインコンテンツセクションにTaskboxを配置しています。

      Service StudioのTaskboxブロック

  4. アプリをパブリッシュし、請求書のサンプルをいくつか追加します。ウィジェットにタスク数が表示されます。ウィジェットをクリックするとリストが展開されます。

    ブラウザ/アプリのタスク数

タスクボックスのカスタマイズ

タスクボックスをカスタマイズするには、Taskboxブロックを編集します。Taskboxブロックを右クリックして[Open in eSpace]を選択します。コンポーネントを編集してパブリッシュします。その後、メインアプリで参照を更新し、メインアプリをパブリッシュします。

  • Was this article helpful?