An other example of theming a collection, where fields are aligned and labels are disposed above each widget.
a =, b =, c =
a =, b =, c =
a =, b =, c =
<?php
namespace Fuz\AppBundle\Base;
use Fuz\AppBundle\Entity\Value;
use Fuz\AppBundle\Form\ValueType;
use Fuz\QuickStartBundle\Base\BaseController as QuickStartBase;
use Symfony\Component\Form\Extension\Core\Type;
use Symfony\Component\HttpFoundation\Request;
class BaseController extends QuickStartBase
{
protected function createContextSample(Request $request, $name = 'form', $values = ['a', 'b', 'c'])
{
$data = ['values' => $values];
$form = $this
->get('form.factory')
->createNamedBuilder($name, Type\FormType::class, $data)
->add('values', Type\CollectionType::class, [
'entry_type' => Type\TextType::class,
'label' => 'Add, move, remove values and press Submit.',
'entry_options' => [
'label' => 'Value',
],
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'attr' => [
'class' => "{$name}-collection",
],
])
->add('submit', Type\SubmitType::class)
->getForm()
;
$form->handleRequest($request);
if ($form->isValid()) {
$data = $form->getData();
}
return [
$name => $form->createView(),
"{$name}Data" => $data,
];
}
protected function createAdvancedContextSample(Request $request, $name = 'advancedForm')
{
$a = new Value('a');
$b = new Value('b');
$c = new Value('c');
$data = ['values' => [$a, $b, $c]];
$form = $this
->get('form.factory')
->createNamedBuilder($name, Type\FormType::class, $data)
->add('values', Type\CollectionType::class, [
'entry_type' => ValueType::class,
'label' => 'Add, move, remove values and press Submit.',
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'required' => false,
'attr' => [
'class' => "{$name}-collection",
],
])
->add('submit', Type\SubmitType::class)
->getForm()
;
$form->handleRequest($request);
if ($form->isValid()) {
$data = $form->getData();
}
return [
$name => $form->createView(),
"{$name}Data" => $data,
];
}
}
<?php
namespace Fuz\AppBundle\Controller;
use Fuz\AppBundle\Base\BaseController;
use Fuz\AppBundle\Entity\Address;
use Fuz\AppBundle\Entity\Addresses;
use Fuz\AppBundle\Entity\Fancy;
use Fuz\AppBundle\Entity\FancyCollection;
use Fuz\AppBundle\Entity\Value;
use Fuz\AppBundle\Form\AddressesType;
use Fuz\AppBundle\Form\FancyCollectionType;
use Fuz\AppBundle\Form\MyArrayType;
use Fuz\AppBundle\Form\ValueType;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\Form\Extension\Core\Type;
use Symfony\Component\HttpFoundation\Request;
/**
* @Route("/advanced")
*/
class AdvancedController extends BaseController
{
/**
* Advanced usage
*
* You can reference your form collection in the view, instead of
* putting a selector in the form type.
*
* @Route("/mvcCompliance", name="mvcCompliance")
* @Template()
*/
public function mvcComplianceAction(Request $request)
{
$data = ['values' => ['a', 'b', 'c']];
$form = $this
->createFormBuilder($data)
->add('values', Type\CollectionType::class, [
'entry_type' => Type\TextType::class,
'label' => 'Add, move, remove values and press Submit.',
'entry_options' => [
'label' => 'Value',
],
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'required' => false,
// 'attr' => array (
// 'class' => 'my-selector', <--- Not MVC compliant!
// ),
])
->add('submit', Type\SubmitType::class)
->getForm()
;
$form->handleRequest($request);
if ($form->isValid()) {
$data = $form->getData();
}
return [
'form' => $form->createView(),
'data' => $data,
];
}
/**
* Advanced usage
*
* A custom form theme helps define button's layout and positions as and where you want.
*
* @Route("/customFormTheme", name="customFormTheme")
* @Template()
*/
public function customFormThemeAction(Request $request)
{
$data = ['values' => [new Value('a'), new Value('b'), new Value('c')]];
$form = $this
->createFormBuilder($data)
->add('values', Type\CollectionType::class, [
'entry_type' => ValueType::class,
'label' => 'Add, move, remove values and press Submit.',
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'required' => false,
'attr' => [
'class' => 'collection',
],
])
->add('submit', Type\SubmitType::class)
->getForm()
;
$form->handleRequest($request);
if ($form->isValid()) {
$data = $form->getData();
}
return [
'form' => $form->createView(),
'data' => $data,
];
}
/**
* Advanced usage
*
* Same demo as above, but with the add button located at the bottom of
* the form instead of close to each field.
*
* @Route("/customFormThemeAddBottom", name="customFormThemeAddBottom")
* @Template()
*/
public function customFormThemeAddBottomAction(Request $request)
{
return $this->customFormThemeAction($request);
}
/**
* Advanced usage
*
* Collection of collections are useful on the most dynamic forms, and a good
* way to test if the plugin is working as expected too.
*
* @Route("/collectionOfCollections", name="collectionOfCollections")
* @Template()
*/
public function collectionOfCollectionsAction(Request $request)
{
$data = [
'collections' => [
[new Value('a'), new Value('b'), new Value('c')],
[new Value('d'), new Value('e'), new Value('f')],
[new Value('g'), new Value('h'), new Value('i')],
],
];
$form = $this
->get('form.factory')
->createNamedBuilder('form', Type\FormType::class, $data)
->add('collections', Type\CollectionType::class, [
'entry_type' => Type\CollectionType::class,
'label' => 'Add, move, remove collections',
'entry_options' => [
'entry_type' => ValueType::class,
'label' => 'Add, move, remove values',
'entry_options' => [
'label' => 'Value',
],
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'prototype_name' => '__children_name__',
'attr' => [
'class' => 'child-collection',
],
],
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'prototype_name' => '__parent_name__',
'attr' => [
'class' => 'parent-collection',
],
])
->add('submit', Type\SubmitType::class)
->getForm()
;
$form->handleRequest($request);
if ($form->isValid()) {
$data = $form->getData();
}
return [
'form' => $form->createView(),
'data' => $data,
];
}
/**
* Advanced usage
*
* Looks like there are weird behaviours with Doctrine:
* https://github.com/ninsuo/symfony-collection/issues/7
* Let's test that live!
*
* ... hmm, doesn't look bad anyway
*
* @Route(
* "/usageWithDoctrine/{name}",
* name = "usageWithDoctrine",
* defaults = {
* "name" = "example"
* }
* )
* @Template()
*/
public function usageWithDoctrineAction(Request $request, $name)
{
$repo = $this->getDoctrine()->getRepository('FuzAppBundle:MyArray');
$data = $repo->findOneByName($name);
if (is_null($data)) {
$data = $repo->create($name);
}
$form = $this->createForm(MyArrayType::class, $data);
$form->handleRequest($request);
$form->get('save')->isClicked() && $form->isValid() && $repo->save($data);
return [
'names' => $repo->getArrayNames(),
'form' => $form->createView(),
'data' => $data,
];
}
/**
* Related to usageWithDoctrine demo
*
* @Route(
* "/usageWithDoctrineDelete/{name}",
* name = "usageWithDoctrineDelete"
* )
*/
public function usageWithDoctrineDeleteAction(Request $request, $name)
{
$repo = $this->getDoctrine()->getRepository('FuzAppBundle:MyArray');
if (!is_null($data = $repo->findOneByName($name))) {
$repo->delete($data);
}
return $this->forward('FuzAppBundle:Advanced:usageWithDoctrine', [
'name' => 'example',
]);
}
/**
* A form having a theme and containing several fields
*
* @Route(
* "/formHavingSeveralFields",
* name = "formHavingSeveralFields"
* )
* @Template()
*/
public function formHavingSeveralFieldsAction(Request $request)
{
$address = new Address();
$address->setName('Mickael Steller');
$address->setCompany('fuz.org');
$address->setStreet('41 rue de la Paix');
$address->setPostalcode('75002');
$address->setCity('Paris');
$address->setCountry('France');
$addresses = new Addresses();
$addresses->getAddresses()->add($address);
$form = $this->createForm(AddressesType::class, $addresses);
if ($request->isMethod('POST')) {
$form->handleRequest($request);
}
return [
'form' => $form->createView(),
'data' => $addresses,
];
}
/**
* Another example of form theme
*
* @Route(
* "/fancyFormTheme",
* name = "fancyFormTheme"
* )
* @Template()
*/
public function fancyFormThemeAction(Request $request)
{
$fancyCollection = new FancyCollection();
for ($i = 0; $i < 3; $i++) {
$fancy = new Fancy();
$fancyCollection->getFancyCollection()->add($fancy);
}
$form = $this->createForm(FancyCollectionType::class, $fancyCollection);
$form->handleRequest($request);
if ($form->isValid()) {
$data = $form->getData();
}
return [
'form' => $form->createView(),
'data' => $fancyCollection,
];
}
}
<?php
namespace Fuz\AppBundle\Entity;
class Fancy
{
private $a;
private $b;
private $c;
public function getA()
{
return $this->a;
}
public function getB()
{
return $this->b;
}
public function getC()
{
return $this->c;
}
public function setA($a)
{
$this->a = $a;
return $this;
}
public function setB($b)
{
$this->b = $b;
return $this;
}
public function setC($c)
{
$this->c = $c;
return $this;
}
}
<?php
namespace Fuz\AppBundle\Entity;
use Doctrine\Common\Collections\ArrayCollection;
class FancyCollection
{
protected $fancyCollection;
public function __construct()
{
$this->fancyCollection = new ArrayCollection();
}
public function getFancyCollection()
{
return $this->fancyCollection;
}
}
<?php
namespace Fuz\AppBundle\Form;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
class FancyCollectionType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('fancyCollection', Type\CollectionType::class, [
'entry_type' => FancyType::class,
'label' => 'Add, move, remove values and press Submit.',
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'required' => false,
'attr' => [
'class' => 'collection',
],
]);
$builder->add('save', SubmitType::class, [
'label' => 'See my data',
]);
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => 'Fuz\AppBundle\Entity\FancyCollection',
]);
}
public function getBlockPrefix()
{
return 'FancyCollectionType';
}
}
<?php
namespace Fuz\AppBundle\Form;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
class FancyType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('a');
$builder->add('b');
$builder->add('c');
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => 'Fuz\AppBundle\Entity\Fancy',
]);
}
public function getBlockPrefix()
{
return 'FancyType';
}
}
{% block FancyType_row %}
<div class="row">
<div class="col-md-2">
<div class="text-center">{{ form_label(form.a) }}</div>
<div>{{ form_widget(form.a) }}</div>
</div>
<div class="col-md-2">
<div class="text-center">{{ form_label(form.b) }}</div>
<div>{{ form_widget(form.b) }}</div>
</div>
<div class="col-md-2">
<div class="text-center">{{ form_label(form.c) }}</div>
<div>{{ form_widget(form.c) }}</div>
</div>
<div class="col-md-2">
<a href="#" class="collection-up btn btn-default" title="Move element up"><span class="glyphicon glyphicon-arrow-up"></span></a>
<a href="#" class="collection-down btn btn-default" title="Move element down"><span class="glyphicon glyphicon-arrow-down"></span></a>
</div>
<div class="col-md-2">
<a href="#" class="collection-remove btn btn-default" title="Delete element"><span class="glyphicon glyphicon-trash"></span></a>
<a href="#" class="collection-add btn btn-default" title="Add element"><span class="glyphicon glyphicon-plus-sign"></span></a>
</div>
<div class="col-md-2">
<a href="#" class="collection-duplicate btn btn-default" title="Duplicate element"><span class="glyphicon glyphicon-th-large"></span></a>
</div>
</div>
{% endblock %}
{% extends 'FuzAppBundle::layout.html.twig' %}
{% block extra_js %}
<script src="{{ asset('js/jquery.collection.js') }}"></script>
{% endblock %}
{% block title %}Advanced usage: custom theme with several aligned fields{% endblock %}
{% block body %}
<h2>{{ block('title') }}</h2>
<p>
An other example of theming a collection, where fields are aligned and labels are
disposed above each widget.
</p>
<div class="row">
{%
form_theme form
'jquery.collection.html.twig'
'FuzAppBundle:Advanced:fancy-theme.html.twig'
%}
{{ form(form) }}
</div>
{% for row in data.fancyCollection %}
<p>
a = {{ row.a }}, b = {{ row.b }}, c = {{ row.c }}
</p>
{% endfor %}
{{
tabs([
'Base/BaseController.php',
'Controller/AdvancedController.php',
'Resources/views/Advanced/fancy-theme.html.twig',
'Resources/views/Advanced/fancyFormTheme.html.twig',
'Entity/FancyCollection.php',
'Entity/Fancy.php',
'Form/FancyCollectionType.php',
'Form/FancyType.php',
])
}}
{% endblock %}
{% block script %}
<script type="text/javascript">
$('.collection').collection({
'drag_drop_options': {
'placeholder': null
},
allow_duplicate: true,
});
</script>
{% endblock %}