Skip to main content

 

 

 

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

Wizardのリファレンス

レイアウトおよびクラス

CSSセレクタ

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

高度なユースケース

ListRecordsを持つWizardパターンを使用する

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

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

1.ListRecordsのLine Separatorパラメータを[None]に設定します。

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

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

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

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

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

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

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

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

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

![](images/wizard-4-ss.png)

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

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

![](images/wizard-5-ss.png)

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

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

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

![](images/wizard-6-ss.png)

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

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

![](images/wizard-7-ss.png?width=750)  
![](images/wizard-8-ss.png?width=750)

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

これを実装するには、以下のいずれかの方法を使用できます。

*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%;
    }

*var(--color-yourcolor)などのCSS変数を使用します。

    .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%;
    }

![](images/wizard-9-ss.png?width=750)
  • Was this article helpful?