Krajee

Yii 2 Builder

Thankful to Krajee! BUY A COFFEEor to get more out of us.

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 5.x / 4.x / 3.x.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

The yii2-builder extension can be installed automatically or manually using one of these options:

Composer Package Manager Recommended


Installation via Composer is the recommended and most easy option to install Krajee Yii2 extensions. You can install yii2-builder via composer package manager. Either run:

$ php composer.phar require kartik-v/yii2-builder "dev-master"

or add:

"kartik-v/yii2-builder": "dev-master"

to your application's composer.json file.

Manual Install


You may also manually install the extension to your project (in case your composer install does not work). Just download the source ZIP or TAR ball and extract the extension asset files and folders into your project. You may need to install dependencies manually and also set the namespaces to the extensions in your Yii2 extensions configurations manually.

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 5.x / 4.x / 3.x form layouts. Uses the advanced kartik\form\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 5.x / 4.x / 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\form\ActiveField) including input widgets
use kartik\form\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\form\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 5.x / 4.x / 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\form\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\color\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 text-end'], 
                '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="fas fa-book"></i> Manage Books</h3>',
                'type' => GridView::TYPE_PRIMARY,
                'after'=> 
                    Html::a(
                        '<i class="fas fa-plus"></i> Add New', 
                        $createUrl, 
                        ['class'=>'btn btn-success']
                    ) . ' ' . 
                    Html::a(
                        '<i class="fas fa-times"></i> Delete', 
                        $deleteUrl, 
                        ['class'=>'btn btn-danger']
                    ) . ' ' .
                    Html::submitButton(
                        '<i class="fas fa-save"></i> Save', 
                        ['class'=>'btn btn-primary']
                    )
            ]
        ]     
    ]); 
    ActiveForm::end();

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

 
visitors to Krajee Yii2 Demos since 22-May-2017