Class

WizardPanel

kiss.ui.WizardPanel(config)

The Wizard Panel derives from Panel.

It's a panel where items are displayed one at a time (each wizard page) with helper buttons (next, previous) to navigate through the pages. The panel title is updated with the current page number.

Constructor

# new WizardPanel(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:

Create the Web Component and call its init method:

const myWizardPanel = document.createElement("a-wizardpanel").init(config)

Or use the shorthand for it:

const myWizardPanel = createWizardPanel({

  // Can have the same config properties as a panel
  title: "Setup"
  icon: "fas fa-wrench",
  headerBackgroundColor: "#00aaee",
  closable: true,
  draggable: true,
  modal: true,
  display: "flex"
  flexFlow: "column",
  padding: "10px",

  // Wizard pages
  items: [
     wizardPage1,
     wizardPage2,
     wizardPage3
  ],
  actionText: "Proceed",
  action: function() {
     // Get the data of all fields of the wizard
     const data = this.getData()
    // Do something with the data
  }
})

myWizardPanel.render()

Or directly declare the config inside a container component:

const myBlock = createBlock({
  items: [
      {
          type: "wizardpanel",
          title: "Foo",
          items: [
              wizardPage1,
              wizardPage2,
              wizardPage3
          ],
          actionText: "Proceed",
          action: function() {
             // Get the data of all fields of the wizard
             const data = this.getData()
             // Do something with the data
          }
      }
  ]
})
myBlock.render()

If you need to validate a page before navigating to the next one, you can add a validate method to the page:

const wizardPage1 = {
 type: "panel", // or "block"
 items: [
     // Page items
 ],
 methods: {
    validate: function() {
      // Validate the page
      return true // or false
    }
 }
}

Use this in combination with "pageValidation" property in the wizard panel config.
If you don't need a specific validation, "pageValidation" will validate all the pages as normal forms, checking for validation rules of each field.
Parameters:
Name Type Attributes Description
config object
action function

Action triggered when the last page of the wizard is validated. The function is called with the wizard panel as context, so that this.getData() can be used to get the data of all fields of the wizard.

actionText object <optional>

Text of the action button of the last page, like "Done", "Proceed", "Let's go". Default = "OK"

pageValidation boolean <optional>

If true, validate each page when navigating next/previous. Default = false

View Source client/ui/containers/wizardPanel.js, line 32

this

Generated markup

<a-wizardpanel class="a-panel">
 <div class="panel-header">
     <span class="panel-icon"></span>
     <span class="panel-title"></span>
     <span class="panel-custom-buttons"></span>
     <span class="panel-button-expand-collapse"></span>
     <span class="panel-button-maximize"></span>
     <span class="panel-button-close"></span>
 </div>
 <div class="panel-body">
     <!-- Panel items are inserted here -->
 </div>
</a-wizardpanel>

Methods

# next()

Navigate to the next wizard page

View Source client/ui/containers/wizardPanel.js, line 301

# previous()

Navigate to the previous wizard page

View Source client/ui/containers/wizardPanel.js, line 317

# validatePage(pageIndexopt)

Validates the form of a wizard page. Prevents from navigating to the next page if the form is not validated.

Parameters:
Name Type Attributes Description
pageIndex number <optional>

Optional wizard's page to validate. If not specified, tries to validate the current page.

View Source client/ui/containers/wizardPanel.js, line 291