Formwizard Demos



Code sample

use buttflattery\formwizard\FormWizard;
echo FormWizard::widget([
    'steps'=>[
        [
            'model'=>$shootsModel,
            'title'=>'My Shoots',
            'description'=>'Add your shoots',
            'formInfoText'=>'Fill all fields'
        ],
        [
            'model'=> $shootTagModel,
            'title'=>'My Shoots',
            'description'=>'Add your shoots',
            'formInfoText'=>'Fill all fields'
        ],
    ]
]);
Fill all fields

Fill all fields


Customizing Form Fields

Code sample

use buttflattery\formwizard\FormWizard;
use yii\jui\DatePicker;
echo FormWizard::widget([
        'steps' => [
            [
                'model' => $shootsModel,
                'title' => 'My Shoots',
                'description' => 'Add your shoots',
                'formInfoText' => 'Fill all fields',
                'fieldConfig' => [
                    'updated_at'=>false, //hide a specific field
                    'description' => [
                        'options' => [
                            'type' => 'textarea',
                            'class' => 'form-control',
                            'cols' => 25,
                            'rows' => 10
                        ]
                    ],
                    'shoot_type' => [
                        'options' => [
                            'type' => 'dropdown',
                            'itemsList' => [0 => 'Indoor', 1 => 'Outdoor'], //the list can be from the database
                            'prompt' => 'Please select a value',
                        ]
                    ],
                    'active' => [
                        'labelOptions' => [
                            'label' => 'Activate User'
                        ],
                        'options' => [
                            'type' => 'radio',
                            'itemsList' => [0 => 'No', 1 => 'Yes'], // the radio inputs to be created for the radioList
                        ]
                    ],
                    'created_at' => [
                        'widget' => DatePicker::class, //widget class name
                        'options' => [ // you will pass the widget options here
                            'options' => [
                                'placeholder' => 'Select a Date',
                                'id' => 'my-datepicker',
                                'class' => 'form-control'
                            ],
                            'dateFormat'=>'short'
                        ],
                    ]
                ]
            ],
            [
                'model'=>$shootTagModel,
                'title'=>'Shoot Tags',
                'description'=>'Add Shoot Tags',
                'formInfoText'=>'Fill all required fields'
            ]
        ]
    ]);
Fill all fields

This is a hint text

Fill all required fields


Single Model Across Steps

Code sample

To use a single model across steps you can use the disabled and only options intelligently, make sure you are not using both of these options for the same step.

use buttflattery\formwizard\FormWizard;
echo FormWizard::widget([
    'steps' => [
        [
            'model' => $shootsModel,
            'title' => 'Shoot Description',
            'description' => 'Provide description only',
            'formInfoText' => 'The date fields(created_at, updated_at), and shoot_type, are disabled for this step by using the `disabled` option.',
            'fieldConfig' => [
                'except' => ['created_at', 'updated_at', 'shoot_type'], // all fields except these will be added in the step
            ]
        ],
        [
            'model' => $shootsModel,
            'title' => 'Shoot Dates',
            'description' => 'Provide dates only',
            'formInfoText' => 'Provide Shoot Dates',
            'fieldConfig' => [
                'only' => ['created_at', 'updated_at', 'shoot_type'], // only these field will be added in the step, rest all will be hidden/ignored.
            ]
        ]
    ]
]);
info_outline
The date fields(created_at, updated_at), and shoot_type, are disabled for this step by using the `disabled` option.

Provide Shoot Dates
 


Multiple Models Single Step

Code sample

To use a multiple model across steps you can pass the array of models to the model option.

use buttflattery\formwizard\FormWizard;
echo FormWizard::widget([
    'formOptions' => [
        'id' => 'my_form_multi_model_single_step',
        'options'=>[
            'class'=>'form-inline'
        ],
    ],
    'steps' => [
        [
            'model' => [$shootsModel,$shootTagModel],
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields',
        ],
        [
            'model' => $userModel,
            'title' => 'Shoot Tags',
            'description' => 'Add your shoot tags',
            'formInfoText' => 'Fill all fields',
        ],
    ],
]);
Fill all fields

Fill all fields


Disable ActiveForm Validation

Code sample

use buttflatteryormwizard\FormWizard;
echo FormWizard::widget([
    'formOptions'=>[
        'id'=>'my_form',
        'enableClientValidation'=>false,
    ],
    'steps' => [
        [
            'model' => $shootsModel,
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields'
        ],
        [
            'model' => $shootTagModel,
            'title' => 'Shoot Tags',
            'description' => 'Add your shoot tags',
            'formInfoText' => 'Fill all fields'
        ],
    ]
]);
Fill all fields

