LazyStep

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

The component to render the lazy loaded step. Use this component when branching of the steps is needed that is usually depending on the user input in the preceding steps.

It has the following content structure:

granite:WizardLazyStep

jcr:titlestring

mandatory

i18n

The wizard step title.

validationboolean

1. true

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

prev

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

next

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

content

mandatory

The actual content of the step.

Example

Given the example below, only “Step 1” is rendered. Only when the next button is clicked, the new steps (“Step2” and “Step 3”) are loaded and added lazily:

+ /apps/mywizard
  - sling:resourceType = "granite/ui/components/coral/foundation/wizard"
  + items
    + step1
      - jcr:title = "Step 1"
      - sling:resourceType = "granite/ui/components/coral/foundation/container"
      + items
        + field1
          - sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
          - name = "field1"
      + parentConfig
        + prev
          - sling:resourceType = "granite/ui/components/coral/foundation/anchorbutton"
          - granite:class = "foundation-wizard-control"
          - text = "Cancel"
          + granite:data
            - foundation-wizard-control-action = "cancel"
        + next
          - sling:resourceType = "granite/ui/components/coral/foundation/button"
          - granite:class = "foundation-wizard-control"
          - text = "Next"
          + granite:data
            - foundation-wizard-control-action = "next"
            - foundation-wizard-control-src = '${granite:uritemplate("/apps/mylazysteps.html{?field1}")}'

+ /apps/mylazysteps
  - sling:resourceType = "granite/ui/components/coral/foundation/container"
  + items
    + step2
      - jcr:title = "Step 2"
      - sling:resourceType = "granite/ui/components/coral/foundation/wizard/lazystep"
      + 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 = "Next"
        + granite:data
          - foundation-wizard-control-action = "next"
      + content
        - sling:resourceType = "granite/ui/components/coral/foundation/container"
    + step3
      - jcr:title = "Step 3"
      - sling:resourceType = "granite/ui/components/coral/foundation/wizard/lazystep"
      + prev
        - sling:resourceType = "granite/ui/components/coral/foundation/button"
        - granite:class = "foundation-wizard-control"
        - text = "Back"
        + granite:data
          - foundation-wizard-control-action = "back"
      + next
        - sling:resourceType = "granite/ui/components/coral/foundation/button"
        - granite:class = "foundation-wizard-control"
        - text = "Next"
        + granite:data
          - foundation-wizard-control-action = "next"
      + content
        - sling:resourceType = "granite/ui/components/coral/foundation/container"