ウィザード
複雑なタスクやプロセスをステップに分割します。
Wizardは、エンドユーザーが完了したり目標に到達したりする必要がある番号付きのステップや条件を示すために使用します。これを使用して、管理しやすい複数のステップに大きなタスクを分割します。通常、Wizardには前後のステップに移動するための明示的なボタンナビゲーションが含まれています。
使用方法
-
Wizardパターンをプレビューにドラッグします。
-
必要な数のWizardItemを［Content］プレースホルダにドラッグします。
-
コンテンツをプレースホルダで設定します。
-
必須の値を設定します。
-
パブリッシュしてテストします。
入力パラメータ
ウィザード
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| 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を持つウィザードを使用する
-
Wizardパターンを画面にドラッグします。
-
［Content］プレースホルダに、ListRecordsウィジェットをドラッグします。
-
ListRecordsのLine Separatorパラメータを「None」に設定します。
-
ListRecordsウィジェットに、WizardItemパターンをドラッグします。
-
WizardItemパターンで、Expressionを使用して必要なデータベースコンテンツを表示します。
-
パブリッシュしてテストします。
Wizardのナビゲーションを作成する
この例では、続行ボタンと戻るボタンを備えた3ステップのウィザードを作成します。
-
Wizardパターンをページにドラッグします。デフォルトでは、3つのWizardItemが含まれています。
-
「WizardStepIndex」という名前のローカルInteger型変数を作成し、これに現在のウィザードのステップを保持します。
-
Buttonウィジェットを2つドラッグし、それぞれの名前を「Continue」および「Back」に設定します。
-
「WizardNavigation」という名前の新しい画面アクションを作成します。
-
このアクションに「IsNext」という名前の必須Boolean型入力パラメータを作成します。
-
Assignをドラッグし、WizardStepIndexを「
If(IsNext, WizardStepIndex + 1, WizardStepIndex - 1)」に設定します。
-
AjaxRefreshをドラッグし、画面のコンテンツコンテナをリフレッシュします。
-
［Continue］ボタンのOnClickをWizardNavigationアクションに設定し、Methodを「Ajax Submit」に設定します。IsNextパラメータを［True］に設定します。
-
［Back］ボタンでも同じようにしますが、パラメータは［False］に設定します。
-
各WizardItemで、Stepパラメータに以下のIf条件を追加します。
If(WizardStepIndex = 1, Entities.Step.Active, If(WizardStepIndex = 0, Entities.Step.Next, Entities.Step.Past)) -
コンテンツコンテナを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%;
}
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%;
}