Fill all fields


Tabular Step

Code sample

//View code
use buttflattery\formwizard\FormWizard;

echo FormWizard::widget(
    [
        'formOptions' => [
            'id' => 'my_form_tabular'
        ],
        'steps' => [
            [
                //should be a single model or array of Activerecord model objects but for a single model only see wiki on github
                'model' => [$shootTag],

                //set step type to tabular
                'type' => FormWizard::STEP_TYPE_TABULAR,

                'fieldConfig' => [
                    'shoot_id' => [
                        'containerOptions' => [
                            'class' => 'form-group'
                        ],
                        'options' => [
                            'type' => 'dropdown',
                            'itemsList' => ArrayHelper::map(Shoots::find()->all(), 'id', 'name'),
                            'prompt' => 'Please select a value'
                        ]
                    ],
                    'tag_id' => [
                        'widget' => Select2::class,
                        'containerOptions' => [
                            'class' => 'form-group'
                        ],
                        'options' => [
                            'data' => ArrayHelper::map(Tags::find()->all(), 'id', 'name'),
                            'options' => [
                                'class' => 'form-control'
                            ],
                            'theme' => Select2::THEME_BOOTSTRAP,
                            'pluginOptions' => [
                                'allowClear' => true,
                                'placeholder' => 'Select Tag'
                            ]
                        ],

                        //set tabular events for select2 fix which doesnot work correctly after cloning
                        'tabularEvents' => [

                            'beforeClone' => "function(event, params){
                                //fix for select2 destroy the plugin

                                let element = $(this);
                                element.select2('destroy');
                            }",
                            "afterClone" => "function(event, params){
                                //bind select2 again after clone

                                let element = $(this);
                                let elementId = $(this).attr('id');
                                let dataKrajee = eval(element.data('krajee-select2'));
                                let dataSelect2Options = element.data('s2-options');
                                $.when(element.select2(dataKrajee)).done(initS2Loading(elementId, dataSelect2Options));
                            }",
                            "afterInsert" => "function(event,params){
                                //initialize the options for the select2 after initializing

                                let selectElement = $(this).find('.field-shoottag-'+params.rowIndex+'-tag_id > select');
                                let dataKrajee = eval(selectElement.data('krajee-select2'));
                                selectElement.select2(dataKrajee);
                            }"
                        ]
                    ]
                ]
            ],
            [
                'model' => $shootsModel,
                'title' => 'My Shoots',
                'description' => 'Add your shoots',
                'formInfoText' => 'Add all fields'
            ]
        ]
    ]
);
Add All Tags

 

Add all fields

Preview Steps

Code sample

use buttflattery\formwizard\FormWizard;
echo FormWizard::widget([
    'steps'=>[
        [
            'model'=>$shootsModel,
            'title'=>'My Shoots',
            'description'=>'Add your shoots',
            'formInfoText'=>'Fill all fields'
        ],
        [
            'model'=> $shootTagModel,
            'title'=>'My Shoots',
            'description'=>'Add your shoots',
            'formInfoText'=>'Fill all fields'
        ],
    ]
]);
Fill all fields

Fill all fields

Click any of the steps below to edit them

Custom Field Order

Code sample

//View code
use buttflattery\formwizard\FormWizard;
echo FormWizard::widget([
    'steps' => [
        [
            'model' => $shootsModel,
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields'
            'fieldOrder'=>['name','description','active']
        ],

    ]
]);
Fill all fields


Enable Ajax Validation

Code sample

//View code
use buttflatteryormwizard\FormWizard;
echo FormWizard::widget([
    'formOptions'=>[
        'id'=>'my_form_ajax',
        'enableClientValidation'=>false,
        'enableAjaxValidation'=>true,
    ],
    'steps' => [
        [
            'model' => $shootsModel,
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields'
        ],
        [
            'model' => $shootTagModel,
            'title' => 'Shoot Tags',
            'description' => 'Add your shoot tags',
            'formInfoText' => 'Fill all fields'
        ],
    ]
]);

