Form theming a collection widget - symfony

I have a collection widget in my form. That's displayed like:
Teams 0 player1 inputfield
1 player2 inputfield
I would like to not display the word 'teams' and the '0' and the '1'.
I've got this block in my fields.html.twig template, but not really sure how to edit this.
{% block collection_widget %}
{% spaceless %}
{% if prototype is defined %}
{% set attr = attr|merge({'data-prototype': form_row(prototype) }) %}
{% endif %}
{{ block('form_widget') }}
{% endspaceless %}
{% endblock collection_widget %}
{% block form_label %}
{% spaceless %}
<div class="hidden">
{{ block('generic_label') }}
</div>
{% endspaceless %}
{% endblock form_label %}
ChallengeType form:
class ChallengeType extends AbstractType
{
public function buildForm(FormBuilder $builder, array $options)
{
$builder
->add('teams', 'collection', array(
'type' => new TeamType(),
'allow_add' => true
))
->add('place')
->add('date');
}
public function getName()
{
return 'challenge';
}
public function getDefaultOptions(array $options)
{
return array('data_class' => 'Tennisconnect\DashboardBundle\Entity\Challenge');
}
}
Thx.

Those lables are created in form_label block. I usually wrap them in a div and set them hidden when needed.
Edit:
There is a better solution :).
Change collection section of the ChallengeType.php with following
->add('teams', 'collection', array(
'type' => new TeamType(),
//label for Teams text
'attr' => array('class' => 'team-collection'),
//label for each team form type
'options' => array(
'attr' => array('class' => 'team-collection')
),
'allow_add' => true
))
Now those unwanted labels will have team-collection class. In your css file you can set display:none for label.team-collection. No need to change form theme block definition.

Related

Symfony3.4 Form errors rendered twice

