Skip to main content

 

パターン

 

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

 

OutSystems

ウィザード

複雑なタスクやプロセスをステップに分割します。

Wizardは、エンドユーザーが完了したり目標に到達したりする必要がある番号付きのステップや条件を示すために使用します。これを使用して、管理しやすい複数のステップに大きなタスクを分割します。通常、Wizardには前後のステップに移動するための明示的なボタンナビゲーションが含まれています。

使用方法

  1. Wizardパターンをプレビューにドラッグします。

  2. 必要な数のWizardItemを[Content]プレースホルダにドラッグします。

  3. コンテンツをプレースホルダで設定します。

  4. 必須の値を設定します。

  5. パブリッシュしてテストします。

入力パラメータ

ウィザード

入力名 説明 必須 デフォルト値
Orientation 方向を設定します。 Orientation Identifier False Entities.Orientation.Horizontal
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

Wizardアイテム

入力名 説明 必須 デフォルト値
Step ステップを設定します。 Step Identifier True なし
UseTopLabel Trueの場合、アイコンの上にラベルが配置されます。 Boolean False False
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.wizard .wizard.wizard-vertical ウィザードの方向が縦の場合
.wizard-item .wizard-item.active 現在アクティブなステップを定義します
.wizard-item .wizard-item.past 前のステップを定義します
.wizard-item .wizard-item.next 次のステップを定義します

高度なユースケース

ListRecordsを持つウィザードを使用する

  1. Wizardパターンを画面にドラッグします。

  2. [Content]プレースホルダに、ListRecordsウィジェットをドラッグします。

  3. ListRecordsのLine Separatorパラメータを「None」に設定します。

  4. ListRecordsウィジェットに、WizardItemパターンをドラッグします。

  5. WizardItemパターンで、Expressionを使用して必要なデータベースコンテンツを表示します。

  6. パブリッシュしてテストします。

Wizardのナビゲーションを作成する

この例では、続行ボタンと戻るボタンを備えた3ステップのウィザードを作成します。

  1. Wizardパターンをページにドラッグします。デフォルトでは、3つのWizardItemが含まれています。

  2. 「WizardStepIndex」という名前のローカルInteger型変数を作成し、これに現在のウィザードのステップを保持します。

  3. Buttonウィジェットを2つドラッグし、それぞれの名前を「Continue」および「Back」に設定します。

  4. 「WizardNavigation」という名前の新しい画面アクションを作成します。

  5. このアクションに「IsNext」という名前の必須Boolean型入力パラメータを作成します。

  6. Assignをドラッグし、WizardStepIndexを「If(IsNext, WizardStepIndex + 1, WizardStepIndex - 1)」に設定します。

  7. AjaxRefreshをドラッグし、画面のコンテンツコンテナをリフレッシュします。

  8. [Continue]ボタンのOnClickをWizardNavigationアクションに設定し、Methodを「Ajax Submit」に設定します。IsNextパラメータを[True]に設定します。

  9. [Back]ボタンでも同じようにしますが、パラメータは[False]に設定します。

  10. 各WizardItemで、Stepパラメータに以下のIf条件を追加します。 If(WizardStepIndex = 1, Entities.Step.Active, If(WizardStepIndex = 0, Entities.Step.Next, Entities.Step.Past))

  11. コンテンツコンテナをIfで囲み、条件を各ステップに設定します。

アクティブなステップのカスタムスタイル

  1. CSSエディタで以下のCSSを記述し、yourcolorを変更します。
.wizard-item.active .wizard-item-icon {
    border: 2px solid #fff
    background-color: yourcolor;
    color: #fff;
}

.wizard-item.active .wizard-item-icon::after {
    background-color: transparent;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px yourcolor;
    content: '';
    height: 100%;
    position: absolute;
    width: 100%;
}

2.または、CSS変数を使用します: var(--color-yourcolor).

.wizard-item.active .wizard-item-icon {
    border: 2px solid var(--color-neutral-0);
    background-color: var(--color-yourcolor);
    color: var(--color-neutral-0);
}

.wizard-item.active .wizard-item-icon::after {
    background-color: transparent;
    border-radius: 50%;
    border: 2px solid var(--color-neutral-0);
    box-shadow: 0 0 0 1px var(--color-yourcolor);
    content: '';
    height: 100%;
    position: absolute;
    width: 100%;
}

  • Was this article helpful?