Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

従来の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パターンを画面にドラッグします。

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

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

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

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

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

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

この例では、続行ボタンと戻るボタンを備えた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で囲み、条件を各ステップに設定します。


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

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

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

  • Was this article helpful?