How to customize the data-prototype attribute in Symfony 2 forms

Question

Since umpteens days, I block on a problem with Symfony 2 and forms.

I got a form of websites entities. "Websites" is a collection of website's entities and each website contains two attributes : "type" and "url".

If I want to add more of one website in my database, I can click on a "Add another website" link, which add another website row to my form. So when you click on the submit button, you can add one or X website(s) at the same time.

This process to add a row use the data-prototype attribute, which can generate the website sub-form.

The problem is that I customize my form to have a great graphic rendering... like that :

<div class="informations_widget">{{ form_widget(website.type.code) }}</div> <div class="informations_error">{{ form_errors(website.type) }}</div> <div class="informations_widget">{{ form_widget(website.url) }}</div> <div class="informations_error">{{ form_errors(website.url) }}</div> 

But the data-prototype doesn't care about this customization, with HTML and CSS tags & properties. I keep the Symfony rendering :

<div> <label class=" required">$$name$$</label> <div id="jobcast_profilebundle_websitestype_websites_$$name$$"> <div> <label class=" required">Type</label> <div id="jobcast_profilebundle_websitestype_websites_$$name$$_type"> <div> <label for="jobcast_profilebundle_websitestype_websites_$$name$$_type_code" class=" required">label</label> <select id="jobcast_profilebundle_websitestype_websites_$$name$$_type_code" name="jobcast_profilebundle_websitestype[websites][$$name$$][type][code]" required="required"> <option value="WEB-OTHER">Autre</option> <option value="WEB-RSS">Flux RSS</option> ... </select> </div> </div> </div> <div> <label for="jobcast_profilebundle_websitestype_websites_$$name$$_url" class=" required">Adresse</label> <input  type="url" id="jobcast_profilebundle_websitestype_websites_$$name$$_url" name="jobcast_profilebundle_websitestype[websites][$$name$$][url]" required="required" value="" /> </div> </div> </div> 

Does anyone have an idea to make that hack ?

Answer 1

A bit old, but here is a deadly simple solution.

The idea is simply to render the collection items through a Twig template, so you have full ability to customize the prototype that will be placed in your data-prototype="..." tag. Just as if it was a normal, usual form.

In yourMainForm.html.twig:

<div id="collectionContainer"      data-prototype="          {% filter escape %}              {{ include('MyBundle:MyViewsDirectory:prototype.html.twig', { 'form': form.myForm.vars.prototype }) }}          {% endfilter %}"> </div> 

And in MyBundle:MyViewsDirectory:prototype.html.twig:

<div>     <!-- customize as you wish -->     {{ form_label(form.field1) }}     {{ form_widget(form.field1) }}     {{ form_label(form.field2) }}     {{ form_widget(form.field2) }} </div> 

Credit: adapted from https://gist.github.com/tobalgists/4032213