Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

従来のWebアプリにのみ適用されます

 

 

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. 新しい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 Navigate
  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]ボタンが表示され、ユーザーがウィザードの番号より前に移動できないようになります。

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

プロパティ

ウィザード

プロパティ 説明
Orientation(Orientation Identifier型):オプション

ウィザードの方向を設定します。デフォルトでは、ウィザードは横方向に表示されます。

  • Entities.Orientation.Horizontal - ウィザードが横方向に表示されます。
  • Entities.Orientation.Vertical - ウィザードが縦方向に表示されます。
ExtendedClass(Text型):オプション

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

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

Wizardアイテム

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

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

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

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

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