Custom field in option values in Sylius not visible - symfony

Using Sylius 1.10, I managed to add a new field in options and it was visible.
But now, I want to add custom field in option values.
But I'm not able to show the new field in values list: there is no template for option values, only the line {{ form_row(form.values) }}, in vendor/sylius/sylius/src/Sylius/Bundle/AdminBundle/Resources/views/ProductOption/_form.html.twig that creates automatically the following
<div class="required field">
<div data-form-type="collection" id="sylius_product_option_values" class=" controls collection-widget" ...>
in which all translations are visible, and the code field, but my custom field. ;(
How can I find the rendering of this, to add my custom field?
Do I really need to explose the {{ form_row(form.values) }} line, generating the "code" field, my field and using foreach on translations?
Or I did something wrong? (This could be the right answer ;))
php bin/console debug:container app.form.extension.type.product_option_value
gives me
Information for Service "app.form.extension.type.product_option_value"
======================================================================
---------------- ---------------------------------------------------------------------------------------------------
Option Value
---------------- ---------------------------------------------------------------------------------------------------
Service ID app.form.extension.type.product_option_value
Class App\Form\Extension\ProductOptionValueTypeExtension
Tags form.type_extension (extended_type: Sylius\Bundle\ProductBundle\Form\Type\ProductOptionValueType)
form.type_extension
Public no
Synthetic no
Lazy no
Shared yes
Abstract no
Autowired yes
Autoconfigured yes
---------------- ---------------------------------------------------------------------------------------------------
! [NOTE] The "app.form.extension.type.product_option_value" service or alias has been removed or inlined when the
! container was compiled.

The correct template to overwrite is
Sylius/Bundle/UiBundle/Resources/views/Form/theme.html.twig
in this block you should add your custom field
{% block sylius_product_option_value_widget %}
<div class="ui segment">
{{ form_row(form.code) }}
{{ form_row(form.your_custom_field) }}
<div class="five fields">
{% for locale, translationForm in form.translations %}
{{ form_row(translationForm.value, {'label': locale|sylius_locale_name}) }}
{% if 0 == loop.index % 5 %}
</div>
<div class="five fields">
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
Hope that's will be working for you.

Related

Symfony : easy way to format FORMS with CSS?

