I have two entities: Supplier and Category joined ManyToMany.
Next, I have a form builder class where I add EntityType::class.
Category structure:
id, categoryName, parentId - where parentIds value can be:
0 - head category
1 - subcategory
etc
I need to display (in twig template) categories with structure:
Category1
Subcategory1
Subcategory2
Category2
Subcategory3
Subcategory4
etc. where Category are some kind of header and subcategory are checkboxes.
Please somebody give me a tip how to do this.
Building on what we discussed in the comments, the following worked in my test environment:
InSupplierType::buildForm:
->add('categories', EntityType::class, [
'class' => Category::class,
'choice_label' => 'name',
'group_by' => 'parent',
'multiple' => true,
'expanded' => true
])
Though without form customization this would only render the checkboxes without headers. This is discussed here: https://github.com/symfony/symfony/issues/5489#issuecomment-194943922
Implementing the fix by MaxE17677 the view would look something like this:
{% extends 'base.html.twig' %}
{% form_theme form _self %}
{# #see: https://github.com/symfony/symfony/issues/5489#issuecomment-194943922 #}
{%- block choice_widget_expanded -%}
<div {{ block('widget_container_attributes') }}>
{% for name, choices in form.vars.choices %}
{% if choices is iterable %}
<label class="choice_category">
<strong>
{{ choice_translation_domain is same as(false) ? name : name|trans({}, choice_translation_domain) }}
</strong>
</label>
<div>
{% for key,choice in choices %}
{{ form_widget(form[key]) }}
{{ form_label(form[key]) }}
{% endfor %}
</div>
{% else %}
{{- form_widget(form[name]) -}}
{{- form_label(form[name], null, {translation_domain: choice_translation_domain}) -}}
{% endif %}
{% endfor %}
{%- endblock choice_widget_expanded -%}
{% block body %}
<div class="container">
{{ form_start(form) }}
{{ form_row(form.categories) }}
{{ form_end(form) }}
</div>
{% endblock %}
Preview:
The crucial thing is that you use group_by feature of the ChoiceType. To get this to work with your current entities you might need to also use the query_builder setting of EntityType. Something like:
// ...
'query_builder' => function (EntityRepository $er) {
return $er
->createQueryBuilder('c')
->where('c.parentId = 1')
;
},
along with:
// ...
'group_by' => function ($category) {
// *pseudo-code*
return $category->getParent()->getName();
}
Related
I am working on sidebar menu in a Custom Drupal 8 Theme. I am trying to set a class of sidebar__menu--submenu-1,sidebar__menu--submenu-2, sidebar__menu--submenu-3 and so on depending on the submenu's level.
So far, I was able to add the class sidebar__menu to the first level & sidebar__menu--submenu to all submenu's level. However, I want to add the 'class' sidebar__menu--submenu-(number of the level) so I can style & control the sidebar better with CSS.
Here it is my code menu.html.twig:
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level, menu_name) %}
{% import _self as menus %}
{%
set menu_classes = [
'sidebar__menu' ~ menu_name|clean_class,
]
%}
{%
set submenu_classes = [
'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
]
%}
{% if items %}
{% if menu_level == 0 %}
<ul{{ attributes.addClass('container mx-auto', menu_classes) }}>
{% else %}
<ul {{ attributes.removeClass(menu_classes).addClass(submenu_classes) }}>
{% endif %}
{% for item in items %}
{%
set classes = [
'sidebar__item',
item.is_expanded ? 'sidebar__item--expanded',
item.is_collapsed ? 'sidebar__item--collapsed',
item.in_active_trail ? 'sidebar__item--active-trail',
]
%}
<li{{ item.attributes.addClass(classes) }}>
{{ link(item.title, item.url) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
Any help will be really appreciate it!
I have found the answer. First we set the classes:
{%
set submenu_classes = [
'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
'sidebar__menu--submenu-' ~ (menu_level + 1),
]
%}
Then using the logic like so:
{% if menu_level == 0 %}
<ul{{ attributes.addClass('container mx-auto', menu_classes) }}>
{% else %}
<ul{{ attributes.removeClass(menu_classes, 'sidebar__menu--submenu-' ~ (menu_level)).addClass(submenu_classes) }}>
{% endif %}
I have an issue with rendering an Entity Type in a Symfony Form.
Here is what I call in the form type:
$builder
->add('categories', EntityType::class, array
(
'class' => 'AppBundle\Entity\ArticleCategory',
'choice_label' => 'name',
'expanded' => true,
'multiple' => true,
'constraints' => array
(
new NotBlank(array('message' => 'Select Category'))
)
))
This is the template I am trying to do:
{% form_theme form _self %}
{% block _article_categories_entry_row %}
<div class="ckbox ckbox-default">
{{ form_widget(form) }}
{{ form_label(form) }}
{{ form_errors(form) }}
</div>
{% endblock %}
In the same template I am doing
{{ form_start(form) }}
{{ form_row(form.categories) }}
{{ form_end(form) }}
The weird thing happens when I use block _article_categories_entry_widget and it picks it up however it renders the label twice. Any ideas how to manage to situation ? In this scenario above it doesn't render or adds the ckbox class at all ! :(
You can loop through your form.categories in template as below and render checkboxes as you want.
{{ form_start(form) }}
{% for category in form.categories %}
{{ form_label(category) }}
{{ form_widget(category) }}
{% endfor %}
{{ form_end(form) }}
As you named your custom block _article_categories_entry_row, I assume, your form is named ArticleType.
The custom block for a specific form field should be named with following pattern:
_<form_name>_<field_name>_<part_name>
Possible parts as row, errors, widget, label. You're using row here.
But the entry part of block name is unnecessary.
Try with:
{% block _article_categories_row %}
You can find more details in Symfony Documentation
I'm using symfony 2.3
I have form with field of type "collection"
Visualization code in twig:
{% for field in form.fields %}
{{ form_row(field.name) }}
{% endfor %}
Everything work, expect when form.fields is empty.
Then nothing is visualized in twig loop, witch is fine.
But at the end of the form there is "label" for the element "form.fields". Only label.
Workaround:
{% for field in form.fields %}
{{ form_row(field.name) }}
{% endfor %}
<div class="hidden">
{{ form_row(form.fields) }}
If there are elements, they will be rendered in the loop.
{{ form_row }} will be empty, because all elemets are iterated in the loop above.
But if form.fields is empty then there is "hidden" (in the div) label.
What I'm missing !? Why this is happening !?
Hidden div content:
<div class="form-group"><label class="col-sm-2 control-label required">name</label><div class="col-sm-10"><div id="my-id" data-prototype=""></div></div></div>
Builder config:
$builder->add(
'fieldDataMappers',
'collection',
array(
'type' => new FieldDataType(),
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false,
)
);
As you have correctly guessed, the Symfony TwigBridge keep track of what is rendered and what is not. This is useful, since there is a function called form_rest(form), which is especially useful for printing hidden form field, and to prevent the "great jupiter! I forgot to print that field!" moments. :) You often find form_rest at the end of the form, just before the submit button.
Also consider that the collection IS a composite form type, which contains a variable list of child form. When the for loop is not triggered, since the form type is empty, the call to {{ form_row(form.fields) }} print out the collection form type. By default, this will print (you've guessed it) the collection label and an empty div. On the other hand, when the collection is not empty, Symfony will consider the collection as rendered, since all children are already rendered (see FormView::isRendered)
You can take a look into Symfony standard theme form_div_layout.html.twig, especially the blocks form_row (which show label printing) and form_widget_compound (the div and the for loop).
So, if you just need to hide the label (quick and dirty, some div are still there), just use:
$builder->add(
'fieldDataMappers',
'collection',
array(
'type' => new FieldDataType(),
'label' => false,
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false,
)
);
Or better, simply output the whole collection widget, without row:
{{ form_widget(form.fieldDataMappers) }}
Or even better, you print the whole collection with:
{{ form_row(form.fieldDataMappers) }}
...and then add a Twig theme to customize the collection output with something like (note the name syntax, and the missing form_label call):
{% block collection_row -%}
<div>
{{- form_errors(form) -}}
{{- form_widget(form) -}}
</div>
<div class="hidden">Something here?</div>
{%- endblock collection_row %}
Hope this help!
{# src/Acme/TaskBundle/Resources/views/Task/new.html.twig #}
{# ... #}
{{ form_start(form) }}
{# render the task's only field: description #}
{{ form_row(form.description) }}
<h3>Tags</h3>
<ul class="tags">
{# iterate over each existing tag and render its only field: name #}
{% for tag in form.tags %}
<li>{{ form_row(tag.name) }}</li>
{% endfor %}
</ul>
{{ form_end(form) }}
{# ... #}
Symfony2 cookbook
http://symfony.com/doc/current/cookbook/form/form_collections.html
Also the field of the collection is named fieldDataMappers not field.
So i think it should be
{% for field in form.fieldDataMappers %}
{{ form_row(field.name) }}
{% endfor %}
{{ form_label(form.emails) }}
<ul id="email-fields-list"
data-prototype="{{ form_row(form.emails.vars.prototype)|e }}"
data-widget-tags="{{ '<ol></ol>'|e }}"
data-widget-counter="{{ form.emails|length }}">
{% for email in form.emails %}
<ol>
{{ form_errors(email) }}
{{ form_row(email) }}
</ol>
{% endfor %}
</ul>
<button type="button" class="add-another-collection-widget" data-list-selector="#email-fields-list">Add email</button>
{{ form_widget(form.emails) }}
I just add {{ form_widget(form.emails) }} after block thant handles adding to collection and no more label on the end of form.
Cheers
I solved this with :
{{ form_label(form.collection) }}
{% for element in form.collection %}
{{ form_widget(element) }}
{% else %}
{{ form_widget(form.collection) }}
{% endfor %}
(a bit late, I know, but still a problem with Symfony 5)
Symfony renders an entity field type like a choice dropdown - a select, basically. However, the CSS framework that I'm using defines a sort of 'select' as a ul and li as the options. The Custom Field Type documentation gives no help on this scenario.
I'm converting my code from manual HTML rendering of the form dropdown to symfony form's version using twig and form_widget(). However, I want a ul and li instead of a select.
The manual way of creating my dropdown is:
<ul class='dropdown-menu'>
{% for locator in locators %}
<li>
<a href="#" data-id="{{locator.getId() }}">
{{ locator.getName() }}
</a>
</li>
{% endfor %}
</ul>
That's how I would render my dropdown manually before using symfony forms. It looks like this:
I like it. I think it looks awesome. Now, if I'm using Symfony forms, I can just use this instead:
{{ form_start(form) }}
{{ form_widget(form.locator) }} {# This is my locator dropdown #}
{{ form_widget(form.target) }} {# Ignore this #}
{{ form_end(form) }}
The problem is that this renders this instead:
I can't add my custom CSS here because this is rendered as a select instead of an unordered list and lis.
In case it may help, here's my form type being built:
/**
* {#inheritDoc}
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('target')
->add('locator', 'entity', [
'class' => 'Application\Model\Entity\Locator',
'query_builder' => function(EntityRepository $repo) {
return $repo->createQueryBuilder('e');
},
'empty_value' => 'Locator'
])
->add('save', 'submit', ['label' => 'Save']);
$builder->setAction($this->urlGenerator->generate('page_create_element', [
'suiteId' => $options['suiteId'], 'pageId' => $options['pageId']
]))->setMethod('POST');
}
The Question: Is there any way I can have the form commands above auto-generate my ul / li requirement instead of selects, or do I have to render this manually instead and ignore the symfony forms component for this?
Thanks to some of the posters above, there was some information from Form Theming, but it wasn't exactly enough to go along with so I had to do a little bit of digging on github.
According to the documentation, Symfony uses twig templates to render the relevant bits of a form and it's containing elements. These are just {% block %}s in twig. So the first step was to find where a select button is rendered within the symfony codebase.
Form Theming
Firstly, you create your own theme block in it's own twig file and you apply this theme to your form with the following code:
{% form_theme my_form_name 'form/file_to_overridewith.html.twig %}
So if I had overridden {% block form_row %} in the file above, then when I called {{ form_row(form) }} it would use my block instead of Symfony's default block.
Important: You don't have to override everything. Just override the things you want to change and Symfony will fall back to it's own block if it doesn't find one in your theme.
The Sourcecode
On github I found the source code for Symfony's "choice widget". It's a little complex but if you follow it through and experiment a little bit you'll see where it goes.
Within the choice_widget_collapsed block, I changed the select to uls and options to lis. Here's the theme file I created, note the minor differences described above:
{# Symfony renders a 'choice' or 'entity' field as a select dropdown - this changes it to ul/li's for our own CSS #}
{%- block choice_widget_collapsed -%}
{%- if required and empty_value is none and not empty_value_in_choices and not multiple -%}
{% set required = false %}
{%- endif -%}
<ul {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
{%- if preferred_choices|length > 0 -%}
{% set options = preferred_choices %}
{{- block('choice_widget_options') -}}
{%- if choices|length > 0 and separator is not none -%}
<li disabled="disabled">{{ separator }}</li>
{%- endif -%}
{%- endif -%}
{%- set options = choices -%}
{{- block('choice_widget_options') -}}
</ul>
{%- endblock choice_widget_collapsed -%}
{%- block choice_widget_options -%}
{% for group_label, choice in options %}
{%- if choice is iterable -%}
<optgroup label="{{ group_label|trans({}, translation_domain) }}">
{% set options = choice %}
{{- block('choice_widget_options') -}}
</optgroup>
{%- else -%}
<li value="{{ choice.value }}"{% if choice is selectedchoice(value) %} selected="selected"{% endif %}>{{ choice.label|trans({}, translation_domain) }}</li>
{%- endif -%}
{% endfor %}
{%- endblock choice_widget_options -%}
Rendering
Now I can render my form with the following:
{{ form_widget(form.locator, {'attr': {'class': 'dropdown-menu'}}) }}
This uses my theme for the choice dropdown which contains ul and li tags instead of select and option ones. Pretty simple once you know where to look for the original code! The rendered HTML:
<ul id="elementtype_locator" name="elementtype[locator]" required="required" class="dropdown-menu">
<li value="1">id</li>
<li value="2">name</li>
<li value="3">xpath</li>
</ul>
I also had to remove one of the lines that put 'Locator' at the top of the dropdown as there were four dropdown choices (including the empty_data one) instead of three.
I'm new here. I'm also new in working with Symfony2.5.
I want to replace a value with another, better would be to change it via array.
It's hard to explain - here are some code parts:
Recources/Views/register.html.twig:
{% for user in list_user %}
{{ user.Id }}
{{ user.isAdmin }}
{{ user.isActive }}
{% endfor %}
Here I generate the array to send to register.html.twig which looks like this:
Controller/AccountController.php
$user = $this->getDoctrine()
->getRepository('SeotoolMainBundle:User')
->findAll();
return $this->render(
'SeotoolMainBundle:Account:register.html.twig',
array('form' => $form->createView(), 'list_user' => $user)
);
It correctly outputs for isAdmin and isActive 0 or 1. Now I want to replace this output with for example isActive = 1 should Output "Active", isActive = 0 shut Output "Not active".
I hope you understand what I mean and can help me find the correct way to do this.
Thank you guys,
kind regards,
Marvin
Can't you just use an "if"?
{% for user in list_user %}
{{ user.Id }}
{{ user.isAdmin }}
{% if user.isActive %}
Active
{% else %}
Inactive
{% endif %}
{% endfor %}
You can also use the ternary operator, which is more compact.
{% for user in list_user %}
{{ user.Id }}
{{ user.isAdmin }}
{{ user.isActive ? 'Active' : 'Inactive' }}
{% endfor %}