# 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 |
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
# previous()
Navigate to the previous wizard page
# 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. |