Skip to main content

 

 

 

 
Language:
 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

ウィザード

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. Textウィジェットを[Icon]プレースホルダにドラッグし、1~4の数字を連続で入力します。

  5. 各[Label]プレースホルダに以下のテキストを入力します:

    • 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]タブの[Status]ドロップダウンで[Expression Editor]を選択します。

  9. Expressionエディタで以下のExpressionを入力し、[DONE]をクリックします。

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

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

    • ユーザーが手順1を実行している場合、この手順がアクティブな手順としてウィザードに表示されます。
    • ユーザーが手順1より後の手順を実行している場合、手順1が過去(完了済み)の手順として表示されます。
    • ユーザーが手順1より前の手順を実行している場合、この手順が今後(次)の手順として表示されます。
  10. すべてのWizard Itemで手順8~9を繰り返します。Expression内の数値1をそれぞれ2、3、4に置き換えます。

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

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

  2. Properties]タブの[Condition]ドロップダウンで[Expression Editor]を選択し、以下のロジックを入力して[DONE]をクリックします。

    CurrentStep = 1

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

  3. すべてのWizard Itemで手順1~2を繰り返します。Conditionのロジックをそれぞれ2、3、4に置き換えます。

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

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

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

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

  2. Properties]タブで、Nameプロパティに各ボタンの名前(この例では、「Previous」と「Next」)を入力します。

  3. ユーザーが入力した情報がすべて手順間で渡されるようにするため、[Next]ボタンを選択し、[Properties]タブの[OnClick]ドロップダウンで[New Client Action]を選択して、画面アクションを作成します。

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

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

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

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

    CurrentStep < 4

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

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

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

プロパティ

ウィザード

プロパティ 説明
IsVertical(Boolean型): オプション Trueの場合、ウィザードは縦方向に表示されます。Falseの場合、ウィザードは横方向に表示されます。これがデフォルトです。
ExtendedClass(Text型): オプション

Wizard UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません。これがデフォルトです。
  • "myclass" - 適用されるWizard UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるWizard UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。

Wizardアイテム

プロパティ 説明
Status(Step Identifier型): 必須

Wizardの現在の手順に対するWizard Itemのステータスを設定します。ExpressionをカスタマイズしてWizard Itemのステータスを設定することや、事前定義された値(Active、Next、Past)を使用することができます。

  • Entities.Step.Active - Wizard Itemをアクティブ(ユーザーが実行中の現在の手順)に設定します。
  • Entities.Step.Next - Wizard Itemを未完了(ユーザーが完了していない手順)に設定します。
  • Entities.Step.Past - 手順を非アクティブ(ユーザーがすでに完了した手順)に設定します。
UseTopLabel(Boolean型): オプション Trueの場合、アイコンの上にラベル(手順を説明するテキスト)が配置されます。Falseの場合、アイコンの下にラベルが配置されます。これがデフォルトです。
ExtendedClass(Text型): オプション

Wizard Item UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません。これがデフォルトです。
  • "myclass" - 適用されるWizard Item UIのスタイルにmyclassというスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるWizard Item UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?