//controller code
public function actionIndex()
{
    $shootModel = new \app\models\Shoots();
    $shootTagModel = new \app\models\ShootTag();


    //for ajax validation
    if (Yii::$app->request->isAjax && Yii::$app->request->isPost) {
        Yii::$app->response->format = Response::FORMAT_JSON;
        $shootModel->load(Yii::$app->request->post());
        $shootTagModel->load(Yii::$app->request->post());
        return array_merge(ActiveForm::validate($shootModel),ActiveForm::validate($shootTagModel) );
    }


    return $this->render('index', ['shootsModel' => $shootModel, 'shootTagModel' => $shootTagModel]);
}
Fill all fields

Fill all fields


Add Custom Buttons

Code sample

//View code
use buttflatteryormwizard\FormWizard;
$js = <<< JS
    var mybutton = $( '<button id="new"></button>' ).text( 'New Button' )
    .addClass( 'btn btn-warning' ).on("click",function(e){
        e.preventDefault();
        alert("hello");
    });
\JS;
$this->registerJs($js, yii\web\View::POS_READY);

echo FormWizard::widget([
    'toolbarExtraButtons' => new \yii\web\JsExpression('[mybutton]'),
    'steps' => [
        [
            'model' => $shootsModel,
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields'
        ],
        [
            'model' => $shootTagModel,
            'title' => 'Shoot Tags',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields'
        ],
    ]
]);
Fill all fields

Fill all fields

Enable Form Persistence

Code sample

echo FormWizard::widget(
    [
        'enablePersistence' => true,
        'steps' => [
            [
                'model' => $shootsModel,
                'title' => 'My Shoots',
                'description' => 'Add your shoots',
                'formInfoText' => 'Fill all fields'
            ],
            [
                'model' => $shootTagModel,
                'title' => 'Shoot Tags',
                'description' => 'Add your shoot tags',
                'formInfoText' => 'Fill all fields'
            ]
        ]
    ]
);

Try typing into the form below and then refresh the page and click Restore

Fill all fields

Fill all fields


Theme Arrows

Code sample

//View code
use buttflatteryormwizard\FormWizard;

echo FormWizard::widget([
    'theme' => FormWizard::THEME_ARROWS,
    'steps' => [
        [
            'model' => $shootsModel,
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields'
        ],
        [
            'model' => $shootTagModel,
            'title' => 'Shoot Tags',
            'description' => 'Add your shoot tags',
            'formInfoText' => 'Fill all fields'
        ],
    ]
]);
Fill all fields

Fill all fields


Theme Circles

Code sample

//View code
use buttflatteryormwizard\FormWizard;

echo FormWizard::widget([
    'theme' => FormWizard::THEME_CIRCLES,
    'steps' => [
        [
            'model' => $shootsModel,
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields'
        ],
        [
            'model' => $shootTagModel,
            'title' => 'Shoot Tags',
            'description' => 'Add your shoot tags',
            'formInfoText' => 'Fill all fields'
        ],
    ]
]);
Fill all fields

Fill all fields


Theme Dots

Code sample

//View code
use buttflatteryormwizard\FormWizard;

echo FormWizard::widget([
    'theme' => FormWizard::THEME_DOTS,
    'steps' => [
        [
            'model' => $shootsModel,
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields'
        ],
        [
            'model' => $shootTagModel,
            'title' => 'Shoot Tags',
            'description' => 'Add your shoot tags',
            'formInfoText' => 'Fill all fields'
        ],
    ]
]);
Fill all fields

Fill all fields


Theme Material

Code sample

//View code
use buttflatteryormwizard\FormWizard;

echo FormWizard::widget([
    'theme' => FormWizard::THEME_MATERIAL,
    'steps' => [
        [
            'model' => $shootsModel,
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields'
        ],
        [
            'model' => $shootTagModel,
            'title' => 'Shoot Tags',
            'description' => 'Add your shoot tags',
            'formInfoText' => 'Fill all fields'
        ],
    ]
]);
Fill all fields

Fill all fields

Theme Material(Vertical)

Code sample

//View code
use buttflattery\formwizard\FormWizard;

echo FormWizard::widget([
    'theme' => FormWizard::THEME_MATERIAL_V,
    'steps' => [
        [
            'model' => $shootsModel,
            'title' => 'My Shoots',
            'description' => 'Add your shoots',
            'formInfoText' => 'Fill all fields'
        ],
        [
            'model' => $shootTagModel,
            'title' => 'Shoot Tags',
            'description' => 'Add your shoot tags',
            'formInfoText' => 'Fill all fields'
        ],
    ]
]);
Fill all fields

Fill all fields