I have a form with author and message fields and NotBlank() validation on both.
In twig, I do this:
{{ form_start(form) }}
{{ form_errors(form.author) }}
{{ form_label(form.author) }}
{{ form_widget(form.author) }}
{{ form_errors(form.message) }}
{{ form_label(form.message) }}
{{ form_widget(form.message) }}
{{ form_end(form) }}
If I press Save button with empty fields I EXPECT to see this:
But I get this:
Somehow the bottom error message comes from the {{ form_label(...) }} I say this, because if I comment the labels out and use static HTML for labels, the output is like on first picture.
I would prefer not to use static HTML for labels, but I don't understand where the second error messages came from.
Below my code:
Form
class TestFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('author', TextType::class, ['required' => false, 'constraints' => [new NotBlank()]])
->add('message', TextType::class, ['required' => false, 'constraints' => [new NotBlank()]])
->add('save', SubmitType::class)
;
}
}
Controller
class TestController extends Controller
{
/**
* #Route("/testing", name="test")
* #param Request $request
* #return RedirectResponse|Response
*/
public function index(Request $request)
{
$form = $this->createForm(TestFormType::class);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid())
{
return $this->redirectToRoute('test');
}
return $this->render('test/index.html.twig', [
'form' => $form->createView(),
]);
}
}
Template
{% extends 'base.html.twig' %}
{% block title %}Hello TestController!{% endblock %}
{% block body %}
<p>This is a test...</p>
{{ form_start(form) }}
{{ form_errors(form.author) }}
{{ form_label(form.author) }}
{{ form_widget(form.author) }}
{{ form_errors(form.message) }}
{{ form_label(form.message) }}
{{ form_widget(form.message) }}
{{ form_end(form) }}
{% endblock %}
For bootstrap theme error block is integrated in label.
So you need either to remove form_errors block in your template or to override form_label block.
You can use form_row (as #Adrien suggests in commentaries) as there is no form_errors call
You've explicitly added form_errors whereas error message already rendered via form_label. either you can remove form_errors or form_label.

Symfony 3 nested collection templating with Twig

how i can templating nested collection?.
I create templating parent collection with block:
{% block _group_match_groupMatchType_entry_row %}
In this block i have collection:
<div class="js-collection-parrent round text-right" data-prototype="{{ form_row(form.matchResult.vars.prototype)|e('html_attr') }}">
How i can get every entry row of matchResult collection which has parent collection groupMatchType?
GroupMatchType
$builder
->add('groupMatchType', CollectionType::class, [
'entry_type' => MatchType::class,
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false
])
MatchType
$builder
->add('matchResult', CollectionType::class, [
'entry_type' => MatchResultType::class,
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false
])
And view
{% block _group_match_groupMatchType_entry_row %}
<div class="js-collection-parrent round text-right" data-prototype="{{ form_row(form.matchResult.vars.prototype)|e('html_attr') }}"></div>
{% endblock %}
I have to find name of above block (maybe like _group_match_groupMatchType_entry_row_matchResult_entry_row)
Ok i solved that. The block should be named
_group_match_groupMatchType_entry_matchResult_entry_row
Getting all sub-elements in a form on twig is simple:
{% for element in form.elements %}
{# Do something with this element #}
{# But think that it will represent the form element #}
{% endfor %}
real example:
{% for movie in form.movies %}
{{ form_widget(movie.title, {'attr' : {'class':'form-control'}}) }}
{{ form_row(movie.id) }}
{% endfor %}
Don't really know if is what you need, but I believe it's an approach to what you mean.

Form with a collection same entity type

I would want a form for my entity « X ». This entity own a relationship OneToMany with many entities of type « X ». It's a relationship parent <-> children.
When I create my form simply, it works.
class XType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add("name", "text", array("label" => "Nom"))
->add("children", "collection", array(
"type" => new XType(),
"by_reference" => false));
}
}
Then, I would like add easily new entity in my collection with the option « allow_add », and used the prototype to add in javascript. This is my form with the « allow_add » option.
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add("name", "text", array("label" => "Nom"))
->add("children", "collection", array(
"type" => new XType(),
"allow_add" => true,
"by_reference" => false));
}
When I execute with or without called the prototype, I have an webserver error. It's XDebug which kick my request because the recursive call is too big. There are cascade call.
What's the best solution to resolve my problem ?
I can't really say where your problem is, but should be somewhere around javascript and the collection prototype. Also, when you allow items to be added, you usually allow to allow_delete too.
Take a look at my example:
$builder->add('book', 'collection', array(
'type' => new BookType(),
'allow_add' => true,
'allow_delete' => true,
'prototype_name' => '__prototype__',
'by_reference' => false,
'error_bubbling' => false
);
To the template where you render form, include this:
{% block javascript %}
{{ parent() }}
{% javascripts
'#ProjectSomeBundle/Resources/public/js/form/collection.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
And the collection.js file holds this:
$(function($) {
$addButton = $('button.add');
$collection = $addButton.parent().children().first();
$addButton.click(function () {
var prototype = $($collection.data('prototype').replace(/__prototype__/g, function() { return (new Date()).getTime(); }));
prototype.appendTo($collection.children('ul'));
});
$('body').on('click', 'button.remove', function () {
$(this).parent().remove();
});
});
Also, you should be using those customised collection widgets, which you pass to twig. Nothing fancy, it will be rendered as unordered list with items, to make items easily accessible.
config.yml:
twig:
form:
resources:
- 'ProjectSomeBundle:Form:fields.html.twig'
fields.html.twig:
{% extends 'form_div_layout.html.twig' %}
{% block collection_widget %}
{% import "ProjectSomeBundle:Macro:macro.html.twig" as macro %}
{% spaceless %}
<div class="collection">
{% if prototype is defined %}
{% set attr = attr|merge({'data-prototype': block('prototype_widget') }) %}
{% endif %}
<div {{ block('widget_container_attributes') }}>
<ul>
{% for row in form %}
{{ macro.collection_item_widget(row) }}
{% endfor %}
</ul>
{{ form_rest(form) }}
</div>
<div class="clear"></div>
<button type="button" class="add">{% trans %}Add{% endtrans %}</button>
</div>
<div class="clear"></div>
{% endspaceless %}
{% endblock collection_widget %}
{% block prototype_widget %}
{% spaceless %}
{{ macro.collection_item_widget(prototype) }}
{% endspaceless %}
{% endblock prototype_widget %}
You can notice it uses macro, so here it is:
macro.html.twig
{% macro collection_item_widget(fields) %}
<li>
{% set fieldNum = 1 %}
{% for field in fields %}
<div class="field_{{ fieldNum }}">
{{ form_label(field) }}
{{ form_errors(field) }}
{{ form_widget(field) }}
</div>
{% set fieldNum = fieldNum + 1 %}
{% endfor %}
<button type="button" class="remove">{% trans %}Delete{% endtrans %}</button>
<div class="clear"></div>
</li>
{% endmacro %}
This is a full example, I hope you find it useful and works for you.
I ran into the same issue (my web server crashes, as well, due to too many recursive calls). My quick workaround was to simply create a dummy (cloned) type that doesn't contain the recursive field (this works for me since I was interested only into the 1st level children).
So, if this scenario is applicable to you, as well, you could change your code as follows:
class XType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add("name", "text", array("label" => "Nom"))
->add("children", "collection", array(
"type" => new XTypeWithoutChildren(),
"by_reference" => false));
}
}
class XTypeWithoutChildren extends XType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add("name", "text", array("label" => "Nom"));
}
}

