Skip to content

Customizing form fields

Coackroach edited this page Jan 19, 2020 · 2 revisions

You can customize the form fields by replacing the fields with the widgets OR change the layout to totally your desired layout, below are a few examples of customizing the fields like,

  • disable a single field from showing
  • rendering a text-area field
  • rendering a simple drop-down
  • rendering radio button list
  • Using a widget instead of a field, i.e DatePicker
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'
            ]
        ]
    ]);
Clone this wiki locally