Wizard

/libs/granite/ui/components/coral/foundation/wizard

The wizard.

It is implementing foundation-wizard vocabulary.

It has the following content structure:

granite:Wizard
  1. granite:commonAttrs
  2. granite:renderCondition
  3. granite:container
jcr:titlestringel
mandatory
i18n

The title of the wizard.

cancelHrefstringel

The URL to navigate when the wizard is cancelled by the user.

trackingFeaturestring

The name of the feature that the interaction takes place.

See foundation-tracking.

trackingElementstring

The element this component represent for the purpose of tracking. By default the value of jcr:title is used.

See foundation-tracking.

Each item (the step) at least has the following content structure:

granite:WizardStep
jcr:titlestringel
mandatory
i18n

The wizard step title.

parentConfig
  1. granite:WizardStepParentconfig

The item specific config for the wizard.

granite:WizardStepParentconfig
validationboolean
  1. true

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

prev

The action component (e.g. button, hyperlink) to go to the previous step.

If this resource is not specified, a default action is generated:

prev action
If it is not the first step, a default generic prev action to go back to previous step is generated.
cancel action
If it is the first step, a cancel action is generated using cancelHref property of the parent resource.

Regarding tracking, there is no need to specify the action’s trackingFeature, trackingElement, etc as the wizard will manage them.

next

The action component (e.g. button, hyperlink) to go to the next step.

If this resource is not specified, a default generic next action to go to next step is generated.

Regarding tracking, there is no need to specify the action’s trackingFeature, trackingElement, etc as the wizard will manage them.

Example:

+ mywizard
  - sling:resourceType = "granite/ui/components/coral/foundation/wizard"
  - jcr:title = "Create Site"
  - cancelHref = '${empty header.Referer ? granite:concat("/sites.html", granite:encodeURIPath(requestPathInfo.suffix)) : header.Referer}'
  + items
    + step1
      - jcr:title = "Step 1"
      - sling:resourceType = "granite/ui/components/coral/foundation/container"
    + step2
      - jcr:title = "Step 2"
      - sling:resourceType = "granite/ui/components/coral/foundation/container"
      + parentConfig
        - validation = "false"
        + prev
          - sling:resourceType = "granite/ui/components/coral/foundation/button"
          - granite:class = "foundation-wizard-control"
          - text = "Back"
          + granite:data
            - foundation-wizard-control-action = "prev"
        + next
          - sling:resourceType = "granite/ui/components/coral/foundation/button"
          - granite:class = "foundation-wizard-control"
          - text = "Submit"
          + granite:data
            - foundation-wizard-control-action = "next"

Components: