Wizard
======

.. granite:servercomponent:: /libs/granite/ui/components/foundation/layouts/wizard
   :layout:
   :deprecated:

   The wizard layout.

   It is implementing :doc:`/jcr_root/libs/granite/ui/components/foundation/clientlibs/foundation/vocabulary/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:

   .. gnd:gnd::

      [granite:LayoutsWizard]

      /**
       * 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.
       */
      - formMode (String) < 'default', 'edit'

      /**
       * 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.
       */
      - formStyle (String) = 'vertical' < 'vertical', 'aligned'

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

   .. gnd:gnd::

      [granite:LayoutsWizardStep]

      /**
       * The wizard step title.
       */
      - jcr:title (String) mandatory i18n

      /**
       * The item specific config for the layout.
       */
      + layoutConfig (granite:LayoutsWizardStepLayoutconfig)


      [granite:LayoutsWizardStepLayoutconfig]

      /**
       * ``false`` to skip validation for this particular step. Otherwise the validation is performed when step change is about to occur.
       */
      - validation (Boolean) = 'true'

   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"