Mopa bootstrap example collections forms
remove this

Button Icons

To make use of the button icons you can either apply them in the FormType:

$builder
    ->add('nice_email_collection','collection', array(
        'widget_add_btn' => array(
            'icon' => 'plus-sign',
            'label' => 'add email'
         ),
    ))
    ;
             

Or configure them globally:

mopa_bootstrap:
    form:
        collection:
            widget_remove_btn:
                icon: trash
                icon_color: white
            widget_add_btn:
                icon: plus-sign
             

And if configured globally you can override them again in the FormType!

Easy use of collections

We often saw probs when using collection, so we added some code to ease the use

Please review your javascript includes, we provide a new mopabotstrap-collection.js

Include it in your layout, or per page, as you like.

For an easy collection with e.g. just a bunch of mail adresses just add the collection to your form

An example: to generate nice inputs with icons you dont write one line of html:

$builder
    ->add('nice_email_collection','collection', array(
        'type' => 'email',
        'allow_add' => true,
        'allow_delete' => true, // should render default button, change text with widget_remove_btn
        'prototype' => true,
        'widget_add_btn' => array('label' => "add email"),
        'show_legend' => false, // dont show another legend of subform
        'options' => array( // options for collection fields
            'label_render' => false,
            'widget_addon_prepend' => array(
                'text' => '@',
            ),
            'horizontal_input_wrapper_class' => "col-lg-8",
        )
    ))

And in your markup you just need one line:


      <form class="form-horizontal">
        {{ form_widget(form) }}
      </form>

FormType Code

// ExampleCollectionsFormType.php

<?php
namespace Mopa\Bundle\BootstrapSandboxBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class ExampleCollectionsFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('email_collection','collection', array(
                'type' => 'email',
                'allow_add' => true,
                'allow_delete' => true, // should render default button, change text with widget_remove_btn
                'prototype' => true,
                'options' => array( // options for collection fields
                    'horizontal' => true,
                    'label_render' => false,
                    'horizontal_input_wrapper_class' => "col-lg-8",
                )
            ))
            ->add('nice_email_collection','collection', array(
                'type' => 'email',
                'allow_add' => true,
                'allow_delete' => true, // should render default button, change text with widget_remove_btn
                'prototype' => true,
                'widget_add_btn' => array('label' => "add email"),
                'show_legend' => false, // dont show another legend of subform
                'options' => array( // options for collection fields
                    'label_render' => false,
                    'widget_addon_prepend' => array(
                        'text' => '@',
                    ),
                    'horizontal_input_wrapper_class' => "col-lg-8",
                )
            ))
            ->add('dates_collection','collection', array(
                'type' => new ExampleDateFormType(),
                'allow_add' => true,
                'allow_delete' => true, // should render default button, change text with widget_remove_btn
                'prototype' => true,
                'widget_add_btn' => array('label' => "add date"),
                'options' => array(
                    'label_render' => false,
                    'widget_remove_btn' => array('label' => "remove this", "icon" => "pencil", 'attr' => array('class' => 'btn btn-danger')),
              )
            ))
        ;
    }
    public function getName()
    {
        return 'mopa_bootstrap_example_collections_forms';
    }
}

Template Code

{# MopaBootstrapSandboxBundle:Examples:collections.html.twig #}

{% extends "MopaBootstrapSandboxBundle::base.html.twig" %}
{% from 'MopaBootstrapBundle::flash.html.twig' import session_flash %}
{% form_theme form _self %}

{% block headline %}Collection Forms{% endblock headline %}

{% block content %}
<div class="col-lg-6">
    <form class="form-horizontal" id="your_form_name" method="post">
        {{ form_widget(form) }}
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button type="reset" class="btn">Cancel</button>
        </div>
    </form>
    <div class="row">
        <div class="col-lg-6">
         <h3>Button Icons</h3>
             <p>To make use of the button icons you can either apply them in the FormType:</p>

              <pre class="prettyprint">
$builder
    ->add('nice_email_collection','collection', array(
        'widget_add_btn' => array(
            'icon' => 'plus-sign',
            'label' => 'add email'
         ),
    ))
    ;
             </pre>
        </div>
        <div class="col-lg-6">
             <p>Or configure them globally:</p>

              <pre class="prettyprint">
mopa_bootstrap:
    form:
        collection:
            widget_remove_btn:
                icon: trash
                icon_color: white
            widget_add_btn:
                icon: plus-sign
             </pre>
             <p>And if configured globally you can override them again in the FormType!</p>
        </div>
    </div>
</div>
<div class="col-lg-6">
      <h3>Easy use of collections</h3>
      <p>We often saw probs when using collection, so we added some code to ease the use</p>
      <p><b>Please review your javascript includes, we provide a new <a href="https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/public/js/mopabootstrap-collection.js">mopabotstrap-collection.js</a></b><p>
      <p>Include it in your layout, or per page, as you like.<p>
      <p>For an easy collection with e.g. just a bunch of mail adresses just add the collection to your form</p>

      <p>An example: to generate nice inputs with icons you dont write one line of html:</p>
      <pre class="prettyprint">
$builder
    ->add('nice_email_collection','collection', array(
        'type' => 'email',
        'allow_add' => true,
        'allow_delete' => true, // should render default button, change text with widget_remove_btn
        'prototype' => true,
        'widget_add_btn' => array('label' => "add email"),
        'show_legend' => false, // dont show another legend of subform
        'options' => array( // options for collection fields
            'label_render' => false,
            'widget_addon_prepend' => array(
                'text' => '@',
            ),
            'horizontal_input_wrapper_class' => "col-lg-8",
        )
    ))
</pre>
<p>And in your markup you just need one line: </p>
<pre class="prettyprint">
{% raw %}
      &lt;form class=&quot;form-horizontal&quot;&gt;
        {{ form_widget(form) }}
      &lt;/form&gt;
{% endraw %}
</pre>
</div>
{% endblock content %}

{% set showTemplate = _self %}{% set showForm = formType %}
Fork me on GitHub