http://symfony.com/doc/current/cookbook/form/form_collections.html
Symfony2 embedded forms rendering in a twig template
I am aware of how I might render the two forms on an individual field basis - but what I want to render the main form and sub-form in more expedient way:
{{ form_start(form) }}
{{ form_widget(form.base) }}
{{ form_widget(form.child1) }}
{{ form_widget(form.child2) }}
{{ form_end(form) }}
Possible? Or do I have to render each of the fields individually if I need this type of control?
EDIT | HERE IS WHAT I HAVE
<div class="box box-primary">
{{ form_start(form) }}
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">Master</li>
<li>Stock</li>
</ul>
<div class="tab-content">
<div class="active tab-pane" id="activity">
{{ form_row(form.partNumber) }}
{{ form_row(form.partDescription) }}
</div>
<div class="tab-pane" id="timeline">
{% for stock in form.inventoryStock %}
<div>{{ form_widget(stock.onHandQuantity) }}</div>
<div>{{ form_widget(stock.batchNumber) }}</div>
<div>{{ form_widget(stock.serialNumber) }}</div>
{% endfor %}
</div>
</div>
</div>
{{ form_end(form) }}
</div>
You should just need to do this:
{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}
See the Rendering the Form section of the Symfony documentation. As long as everything is defined properly, Symfony will render all of the parts of the form for you, included forms that are embedded.
You often will need to use the capabilities for extra granularity but it's not required.
Also, it's absolutely possible to do what you stated - just give it a try and you'll see that you can.
Related
im trying to get bullet points on all listed items on that tab (collapsible content) on dawn theme with shopify. But i managed to get that just on first item, you can check here with preview url: https://1524t2hmp2urghsm-53196980409.shopifypreview.com
and here is part of code reference this issue:
{%- when 'collapsible_tab' -%}
<div class="product__acordion_container">
<div class="product__accordion accordion" {{ block.shopify_attributes }}>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary>
<div class="summary__title">
{% render 'icon-accordion', icon: block.settings.icon %}
<h2 class="h4 accordion__title">
{{ block.settings.heading | default: block.settings.page.title }}
</h2>
</div>
{% render 'icon-caret' %}
</summary>
<ul>
<li id="ProductAccordion-{{ block.id }}-{{ section.id }}">{{ block.settings.content }}</li>
{{ block.settings.page.content }}
</ul>
</details>
</div>
</div>
https://ed.codes/blogs/tutorials/add-a-youtube-video-inside-collapsible-row-block-accordion-on-shopify-product-page use this vid to add the element to the block
then add a container in the liquid
<p>
{% if product.metafields.custom.METAFIELDNAME %}
<div class="product-features__features Container">
{{product.metafields.custom.METAFIELDNAME}}
</div>
{% endif %}
</p>
and then link to the HTML formatted list as a multi-line text meta field.
I am new to Drupal, and I'm creating a custom theme based on a Bootstrap Bario subtheme on Drupal 8.
I can update the CSS with no problem, but I first need to clear the cache before reloading the page (which gets annoying, is there a way to avoid that?).
This is how the theme's regions are arranged:
I added the help: 'Help' region in the .info.yml file, under the line footer_fifth: 'Footer Fifth', and the added Help region appears in the Block Layout page.
I then modified the relevant parts of templates/_page.html.twig like so:
From this
{% block footer %}
<div class="{{ container }}">
{% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
<div class="site-footer__top clearfix">
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
{{ page.footer_fourth }}
</div>
{% endif %}
{% if page.footer_fifth %}
<div class="site-footer__bottom">
{{ page.footer_fifth }}
</div>
{% endif %}
</div>
{% endblock %}
to this
{% block footer %}
<div class="{{ container }}">
{% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth or page.footer_fifth %}
<div class="site-footer__top clearfix">
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
{{ page.footer_fourth }}
{{ page.footer_fifth }}
</div>
{% endif %}
{% if page.help %}
<div class="site-footer__bottom">
{{ page.help }}
</div>
{% endif %}
</div>
{% endblock %}
As you can see, I added or page.footer_fifth to the first if statement, moved {{ page.footer_fifth }} to the site-footer__top div, and added {{ page.help }} in its place.
After that, I go and clear the cache, but the block regions are still the same. If I inspect my block in the Footer Fifth region, it is still in the <div class="site-footer__bottom">.
Did I miss something?
Thank you in advance.
I think the template file name is wrong. See:
templates/_page.html.twig usually should be:
templates/page.html.twig
the complete path of your template should be "/themes/custom/yourthemename/".
PS: theme debug will help you in case of any doubt.
https://www.drupal.org/docs/theming-drupal/twig-in-drupal/debugging-twig-templates
I work with a symfony embedded form to manage my translated fields for a given entity. My principal entity has a boolean field and I have multiple text fields for each translation.
I do not use the translatable doctrine extension and I do not want to use it.
In my FormType, I use a CollectionType to embed the translated fields in my form, and in the template, I use the form theme to customize the HTML.
This is my problem : I would like to group fields in my form to optimize UX but once I call the form_widget on my field, I cannot use it a second time. I would like to show 2 fields for a given language and then another field for another language further in the form. How can I solve my problem ?
This is a twig example that illustrate my problem.
{% form_theme form _self %}
{% block _service_translations_entry_widget %}
<div>
{% if name == 0 %}
<div class="s12 m6 l6">
{{ form_label(form.title) }}
{{ form_errors(form.title) }}
{{ form_widget(form.title) }}
</div>
<div class="s12 m6 l6">
{{ form_label(form.subtitle) }}
{{ form_errors(form.subtitle) }}
{{ form_widget(form.subtitle) }}
</div>
{% endif %}
{% if name == 1 %}
<div class="s12 m12 l12">
{{ form_label(form.desc) }}
{{ form_errors(form.desc) }}
{{ form_widget(form.desc) }}
</div>
{% endif %}
</div>
{% endblock %}
{% block body %}
{{ form_start() }}
{{ form_errors(form) }}
<div>
<div class="s12 m12 l12">
{{ form_label(form.doubleBlock) }}
{{ form_errors(form.doubleBlock) }}
{{ form_widget(form.doubleBlock) }}
</div>
</div>
<div id="block-1">
{{ form_widget(form.translations) }}
</div>
<div>
<div class="s12 m6 l6">
{{ form_label(form.activedStyle) }}
{{ form_errors(form.activedStyle) }}
{{ form_widget(form.activedStyle) }}
</div>
<div class="s12 m6 l6">
{{ form_label(form.checkoutOption) }}
{{ form_errors(form.checkoutOption) }}
{{ form_widget(form.checkoutOption) }}
</div>
</div>
<div id="block-2">
{{ form_widget(form.translations) }}
</div>
{{ form_widget(form.save) }}
{{ form_rest(form) }}
{{ form_end(form) }}
{% endblock body %}
As you say, you can’t reuse a field.
My suggested approach would be to add an additional field to the form, translations_extra, which either isn’t mapped to or persisted by the entity. Extract the data in the controller on form submission and then add it to the translations collection before persisting.
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) }}
I would like to use prototype like here http://symfony.com/doc/current/cookbook/form/form_collections.html#allowing-new-tags-with-the-prototype, but my form looks:
<div class="form-group row">
<div class="col-md-4">{{ form_widget(productAttribute.attribute, {'attr': {'class': 'form-control'}}) }}</div>
<div class="col-md-6">{{ form_widget(productAttribute.value, {'attr': {'class': 'form-control'}}) }}</div>
</div>
Before the loop is a div with data-prototype attribute which contains form fields without wrapped divs and classes and I don't know how to get wrapped divs with classes there. Thank you for your advice.
Twig side:
<div id="template" style="display: none">
{{ form_widget(form.tags.vars.prototype)|e }}
</div>
Js side:
var templateContent = $.("#template").html();
Or, twig:
{% set subform = form.tags.vars.prototype %}
{{ form_row(subform.fielName) }}
...