Class

WizardPanel

kiss.ux.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.

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: () => {
     // Perform action
  }
})

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: () => {
             // Perform action
          }
      }
  ]
})
myBlock.render()
Parameters:
Name Type Attributes Description
config object
action object

Action triggered when the last page of the wizard is validated

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/ux/wizardPanel/wizardPanel.js, line 31

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/ux/wizardPanel/wizardPanel.js, line 236

# previous()

Navigate to the previous wizard page

View Source client/ux/wizardPanel/wizardPanel.js, line 250

# 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/ux/wizardPanel/wizardPanel.js, line 226