Field help not showing in Sonata Admin in Parent Admin when embedded

I don't know whether this is a symphony or a sonata admin bundle issue.
I have my main MultimediaAdmin class which has multiple embedded FileAdmin entries.
class MultimediaAdmin extends Admin
{
protected function configureFormFields(FormMapper $formMapper)
{
$formMapper
->with('Files')
->add('files','sonata_type_collection',
array('label' => 'Multimedia Files',
'btn_add' => 'Add File',
'by_reference' => 'false',
'type_options' => array('delete' => false)
), array(
'edit' => 'inline',
'template' => 'MyMultimediaBundle:Multimedia:horizontal.fields.html.twig'
)
)
->end()
->with('Tags')
->add('tags')
->end()
;
}
}
I have a custom template styling the appearance of the embedded FileAdmin form which among few fields has one that shows preview of the uploaded media when editing.
/* horizontal.fields.html.twig */
<fieldset>
<div class="sonata-ba-collapsed-fields">
{% for nested_group_field_name, nested_group_field in form.children %}
{% for field_name, nested_field in nested_group_field.children %}
<div class="control-group">
<label class="control-label" for="nested_field.vars['sonata_admin'].admin.trans(nested_field.vars.label" {{ nested_field.vars['required'] ? 'class="required"' : '' }}>{{ nested_field.vars['sonata_admin'].admin.trans(nested_field.vars.label) }}</label>
<div class="controls">
{% if sonata_admin.field_description.associationadmin.formfielddescriptions[field_name] is defined %}
{{ form_widget(nested_field, {
'inline': 'natural',
'edit' : 'inline'
}) }}
{% set dummy = nested_group_field.setrendered %}
{% else %}
{{ form_widget(nested_field) }}
{% endif %}
{% if sonata_admin.field_description.help %}
<span class="help-block sonata-ba-field-help">{{ sonata_admin.admin.trans(sonata_admin.field_description.help, {}, sonata_admin.field_description.translationDomain)|raw }}</span>
{% endif %}
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</fieldset>
Here's FileAdmin which has image preview added to it when editing to show the thumbnail
class FileAdmin extends Admin
{
protected function configureFormFields(FormMapper $formMapper)
{
$media = $this->getSubject();
// use $fileFieldOptions so we can add other options to the field
$fileFieldOptions = array('required' => false,'label' => 'Files', 'attr' => array("multiple" => "multiple"), 'by_reference' => false);
if ($media && ($webPath = $media->getWebPath())) {
$fileFieldOptions['help'] = '<img src="'.$webPath.'" class="admin-preview" />';
}
$formMapper
->add('title','text',array('label'=>'Title'))
->add('abstract','textarea',array('label'=>'Abstract'))
->add('language')
->add('format')
->add('file', 'file', $fileFieldOptions)
->add('quality')
;
}
}
The custom form works perfectly in terms of styling but the only problem I have is, it doesn't show the image preview when editing embedded files in the multimedia form. When I go to edit file directly, not under MultimediaAdmin, the image preview works perfectly. Where could I be going wrong?

Check if a Entity Field Type returns a value in Twig

I have a Entity Field Type in a form, how do I check in Twig if its returning any value?
The entity field type:
$builder->add('users', 'entity', array(
'class' => 'UserBundle:User',
'query_builder' => function(EntityRepository $er) {
return $er->createQueryBuilder('u')
},
));
The correct variable to check was: form.users.vars.choices
So the code would be:
{% if form.users.vars.choices|length > 0 %}
{# actions #}
{% endif %}
Try this:
{% if users.options|length > 0 %}
{% for option in users.options %}
{# some action #}
{% endfor %}
{% endif %}

Resources