ウィザード

Wizard UIパターンを使用すると、大規模で複雑なタスクやプロセスを管理しやすい細かい手順に分割できます。ウィザードでは、目標を達成するためにユーザーが完了する必要がある一連の手順や条件を示します。また通常、ウィザードには、前後の手順に移動するための明示的なボタンナビゲーションが含まれています。ウィザードの例としては、ソフトウェアのインストールウィザードやサインアップ画面などがあります。

Wizard UIパターンの使用方法

以下の例は、4つの手順で構成されるナビゲーションボタン付きのウィザードを作成する方法を示しています。この例では、以下の手順を実行します。

• ウィザードを作成する
• ウィザードにコンテンツを追加する
• ウィザードのナビゲーションを作成する

ウィザードを作成する

1. Service StudioのツールボックスでWizardを検索します。

   WizardウィジェットとWizard Itemウィジェットが表示されます（いずれもこのパターンを使用する際に必要です）。

   

2. ツールボックスから、Wizardウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

   

   デフォルトで、Wizardウィジェットには3つのWizard Itemウィジェットが含まれています。各Wizard Itemは手順を示します。必要に応じてWizard Itemを追加または削除することができます。

3. ツールボックスから、Wizard Itemをもう1つWizardパターンにドラッグします。

   

4. 新しいWizard Itemアイコンに「4」と入力します。

   

5. 各Wizard Itemの名前を以下のように変更します。

   • Shopping Details
   • Payment Details
   • Review Order
   • Confirm Order

   

6. 要素ツリーで、画面を右クリックしてドロップダウンから［Add Input Parameter］を選択し、入力パラメータを作成します。

   この入力パラメータによって、ユーザーに表示されるウィザード手順が制御されます。

   

7. ［Property］タブで、入力パラメータのプロパティを以下のように設定します。

   • Name: CurrentStep
   • Data Type: Integer
   • Is Mandatory: No
   • Default Value: 1

   

   Default Valueを「1」に設定することで、ウィザードが常に手順1から開始します。

8. 各Wizard Itemのステータス（アクティブな手順、過去の手順、次の手順）を定義するロジックを作成するため、1つ目のWizard Item（手順1）を選択し、［Properties］タブの［Step］ドロップダウンで［Expression Editor］を選択します。

   

9. Expressionエディタで以下のExpressionを入力します。

   If(CurrentStep = 1, Entities.Step.Active,If(CurrentStep > 1, Entities.Step.Past, Entities.Step.Next))

   

   このロジックの意味は以下のとおりです。

   • ユーザーが手順1を実行している場合、この手順がアクティブな手順としてウィザードに表示されます。
   • ユーザーが手順1より後の手順を実行している場合、手順1が過去（完了済み）の手順として表示されます。
   • ユーザーが手順1より前の手順を実行している場合、この手順が今後（次）の手順として表示されます。

10. すべてのWizard Itemで手順8～9を繰り返します。Expression内の数値1をそれぞれ2、3、4に置き換えます。

ウィザードにコンテンツを追加する

1. ツールボックスから、Ifウィジェットをアプリケーション画面のメインコンテンツ領域のWizardパターンのすぐ下にドラッグします。

   

2. ［Properties］タブで、Conditionプロパティに以下を入力します。

   CurrentStep = 1

   

   これで、手順がアクティブなときに画面に表示される内容を制御する条件が作成されました。

3. すべてのWizard Itemで手順1～2を繰り返します。Conditionプロパティをそれぞれ2、3、4に置き換えます。

4. Ifウィジェットの上のセクション（True）で、各手順の関連コンテンツを作成します。

   以下の例は、ラベルと入力ボックスを含むShipping Details手順を示しています。

   

ウィザードのナビゲーションを作成する

1. ツールボックスから、Buttonウィジェットを2つ画面にドラッグします。

2. ［Properties］タブで、ボタンの名前と動作（前と後）を定義します。

   プロパティ	Button 1	Button 2
   Label	"Previous"	"Next"
   Method	Navigate/Submit	Navigate/Submit

3. ユーザーが入力した情報がすべて手順間で渡されるようにするため、［Next］ボタンを選択して画面アクションを作成します。

4. ［Properties］タブの［Destination］ドロップダウンで、［New Screen Action］を選択します。

   

5. ツールボックスからAssignブロックを画面にドラッグし、Variableプロパティを「CurrentStep」に設定し、Valueプロパティを「CurrentStep + 1」に設定します。これで、ユーザーの入力が手順間で渡されるようになります。

   

6. ［Previous］ボタンで手順4および5を繰り返し、Variableプロパティを「CurrentStep」に設定し、Valueプロパティを「CurrentStep - 1」に設定します。

7. 該当する場合に［Next］ボタンを表示するため、［Next］ボタンを選択して右クリックし、［Enclose in If］を選択します。

   

8. ［Properties］タブで、Conditionプロパティに以下を入力します。

   CurrentStep < 4

   

   これで、ユーザーがウィザードの番号より後に移動できないようにする条件が作成されました。

9. ［Previous］ボタンで手順7～8を繰り返します。Conditionプロパティに「CurrentStep > 1」と入力します。これにより、該当する場合にのみ［Previous］ボタンが表示され、ユーザーがウィザードの番号より前に移動できないようになります。

各セクションの手順をすべて実行した後、モジュールをパブリッシュし、アプリでウィザードをテストできます。