Yii 2 Builder   Tips

Latest Stable Version Latest Unstable Version Total Downloads Monthly Downloads Daily Downloads
Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-krajee-base extension which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The yii2-builder package provides a couple of great form builder utilities for Yii Framework 2.0. The extension allows you to build both single-row and multi-row/tabular forms for Yii Framework 2.0. It also offers good compatibility with the grid system, form layouts, and table styles of Bootstrap 3.x.

The Form Builder widget allows you to build a form through a configuration array. The widget provides these features:

  • Configure your form fields from a model extending yii\base\model or yii\db\ActiveRecord.
  • Ability to support various Bootstrap 3.x form layouts. Uses the advanced kartik\widgets\ActiveForm.
  • Use Bootstrap column/builder layout styling by just supplying columns property.
  • Build complex layouts (for example single, double, or multi columns in the same layout) - by reusing the widget for building your attributes.
  • Tweak ActiveForm defaults to control field options, styles, templates, and layouts.
  • With release v1.5.0, the extension now supports the Form Builder to be used without ActiveForm (i.e with normal HTML form and without model).
  • Configure your own hints to display below each active field attribute.
  • Various Bootstrap 3.x styling features are available by default. However, one can easily customize and theme it to one's liking using any CSS framework.
  • Supports and renders HTML input types (uses kartik\widgets\ActiveField) including input widgets

use kartik\widgets\ActiveForm;
use kartik\builder\Form;
$form = ActiveForm::begin();
echo Form::widget([
    'model' => $model,
    'form' => $form,
    'columns' => 2,
    'attributes' => [
        'username' => ['type'=>Form::INPUT_TEXT, 'options'=>['placeholder'=>'Enter username...']],
        'password' => ['type'=>Form::INPUT_PASSWORD, 'options'=>['placeholder'=>'Enter password...']],
        'rememberMe' => ['type'=>Form::INPUT_CHECKBOX],
    ]
]);
ActiveForm::end();

Create bootstrap grid layouts in a snap. The Form Grid Builder widget offers an easy way to configure your form inputs as a bootstrap grid layout and a single array configuration. It basically uses multiple instances of the \kartik\builder\Form widget above to generate this grid. One needs to just setup the rows for the grid, where each row will be an array configuration as needed by the Form widget. However, most of the common settings like model, form, columns etc. can be defaulted at FormGrid widget level.

use kartik\widgets\ActiveForm;
use kartik\builder\FormGrid;
$form = ActiveForm::begin();
echo FormGrid::widget([
    'model' => $model,
    'form' => $form,
    'autoGenerateColumns' => true,
    'rows' => [
        [
            'attributes' => [
                'username' => ['type'=>Form::INPUT_TEXT, 'options'=>['placeholder'=>'Enter username...']],
                'password' => ['type'=>Form::INPUT_PASSWORD, 'options'=>['placeholder'=>'Enter password...']],
                'rememberMe' => ['type'=>Form::INPUT_CHECKBOX],
            ],
        ],
        [
            'attributes' => [
                'first_name' => ['type'=>Form::INPUT_TEXT, 'options'=>['placeholder'=>'Enter first name...']],
                'last_name' => ['type'=>Form::INPUT_TEXT, 'options'=>['placeholder'=>'Enter last name...']],
            ]
        ]
    ]
]);
ActiveForm::end();

The tabular form allows you to update information from multiple models (typically used in master-detail forms).

Note

The TabularForm widget depends on and uses the yii2-grid module. Hence, the gridview module needs to be setup in your Yii configuration file. An example is shown below:
'modules' => [
   'gridview' =>  [
        'class' => '\kartik\grid\Module'
    ]
];

The widget provides these features:

  • Supports all input types as mentioned in the Form builder widget
  • The widget works exactly like a Yii GridView with an ActiveDataProvider, but allows you to batch update fields and submit the form.
  • Supports features of the GridView like pagination and sorting.
  • With release v1.5.0, the extension now supports the Form Builder to be used with all data providers and without ActiveForm (i.e with normal HTML form and without model).
  • Allows each row selection for selective batch processing.
  • Highlight selected table rows.
  • Allows you to add and configure action buttons for each row.
  • Allows you to add batch action buttons for the grid.
  • Configure your own hints to display below each active field attribute.
  • Various Bootstrap 3.x styling features are available by default. However, one can easily customize and theme it to one\'s liking using any CSS framework.
  • Advanced table styling, columns, and layout configuration by using the features available in the kartik\builder\GridView and kartik\widgets\ActiveForm widgets.
  • One can easily read and manage the tabular input data using the loadMultiple and validateMultiple functions in yii\base\Model.
  • use kartik\builder\TabularForm;
    use kartik\grid\GridView;
    $form = ActiveForm::begin();
    echo TabularForm::widget([
        'form' => $form,
        'dataProvider' => $dataProvider,
        'attributes' => [
            'id' => ['type' => TabularForm::INPUT_STATIC, 'columnOptions'=>['hAlign'=>GridView::ALIGN_CENTER]],
            'name' => ['type' => TabularForm::INPUT_TEXT],
            'color' => [
                'type' => TabularForm::INPUT_WIDGET, 
                'widgetClass' => \kartik\widgets\ColorInput::classname()
            ],
            'author_id' => [
                'type' => TabularForm::INPUT_DROPDOWN_LIST, 
                'items'=>ArrayHelper::map(Author::find()->orderBy('name')->asArray()->all(), 'id', 'name')
            ],
            'buy_amount' => [
                'type' => TabularForm::INPUT_TEXT, 
                'options'=>['class'=>'form-control text-right'], 
                'columnOptions'=>['hAlign'=>GridView::ALIGN_RIGHT]
            ],
            'sell_amount' => [
                'type' => TabularForm::INPUT_STATIC, 
                'columnOptions'=>['hAlign'=>GridView::ALIGN_RIGHT]
            ],
        ],
        'gridSettings' => [
            'floatHeader' => true,
            'panel' => [
                'heading' => '<h3 class="panel-title"><i class="glyphicon glyphicon-book"></i> Manage Books</h3>',
                'type' => GridView::TYPE_PRIMARY,
                'after'=> 
                    Html::a(
                        '<i class="glyphicon glyphicon-plus"></i> Add New', 
                        $createUrl, 
                        ['class'=>'btn btn-success']
                    ) . '&nbsp;' . 
                    Html::a(
                        '<i class="glyphicon glyphicon-remove"></i> Delete', 
                        $deleteUrl, 
                        ['class'=>'btn btn-danger']
                    ) . '&nbsp;' .
                    Html::submitButton(
                        '<i class="glyphicon glyphicon-floppy-disk"></i> Save', 
                        ['class'=>'btn btn-primary']
                    )
            ]
        ]     
    ]); 
    ActiveForm::end();