Yii 2.0: yii2-builder

Build forms (single-row or multi-row/tabular) easily for Yii Framework 2.0.
40 followers

A form builder extension that allows you to build both single-row and multi-row/tabular forms for Yii Framework 2.0. The extension contains these widgets:

Latest Release

The latest version of the module is v1.2.0 released on 07-Nov-2014. Refer the CHANGE LOG for details.

Form

VIEW DEMO

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

  • 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.
  • 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 and more:
    • INPUT_TEXT or textInput
    • INPUT_TEXTAREA or textarea
    • INPUT_PASSWORD or passwordInput
    • INPUT_DROPDOWN_LIST or dropdownList
    • INPUT_LIST_BOX or listBox
    • INPUT_CHECKBOX or checkbox
    • INPUT_RADIO or radio
    • INPUT_CHECKBOX_LIST or checkboxList
    • INPUT_RADIO_LIST or radioList
    • INPUT_MULTISELECT or multiselect
    • INPUT_STATIC or staticInput
    • INPUT_FILE or fileInput
    • INPUT_HTML5 or input
    • INPUT_WIDGET or widget
    • INPUT_RAW or raw (any free text or html markup)

Refer the documentation for more details.

FormGrid

VIEW DEMO

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.

Tabular Form

VIEW DEMO

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

  • Supports all input types as mentioned in the Form builder widget
  • The widget works like a Yii GridView and uses an ActiveDataProvider to read the models information.
  • Supports features of the builderview like pagination and sorting.
  • Allows you to highlight and select table rows
  • Allows you to add and configure action buttons for each row.
  • 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](kartik\widgets\ActiveForm widget.
  • One can easily read and manage the tabular input data using the loadMultiple and validateMultiple functions in yii\base\Model.

Requirements

  • Yii 2.0 (dev-master)
  • PHP 5.4
  • Twitter Bootstrap 3.0

Note: This extension depends on the kartik-v/yii2-widgets extension, which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies.

Installation

The preferred way to install this extension is through composer.

Either run:

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

or add:

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

to the require section of your composer.json file.

Demo

You can see detailed documentation on usage of the extension.

Usage

Form

use kartik\builder\Form;
use kartik\widgets\ActiveForm;
$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();

FormGrid

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

TabularForm

use kartik\builder\TabularForm;
use kartik\widgets\ActiveForm;
$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();

Report

License

yii2-builder is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.

Resources

Total 20 comments

#18539 report it
Kartik V at 2014/11/12 10:47am
Solution for Error: formName() on a non-object (TabularForm)

Your query to retrieve the dataProvider must be called using a ModelClass::find() method to avoid the error and return the models in the dataProvider.

Something like below:

use \kartik\widgets\ActiveForm;
 
// Use a ActiveRecord find method like below 
// to set the query
$query = \frontend\models\Book::find(); 
 
$dataProvider = new \yii\data\ActiveDataProvider([
    'query' => $query,
]);
 
$form = ActiveForm::begin();
echo TabularForm::widget([
    'form' => $form,
    'dataProvider' => $dataProvider,
    'attributes' => [
        'id' => ['type' => TabularForm::INPUT_TEXT],
        'name' => ['type' => TabularForm::INPUT_TEXT],
        'status' => [
            'type' => TabularForm::INPUT_DROPDOWN_LIST,
            'items'=>['yes' => 'Available', 'no' => 'Not Available']
        ],
 
    ],
]);
ActiveForm::end();
#18538 report it
Maja at 2014/11/12 09:49am
Call to a member function formName() on a non-object (TabularForm)

Hello Kartik,

Thanks for making my Yii2 life easier. I have been getting Call to a member function formName() on a non-object error and i'm stuck. I have followed @sltech posts above but with no success. Your help will be appreciated. Here's the controller snippet;

$query = new Query;
        $query1 = $query->select('item,status,remarks')->from('health');
 
        $dataProvider = new ActiveDataProvider([
            'query' => $query1,
        ]);

Here's my Form View

<?php
 
    $form = ActiveForm::begin();
    echo TabularForm::widget([
        'form' => $form,
        'dataProvider' => $dataProvider,
        'attributes' => [
            'item' => ['type' => TabularForm::INPUT_TEXT],
 
            'status' => [
                'type' => TabularForm::INPUT_DROPDOWN_LIST,
                'items'=>['yes' => 'Available', 'no' => 'Not Available']
            ],
 
            'remarks' => ['type' => TabularForm::INPUT_TEXTAREA],
        ],
        'gridSettings' => [
            'floatHeader' => true,
            'panel' => [
                'heading' => '<h3 class="panel-title"><i class="glyphicon glyphicon-book"></i> System Health Checkup</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();
 
    ?>
#18498 report it
Kartik V at 2014/11/06 03:04pm
New Release 1.2.0

New widget FormGrid has been added (details updated in the doc). FormGrid allows you to create a bootstrap grid layout orientation for vertical or horizontal forms in a snap. It allows a much easier configuration to the Form widget, by allowing one to set up the rows of the grid.

In addition, a new property autoGenerateColumns has been added, which will auto generate the columns based on number of attributes set.

#18201 report it
Scott_Huang at 2014/09/25 11:31am
Sound great!

Sound great!

#17739 report it
Kartik V at 2014/07/18 06:59am
Table Join

@sltech, yes you should treat it like a normal yii CRUD - typically one model based on one DB Table as your source for updating. You can handle relational data through multiple ways though - but not directly use a join query to update related data.

#17737 report it
sltech at 2014/07/18 06:37am
Miised the point

Hi Kartik,

thanks you. I am sorry to missed the main point here, it should be on one table only. I was getting data from two tables using join that's when it was not working. I will use simple table in case of join or am I still missing something

$query = (new \yii\db\Query())
        ->select('slt_product_price.*,slt_currency.id as currency_id')
        ->from('slt_product_price,slt_currency')
        ->where('slt_product_price.product_id='.$product_id.' and slt_product_price.currency_id=slt_currency.id');
 
        $dataProvider = new ActiveDataProvider([
                'query' => $query,
                ]);
#17732 report it
Kartik V at 2014/07/18 12:51am
Simplify your code to debug

You can simplify your code to test/debug where you have the error. Just test it with one attribute first and if it works, slowly add the other attributes to find where you are hitting the error.

#17731 report it
sltech at 2014/07/17 03:53pm
Code not working

Thank you for your quick response on this.

below is the code that is not working

<?php
use yii\helpers\Html;
use kartik\builder\Form;
use kartik\widgets\ActiveForm;
use kartik\builder\TabularForm;
use kartik\datecontrol\DateControl;
use common\models\Status;
use yii\helpers\ArrayHelper;
use common\models\ProductCategory;
use common\models\search\ProductPrice;
use kartik\grid\GridView;
 
/**
 *
 * @var yii\web\View $this
 * @var common\models\Product $model
 * @var yii\widgets\ActiveForm $form
 */
?>
 
<div class="product-form">
 
    <?php
 
                $form = ActiveForm::begin ( [ 
                        'type' => ActiveForm::TYPE_VERTICAL 
                ] );
 
                echo Form::widget ( [ 
 
                        'model' => $model,
                        'form' => $form,
                        'columns' => 3,
                        'attributes' => [ 
 
                                'product_name' => [ 
                                        'type' => Form::INPUT_TEXT,
                                        'options' => [ 
                                                'placeholder' => 'Enter Product Name...',
                                                'maxlength' => 255 
                                        ] 
                                ],
 
                                'category_id' => [ 
                                        'type' => Form::INPUT_DROPDOWN_LIST,
                                        'items' => ArrayHelper::map ( ProductCategory::find ()->where ( [ 
                                                'company_id' => Yii::$app->session ['company'] ['id'] 
                                        ] )->orderBy ( 'category_name' )->asArray ()->all (), 'id', 'category_name' ),
 
                                        'options' => [ 
                                                'prompt' => '--Select Category--',
                                                'maxlength' => 20 
                                        ] 
                                ],
 
                                'active' => [ 
                                        'type' => Form::INPUT_DROPDOWN_LIST,
                                        'items' => ArrayHelper::map ( Status::find ()->orderBy ( 'active desc' )->all (), 'id', 'active' ) 
                                ] 
                        ] 
                ] );
 
                echo Form::widget ( [ 
 
                        'model' => $model,
                        'form' => $form,
                        'columns' => 1,
                        'attributes' => [ 
 
                                'product_description' => [ 
                                        'type' => Form::INPUT_TEXTAREA,
                                        'options' => [ 
                                                'placeholder' => 'Enter Product Description...',
                                                'rows' => 3 
                                        ] 
                                ] 
                        ] 
                ] );
 
                echo Form::widget ( [ 
                        'model' => $model,
                        'form' => $form,
                        'columns' => 3,
                        'attributes' => [ 
 
                                'ordering' => [ 
                                        'type' => Form::INPUT_TEXT,
                                        'options' => [ 
                                                'placeholder' => 'Enter Ordering...' 
                                        ] 
                                ] 
                        ] 
                ]
                 );
 
                $searchModel = new ProductPrice ();
                $dataProvider = $searchModel->searchProductPrice ( Yii::$app->request->getQueryParams (), isset($model->id)?$model->id:1);
 
                //echo "<pre>";
                //print_r($dataProvider);
                //exit;
                echo TabularForm::widget ( [ 
 
                        'dataProvider' => $dataProvider,
                        'form' => $form,
                        'serialColumn' => false,
                        'actionColumn' => false,
                        'checkboxColumn' => false,
 
                        'attributes' => [ 
                                'currency_id' => [ 
                                        'type' => TabularForm::INPUT_STATIC,
                                        'columnOptions' => [ 
                                                'hAlign' => GridView::ALIGN_CENTER 
                                        ] 
                                ],
 
                                'price' => [ 
                                        'type' => TabularForm::INPUT_TEXT 
                                ],
 
                                'tax_percentage' => [ 
                                        'type' => TabularForm::INPUT_TEXT 
                                ],
 
                                'discount' => [ 
                                        'type' => TabularForm::INPUT_TEXT 
                                ] 
                        ],
 
                        'gridSettings' => [ 
                                'panel' => [ 
                                        'heading' => '<h3 class="panel-title"><i class="glyphicon glyphicon-book"></i> Product Pricing</h3>',
                                        'type' => GridView::TYPE_DEFAULT 
                                ] 
                        ]
 
                ] );
 
                echo Html::submitButton ( $model->isNewRecord ? 'Create' : 'Update', [ 
                        'class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary' 
                ] );
                ActiveForm::end ();
                ?>
 
</div>
#17725 report it
Kartik V at 2014/07/17 09:06am
Form Name

You need to create a ActiveForm instance (e.g. $form) and pass it to the widget. It seems its not getting the $form instance correctly for your case. As stated in the example:

use kartik\builder\Form;
use kartik\widgets\ActiveForm;
$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();
#17724 report it
sltech at 2014/07/17 08:46am
Call to a member function formName() on a non-object

Thanks Kartik for this excellent extension. I am trying to use this for the first time and getting the below error. not getting an idea what it could be can you please help

PHP Fatal Error – yii\base\ErrorException Call to a member function formName() on a non-object

#17625 report it
sn4k3 at 2014/07/08 07:05pm
Re: Empty items array is allowed

Thanks for your hard work :D

#17623 report it
Kartik V at 2014/07/08 05:52pm
Empty items array is allowed

This is fixed with the latest release. Just get the latest update via composer.

#17622 report it
sn4k3 at 2014/07/08 04:09pm
Empty array Form::INPUT_DROPDOWN_LIST error

Hello,

Picture with the problem: https://dl.dropboxusercontent.com/u/18602178/emptydropdown.png

my code:

'parentid'=>['type'=> Form::INPUT_DROPDOWN_LIST,
            'items'=>\common\models\Menu::getFilter(\common\models\Language::ALL_LANGUAGES)
]

my function is not always filled, it can return an empty array(); because parentid can be null and data will not always exist to fill the dropdown. I think dropdownlist should allow empty arrays that means no data.

Also how could i define there is a empty option? in Yii 1 we could do like this: 'htmlOptions' => array('empty'=>''). to define a empty/default option. Is possible here too?

Thanks

#17605 report it
Kartik V at 2014/07/07 03:43pm
Re: Adding Hints to fields

You are welcome. The ability to add hint has been added in the new release v1.1.0. You will get this release automatically when you update via composer.

#17602 report it
sn4k3 at 2014/07/07 02:45pm
Re: Adding Hints to fields

It works :) i haven't the last version 1.1

Thanks for your great work, very good stuff made here!

#17601 report it
sn4k3 at 2014/07/07 02:23pm
Re: Adding Hints to fields

Thanks i will try :)

#17600 report it
Kartik V at 2014/07/07 01:59pm
Adding Hints to fields

This is available with the upgraded release v1.1.0. You can set the hint property for each attribute configuration within the attributes array.

Refer updated documentation and demo.

#17599 report it
sn4k3 at 2014/07/07 12:28pm
Hints?

Hello again,

How can i display hints under builder? i Have searched under docs and src but i can't find a clue.

thanks

#17543 report it
sn4k3 at 2014/06/30 12:25pm
Re: Prepend or append

Thanks :)

#17538 report it
Kartik V at 2014/06/30 08:00am
Prepend or append

You can use \kartik\widgets\ActiveForm to render your ActiveForm - which offers methods to prepend and append addons. You can refer examples of using input group addons here.

Use the fieldConfig property for each attribute in the attributes array to pass in your addon settings.

Leave a comment

Please to leave your comment.

Create extension
Downloads
No downloadable files yet