Wizardコンポーネントを使用して、複数のステップから成るワークフローでユーザーを案内するUIを作成できます。ワークフローの各画面は、カスタマイズすることができます。ウィザードの各ステップの遷移は、ユーザーが入力した内容(ユーザーが次のステップを選択)、またはプログラム上の条件(「仮想ステップ」の使用)に基づいて決まります。

チュートリアル

カスタマー・サポート担当者がユーザーのアカウントを無効にするためのワークフロー構築を例に説明しましょう。ユーザーのアカウントを無効にする前に、無効にするユーザーが請求金額を全額支払い済みであることを確認します。また、作業が完了前に、カスタマー・サポートの担当者は、無効にした理由を記入します。

最初のステップの作成

まず、WizardコンポーネントをRetoolのキャンバスにドラッグしましょう。

ウィザードの最初のステップには基本的なUIを追加することができます。今回は、無効にしたいユーザー(John Smithさん)の最近の請求書を表示し、すべてが適切に支払われていることをカスタマー・サポート担当者が確認できるようにします。\

ステップの設定

次に、カスタマー・サポート担当者がユーザーの請求書ステータス承認結果に応じて異なるステップに移動させるようにします。WizardのInspectorパネル内のEdit workflowを押します。\

ワークフロー・ビルダー内で、まず、最初のステップ名を「Review unpaid invoices」に変更し、2つの新しいステップ(「Collect payments」と「Provide additional info」)を追加しましょう。Shiftキーを押しながら最初のステップと次のステップとの間をクリック＆ドラッグすることで、最初のステップと想定している次の2つのステップを紐付けることができます。現時点でのワークフローは以下のようになります。\

アプリに戻ると、ウィザードの下部にある2つのボタンのいずれか1つをカスタマー・サポート担当者が押すことができるようになっていることが分かります。これらのボタンに、押す条件がより分かりやすい名前を付けましょう。例えば、「Review unpaid invoices」から「Provide additional info」に遷移する矢印をクリックしてNavigation button textを「Confirm no unpaid invoices」に変更します。\

仮想ステップ

ユーザーに未払いの請求書がないことをカスタマー・サポート担当者が確認したときに、無効にする理由を入力します。\

「Reason for deactivation」として選択した理由に応じて、ウィザードの異なるステップにカスタマー・サポート担当者が移動するようもしたい場合に仮想ステップが役に立ちます。

まず、ワークフロー・エディター内に後続のステップを追加しましょう。ステップの「Virtual step」のトグルをオンにすることで、そのステップを仮想ステップに変更することができます。\

「Virtual step」から「Company shut down」への矢印に、遷移をトリガーする条件を定めることができます。今回は、「Reason for deactivation」ドロップダウンで「Company shut down」を選択した場合に遷移をトリガーします。\

以上です。カスタマー・サポート担当者が「Company shut down」を選択して「Next」を押すと、「Company shut down」のステップに自動的に移動します。\