Skip to content

Enable Preview Step

Coackroach edited this page Apr 24, 2019 · 1 revision

When enabled using the "enablePreview"=>true in the main options of the form wizard, after adding all the steps the last step which previews all the inputs entered for the steps. The user can navigate to the step by clicking on the list label inside the preview window. This option is turned off by default, and users will need to specify the enablePreview in the main options.

Customization Options

You can customize the preview steps elements using the following properties

  • classListGroup (string) : Css class for the list group defaults to 'list-group'.
  • classListGroupHeading (string) : Css class for the list group heading element, defaults to 'list-group-heading'.
  • classListGroupItem (string) : Css class for the list group item, defaults to 'list-group-item-success'.
  • classListGroupBadge (string) : Css class for the list group badge that displays the input label, defaults to 'success'.

You just need to use the enablePreview option and assign true under the main options see the code below.

echo FormWizard::widget([
    'enablePreview'=>true,
    'classListGroup' => 'list-group',
    'classListGroupHeading' => 'list-group-heading',
    'classListGroupItem' => 'list-group-item-info',
    'classListGroupBadge' => 'danger',
    'steps' => [
        [
            'model' => new AddressBook(),
            'title' => 'Address book',
            'description' => 'Add Addresses',
            'formInfoText' => 'Fill all fields'
        ],
        [
            'model' => new Shoots(),
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill All fields'
        ]
    ]
]);

It looks like below

You can’t perform that action at this time.