We're building a web site with Symfony 2. We generate a unique URL and send it by email to user who forgot their password, so they can reset their password.
We're building a simple form to reset a password. We have two labels ('Enter your new password' and 'Enter your new password again') with a textbox beside each.
We wanted the textbox to align with each other.
Lazy solution was to figure out two strings of the same length (!)
But I would have wanted to format them with CSS or put them in a table ...
Is that possible at all with Symfony's form ? I read documentation about customizing templates, but when we tried the solution proposed by Symfony's docs the widgets (textboxes) were not rendering ...
Here are some pics of the issue :
Crooked textboxes
Lazy solution
Here is the code of the twig where I think(!) the formatting should be done
{% block blockPrincipal_mp %}
<h1>{{ titre }}</h1>
{{ form_start(form) }}
<div class="containerForm">
<div class="error">
{{ form_errors(form) }}
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="confirm"><p> {{ flashMessage }}</p></div>
{% endfor %}
</div>
{% endblock %}
You can render all the different elements of the forms individually as opposed to just rendering it all at one time with form_rest(form) as you have in your example. form_rest() is going to render whatever hasn't been rendered yet. And up to this point, All that's been rendered are the errors.
I don't know what your form property's names are but here's an example:
{{ form_start(form) }}
<div class="form_errors">{{ form_errors(form) }}</div>
{# output all pieces of the username element individually #}
<div class="form_label">{{ form_label(form.username) }}</div>
<div class="form_input">{{ form_widget(form.username) }}</div>
<div class="form_errors">{{ form_errors(form.username) }}</div>
{# output all pieces of the password element individually #}
<div class="form_label">{{ form_label(form.password) }}</div>
<div class="form_input">{{ form_widget(form.password) }}</div>
<div class="form_errors">{{ form_errors(form.password) }}</div>
{{ form_rest(form) }}
{{ form_end(form) }}
This way you can control what HTML wrappers surround each piece of your form elements.
Note that you can also output the username and password fields by doing...
{{ form_row(form.username) }} {{ form_row(form.password) }}
...and it will still output the label, widget and errors but will use the default layout for those form types that is defined in your twig templates. So you have more control of rendering the parts if you do them individually.
This is great for custom forms and custom templates, however you can also override the default form element's layout if you want more control over how individual form elements are rendered throughout your site, by extending the form fields template.
https://symfony.com/doc/current/form/form_customization.html
The RepeatedType field can be dispayed separately:
{{ form_row(form.password.first) }}
{{ form_row(form.password.second) }}
or more controlled:
{{ form_label(form.password.first) }}
{{ form_widget(form.password.first) }}
{{ form_label(form.password.second) }}
{{ form_widget(form.password.second) }}

Iterate lists/content in block template twig Drupal 8

How would I be able to supersede the hierarchical dependencies in Drupal 8's twig engine to be able to loop within the i.e Lists/Views which is assigned to a block. So we would have a template: block--views-block--[machine-name]-1.html.twig You will be required to have the variable {{ content }}
Which then recursively buries itself down to field templates. Its completely killing me that one would need so many levels to produce on block of content.
I would like to iterate within the top custom block template the list.
Attempted
{% for key, value in _context %}
<li>{{ key }}</li>
{% endfor %}
To evaluate what is available to iterate down into the object but with no luck. I did though find a nice overriding object structure to reach the field attributes but that was within the field level
item.content['#item'].entity.uri.value
Thanks
i use this to "generate" a picture from my
node--news--full.html.twig
<div class="col-md-3">
{{ content.field_newsbild }}
</div>
the twig debug suggests some filenames. i took this:
field--node--field-newsbild--news.html.twig
and in there i wrote:
{% for item in items %}
<img alt="" src="{{ file_url(item.content['#item'].entity.uri.value) }}" class="img-responsive" {{ attributes }} >
{% endfor %}
hope i'll help a bit.

Changing form data after failed validation in Symfony2

How can I change view data after failed validation (I want to change a checkbox value while displaying validation errors to explain why you can't select it). I suppose form events doesn't help here as the validation happens in the end.
The following code snippet from the Symfony's from bootstrap layout shows how you can check whether form field is valid or not:
{% block form_row -%}
{% spaceless %}
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
{{ form_label(form) }}
<div class="{{ block('form_group_class') }}">
{{ form_widget(form) }}
{{ form_errors(form) }}
</div>
</div>
{% endspaceless %}
{%- endblock form_row %}
Look at if (not compound or force_error|default(false)) and not valid you can use same check in your code.
In short, you should add boolean value to your model, add checkbox type to your FormType representing this value and set it to false when validation fails, like this:
$form->setData($model);
if (!$form->isValid()) {
$model->setFlag(false);
} else {
// save model, redirect etc
}

CSS for Symfony2 forms: "Hello World" equivalent

How to alter the fields.html.twig template?
I am only looking for the "hello world" equivalent to see the first ever change to the form.
What's working (within a bundle view as add.Article.html.twig):
<div class="well;">
<form method="post" {{ form_enctype(form) }}>
{{ form_widget(form,{attr: {class:'test'}} ) }}
<input type="submit" class="btn btn-primary" />
</form>
</div>
The test class is only doing a CSS .test{background-color:grey;}. I am normally using Bootstrap.
In fields.html.twig I have:
{% block aliquam_input %}
{% spaceless %}
<div>
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form, { 'attr': {'class': 'test'} }) }}
</div>
{% endspaceless %}
{% endblock %}
and in app/config/config.yml:
# Twig Configuration
twig:
//..
form:
resources:
- 'AliquamSummaryBundle:Form:fields.html.twig'
The fields.html.twig is rendered ok to the main twig as I get an error when removing one of the hash in the fields twig.
What's not working (i.e. class test doesn't show) is when I try to make the fields.html.twig take effect on Article.html.twig:
{% block aliquam_input %}
{% spaceless %}
<div class="well;">
<form method="post" {{ form_enctype(form) }}>
{{ form_widget(form) }}
<input type="submit" class="btn btn-primary" />
</form>
</div>
{% endspaceless %}
{% endblock %}
As all forms will have the same format, I'd prefer to not set all html attributes to every single line. But what is the way to get the class "test" taking effect from the fields.html.twig template?
___________________________ Update for David _____________
Thanks #David, but unfortunately adding the name as form.name doesn’t change anything. The CSS attribute is still not transferred to the form in html. Well spot for the semicolon after well; it was a late night typo, but not related to the problem.
Here is what I have figured so far. I might have to end up having to enter bootstrap CSS to each individual row in a form (horrible thought) or figure how to do this by entities options, which comes almost to the same horrible thought as doing it for every row. Since the doc offers to enter a template for all forms via app/config/config.yml there should be a far simpler way, but I don’t get it.
The below is the only direction so far which made CSS work a little, i.e. class .test{background-color: black;} is doing its job:
{# ..\addArticle.html.twig #}
<div class="well">
<form method="post" {{ form_enctype(form) }}>
{{ form_widget(form) }}
<input type="submit" class="btn btn-primary" />
</form>
</div>
NB: there is no {% block .. %} around the div, which makes sense as I put the fields.html.twig to be included to the symphony standard widgets through app/config/config.yml. The above goes with the fields.html.twig below.
{# ..\fields.html.twig #}
{% block widget_attributes %}
{% spaceless %}
{{" class=\'test\'" }}
{% endspaceless %}
{% endblock widget_attributes %}
So far only fields with textarea show black color, bit it’s kind of “hello world”. I am not sure if this is right way to proceed as I have not found anything alike in this and other forums and the doc only states to look at form_div_layout.html.twig on git to decide which attribute to change, which is not really helpful (to me).
First change your well; class to well in your add.Article.html.twig.
In order to put a class on your widget I think you can try
{{ form_widget(form.name, {'attr': {'class': 'test'}}) }}
The difference with your code is the form.name parameter. If you only give the form it will not apply passed options. See the doc
Changing the fields.html.twig as
{# ..\fields.html.twig #}
{% block widget_attributes %}
{% spaceless %}
{{" class=\'test\'" }}
{% endspaceless %}
{% endblock widget_attributes %}
is indeed correct in what concerns Symfony and the reason that with bootstrap-CSS only the textareas show the class="test" is that bootstrap assigns mandatorily (all other than textareas) with the bootstrap specific one.
As I don't want to alter the bootstrap as such I ended up assigning the attributes per widget from within the entities - anything else would probably opening a can of worms.

form_rest command showing previously-rendered Collection field

I have a form with a collection type field, rendered like that:
<div id="beneficiosTab" class="opcional">
Beneficios
<ul class="beneficios" data-prototype="{{ form_widget(formAtendimento.beneficios.get('prototype')) | e }}">
{% for beneficio in formAtendimento.beneficios %}
<li>{{ form_row(beneficio.coTipoBeneficio) }}</li>
<li>{{ form_row(beneficio.vrValor) }}</li>
<li>{{ form_row(beneficio.boConcedido) }}</li>
{% endfor %}
<li>Add Beneficio</li>
</ul>
</div>
<div style="clear:both"></div>
{{ form_rest(formAtendimento) }}
The form's entity can have multiple items of the collection, or none.
When the entity has items of the collection, it works fine, but when it has none, the "for" in the twig doesn't happen, and a "Beneficios" div is generated in form_rest.
Any way I can prevent that? Thanks in advance.
This seems like a bug in the form rendering. I managed to disable the extra form rendering in the form_rest function, by adding this code just after rendering the collection elements:
{% do form.uploads.setRendered() %}
Where "uploads" is my collection field type.
This doesn't seem like best practice to me though.
So the whole rendering looks like this:
<div id="uploads" data-prototype="{{ form_widget(form.uploads.vars.prototype)|e }}">
{% for upload in form.uploads %}
{{ form_widget(upload) }}
{% endfor %}
</div>
{% do form.uploads.setRendered() %}
form_rest generate all unrendered forms. Every input is form in Symnfony2, the same goes with collection type.
You never printed out collection, so Symfony makes it for you.
If you want hide it, and still use form_rest simply print it it to:
<div style="display: none" />

Resources