1. Requirements
2. Usage
3. Resources

ClonnableField is a extension that allows users to add an unlimited number of dynamic input fields. For example, typing the recipe, you can add an unlimited number of ingredients.

Requirements ¶

e.g. Yii 1.1 or above

Usage ¶

Copy clonnableFields folder to your Extensions Folder

Simple example

$this->widget (
      'ext.clonnableFields.ClonnableFields',
      array (
          'models'=>Model->mayors, //required, one to many model relation or array
          'rowGroupName'=>'Mayors', //required, all fields will be with this key number
          'startRows'=>3, //optional, default: 1 - The number of rows at widget start
          'labelsMode'=>2, //optional, default: 1 - (0 - never, 1 - always, 2 - only if rows exist)
          'fields'=>array( //required
              array
              (
                  'label'=>array(
                      'title'=>'Mayor\'s name',
                  ),
                  'field'=>array(
                      'class'=>'TemplateTextField',
                      'attribute'=>'mayor_name',
                  ),
              ),
          ),
      )
  );    

More complex example with multiple fields on each row. This example will only work correctly if you have installed the YiiBooster extension, because some kinds of fields using its components (TemplateTypeaheadField, TemplateSelect2Field, TemplateToggleButtonField).

$this->widget (
        'ext.clonnableFields.ClonnableFields',
        array (
            'models'=>Model->mayors, //required, one to many model relation or array
            'rowGroupName'=>'Mayors', //required, all fields will be with this key number
            'startRows'=>1, //optional, default: 1 - The number of rows at widget start
            'labelsMode'=>2, //optional, default: 1 - (0 - never, 1 - always, 2 - only if rows exist)
            'addButtonLabel' => '<i class="icon-plus"></i> Add person to list', //optionall, default: "Add"
            'removeButtonLabel' => '<i class="icon-remove"></i>', //optional, default: "Remove"
            'removeButtonHtmlOptions' => array('class'=>'pull-right'), //optional
            'fields'=>array( //required
                //---------first field------------------------
                array(
                    'label'=>array( //optional
                        'title'=>'#',
                    ),
                    'field'=>array(
                        'class'=>'TemplateAutonumerationField', //required
                        'attribute'=>'id', //required, model attribute or field name
                        'params'=>array( //optional, default: '{num}'
                            'template'=>'Row {num}',
                        ),
                        'htmlOptions'=>array('class'=>'span12'), //optional - field options
                    ),
                    'fieldHtmlOptions' => array('class'=>'span1'), //optional - field block options
                ),
                //---------second field------------------------
                array(
                    'label'=>array(
                        'title'=>'City',
                        'htmlOptions'=>array('required'=>true, 'data-toggle' => 'popover', 'title'=>'Bootstrap Typeahead field', 'data-content' => 'Try to enter city name. Example: Moscow', 'data-trigger' => 'hover', 'data-placement' => 'top'),
                    ),
                    'field'=>array(
                        'class'=>'TemplateTypeaheadField',
                        'attribute'=>'city', //required, model attribute or field name
                        'htmlOptions'=>array('class'=>'span12', 'maxlength'=>'128'), //optional
                        'data'=>array('Moscow', 'New York', 'London', 'Paris', 'Tokio', 'Bangkok', 'Beijing'),
                        'params'=>array( //optionally, Bootstrap Typeahead parameters
                            'items'=>10, //optionally, default 5 - max founded items in the list
                            'minLength'=>1, //optionally, default 1 - min simbols to start search
                            'highlightWrong'=>true //optionally, default: false - Highlight entered value, if not in a list, bool or array('styleWrong'=>'color:xxx', 'styleOk'=>'color:xxx')
                        ),
                    ),
                    'fieldHtmlOptions' => array('class'=>'span2'),
                ),
                //---------third field------------------------
                array(
                    'label'=>array(
                        'title'=>'Mayor\'s name',
                        'htmlOptions'=>array('data-toggle' => 'popover', 'title'=>'Simple text field', 'data-content' => 'Enter mayor\'s name (plain text)', 'data-trigger' => 'hover', 'data-placement' => 'top'),
                    ),
                    'field'=>array(
                        'class'=>'TemplateTextField',
                        'attribute'=>'mayor_name', //required, model attribute or field name
                        'htmlOptions'=>array('class'=>'span12', 'maxlength'=>'128'),
                    ),
                    'fieldHtmlOptions' => array('class'=>'span3'),
                ),
                //---------fourth field------------------------
                array(
                    'label'=>array(
                        'title'=>'Gender',
                        'htmlOptions'=>array('data-toggle' => 'popover', 'title'=>'Select2 field', 'data-content' => 'Select gender from the list', 'data-trigger' => 'hover', 'data-placement' => 'top'),
                    ),
                    'field'=>array( //required
                        'class'=>'TemplateSelect2Field', //required.
                        'attribute'=>'gender_id', //required, model attribute or field name
                        'htmlOptions'=>array('class'=>'span12', 'maxlength'=>'128'), //optional
                        'data'=>array('0'=>'unset', '1'=>'male', '2'=>'female'),
                        'params'=>array( //optional
                            'asDropDownList'=>true,
                        ),
                    ),
                    'fieldHtmlOptions' => array('class'=>'span2'),
                ),
                //---------fifth field------------------------
                array(
                    'label'=>array(
                        'title'=>'Votes',
                        'htmlOptions'=>array('data-toggle' => 'popover', 'title'=>'Number field', 'data-content' => 'Enter votes quantity', 'data-trigger' => 'hover', 'data-placement' => 'top'),
                    ),
                    'field'=>array(
                        'class'=>'TemplateNumberField',
                        'attribute'=>'quantity',
                        'htmlOptions'=>array('class'=>'span12'),
                    ),
                    'fieldHtmlOptions' => array('class'=>'span2'),
                ),
                //---------sixth field------------------------
                array(
                    'label'=>array(
                        'title'=>'Pass',
                        'htmlOptions'=>array('data-toggle' => 'popover', 'title'=>'Toggle Button field','data-content' => 'Check or uncheck person.', 'data-trigger' => 'hover', 'data-placement' => 'top'),
                    ),
                    'field'=>array(
                        'class'=>'TemplateToggleButtonField',
                        'attribute'=>'important',
                        'start_value'=>1,
                        'params'=>array(
                            'width'=>70,
                            'height'=>29,
                            'label'=>array('enabled'=>'Yes', 'disabled'=>'No'),
                        ),
                    ),
                    'fieldHtmlOptions' => array('class'=>'span1'),
                ),
            ),
        )
    );    

Resources ¶

• Project page
• Try out a demo