class atk4\ui\Wizard


Wizard is a high-level component, which makes use of callback to track step progression through the stages. It has an incredibly simple syntax for building UI and display a lovely UI for you.



Introduced in UI v1.4

Basic Usage

atk4\ui\Wizard::addStep($title, $callback)

Start by creating Wizard inside your render tree:

$wizard = $app->add('Wizard');

Next add as many steps as you need specifying title and a PHP callback code for each:

$wizard->addStep('Welcome', function ($wizard) {

    $wizard->add(['Message', 'Welcome to wizard demonstration'])->text
        ->addParagraph('Use button "Next" to advance')
        ->addParagraph('You can specify your existing database connection string which will be used
        to create a table for model of your choice');


Your callback will also receive $wizard as the first argument. Method addStep returns Step, which is described below. You can also provide first argument to addStep as a seed or an object:

    'Set DSN',
    'description'=>'Database Connection String'
], function ($p) {
    // some code here

You may also specify a single Finish callback, which will be used when wizard is complete:

$wizard->addFinish(function ($wizard) {
    $wizard->add(['Header', 'You are DONE', 'huge centered']);


When you create wizard you may specify some of the following options:

property atk4\ui\Wizard::$defaultIcon

Other properties are used during the execution of the wizard.

Step Tracking

property atk4\ui\Wizard::$stepCallback

Wizard employs Callback to maintain which step you currently are on. All steps are numbered started with 0.


Wizard currently does not enforce step completion. Changing step number in the URL manually can take you to any step. You can also go backwards and re-do steps. Section below explains how to make wizard enforce some restrictions.

property atk4\ui\Wizard::$currentStep

When Wizard is initialized, it will set currentStep to a number (0, 1, 2, ..) corresponding to your steps and finish callback, if you have specified it.

property atk4\ui\Wizard::$buttonPrev
property atk4\ui\Wizard::$buttonNext
property atk4\ui\Wizard::$buttonFinish

Those properties will be initialized with the buttons, but some of them may be destroyed by the render step, if the button is not applicable. For example, first step should not have “prev” button. You can change label or icon on existing button.

Code Placement

As you build up your wizard, you can place code inside callback or outside. It will have a different effect on your wizard:

$wizard->buttonNext->icon = 'person';

$wizard->addStep('Step 3', function($wizard) {
    $wizard->buttonNext->icon = 'book';

Step defines the callback and will execute it instantly if the step is active. If step 3 is active, the code is executed to change icon to the book. Otherwise icon will remain ‘person’. Another handy technique is disabling the button by adding “disabled” class.


class atk4\ui\Step
property atk4\ui\Step::$title
property atk4\ui\Step::$description
property atk4\ui\Step::$icon
property atk4\ui\Step::$wizard

Each step of your wizard serves two roles. First is to render title and icon above the wizard and second is to contain a callback code.