Wizard

/libs/granite/ui/components/foundation/layouts/wizard

The wizard layout.

It is implementing foundation-wizard vocabulary.

The wizard is designed to expand to the container size, thus it is required to be contained in the container that has a size.

It has the following content structure at the layout resource:

granite:LayoutsWizard

formModestring

1. default
2. edit

The mode of the form. This property only makes sense when the main component is a form.

default

The form is shown in readonly mode, where the fields are optimized for reading, instead of editing.

edit

The form is shown in edit mode, where the fields are ready to handle user inputs.

formStylestring

1. vertical

1. vertical
2. aligned

The layout style of the form. This property only makes sense when the main component is a form.

vertical

The form fields (and their labels) are laid out in vertical manner.

aligned

The each form field is laid out side-by-side with its label.

Each wizard step can be any component, and specified using ItemDataSource. It also needs at very least satisfies the following content structure:

granite:LayoutsWizardStep

jcr:titlestring

mandatory

i18n

The wizard step title.

layoutConfig

1. granite:LayoutsWizardStepLayoutconfig

The item specific config for the layout.

granite:LayoutsWizardStepLayoutconfig

validationboolean

1. true

false to skip validation for this particular step. Otherwise the validation is performed when step change is about to occur.

Example:

+ mywizard
  - sling:resourceType = "granite/ui/components/foundation/form"
  + layout
    - sling:resourceType = "granite/ui/components/foundation/layouts/wizard"
  + items
    + step1
      - jcr:title = "Step 1"
      - sling:resourceType = "granite/ui/components/foundation/container"
    + step2
      - jcr:title = "Step 2"
      - sling:resourceType = "granite/ui/components/foundation/container"
      + layoutConfig
        - validation = "false"