Form theming and Symfony Collections - symfony

Question

I wanted to add particular style to my CollectionType in twig and I received a solution here : Symfony/Jquery Collection of objects. Now I have a little problem that I can't solve :
I have this custom form_row :
// src/MyBundle/Ressources/views/CustomForms
{% block form_row %}
<div class="row">
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form) -}}
</div>
</div>
</div>
<br/>
{% endblock %}
That works perfectly in one case but now I have a FormFlow (CraueFormFlow) and one of my multi-steps form is :
class AddChildStep3 extends AbstractType {
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('childsFamily', CollectionType::class, array(
'entry_type' => RelationshipType::class,
'allow_add' => true
));
}
public function getBlockPrefix()
{
return 'AddChildStep3';
}
That renders a collection of this form :
/**
* {#inheritdoc}
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('relRole', EntityType::class, array(
'class' => 'VSCrmBundle:RelRole'
))
//->add('sourceId', PersonChildType::class)
->add('destinationId', PersonRelationshipType::class);
}
/**
* {#inheritdoc}
*/
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults(array(
'data_class' => 'VS\CrmBundle\Entity\Relationship'
));
}
/**
* {#inheritdoc}
*/
public function getBlockPrefix()
{
return 'vs_crmbundle_relationship';
}
and the problem is that the form_row that I've defined before wors well for relRole of the last form but the destinationId property is showing this :
So the DestinationId label is inside the <div class="col-lg-4... and the widget is also inside a <div class=col-lg-4... and then inside the widget I have one more time label inside a <div class="col-lg-4 ...
I wanted to solve this by adding a new custom form_rom specially for this part so I've found the name of the block in profiler->forms->my form->vars->unique_block_prefix = _AddChildStep3_childsFamily and tried this :
{% block _AddChildStep3_childsFamily_entry_row %}
<div class="row">
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form.relRole, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form.relRole) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form.relRole) -}}
</div>
</div>
<br/>
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form.destinationId.firstName, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form.destinationId.firstName) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form.destinationId.firstName) -}}
</div>
</div>
<br/>
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form.destinationId.lastName, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form.destinationId.lastName) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form.destinationId.lastName) -}}
</div>
</div>
<br/>
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form.destinationId.bornOn, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form.destinationId.bornOn) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form.destinationId.bornOn) -}}
</div>
</div>
<br/>
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form.destinationId.profession, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form.destinationId.profession) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form.destinationId.profession) -}}
</div>
</div>
<br/>
</div>
{% endblock %}
As it's written in the docs (http://symfony.com/doc/current/form/form_customization.html#how-to-customize-a-collection-prototype) but this doesn't work...
ps: for info my HTML in this case is
<div class="row">
<div id="familyMembersList" data-prototype="{{ form_widget(form.childsFamily.vars.prototype)|e('html_attr') }}">
</div>
</div>
EDIT: When I go to profiler/twig I don't see that Twig use my custom entry row ... Maybe the name of the custom block is wrong ? I've found the name of the block that I have to customize in an answer on stackoverflow.

Answer 1

Ok, After some head pain and several tries I've found that Symfony/Form/twig doesn't wants to customize the entry row. I've tried this :
{% block _AddChildStep3_childsFamily_entry_widget %}
<div class="row">
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form.relRole, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form.relRole) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form.relRole) -}}
</div>
</div>
<br/>
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form.destinationId.firstName, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form.destinationId.firstName) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form.destinationId.firstName) -}}
</div>
</div>
<br/>
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form.destinationId.lastName, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form.destinationId.lastName) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form.destinationId.lastName) -}}
</div>
</div>
<br/>
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form.destinationId.bornOn, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form.destinationId.bornOn) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form.destinationId.bornOn) -}}
</div>
</div>
<br/>
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_label(form.destinationId.profession, "", {'label_attr': {'class': 'pull-right'}}) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_widget(form.destinationId.profession) -}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{{- form_errors(form.destinationId.profession) -}}
</div>
</div>
<br/>
</div>
<br/>
{% endblock %}
And this works even is it's not perfect. Hope it can help :)