I'd like to create some nested macros. One for a section, and in there I'd like to call the macro of any component dynamically. (In this case the component I want to call is article.)
Here's my section macro:
<!-- section.nunjucks -->
{% macro section(config) %}
<section class="site__section section">
{% for item in config %}
{{ item.macro(item.settings) }}
{% endfor %}
</section>
{% endmacro %}
Component macro:
<!-- article.nunjucks -->
{% macro article(settings) %}
<article class="article {{ settings.classes }}">
<h1 class="article__title">Hello World</h1>
<p class="article__body">Lorem ipsum dolor.</p>
</article>
{% endmacro %}
And i'm trying to call it here:
{{ section([{'macro': article, 'settings': {'classes': 'article--large'}}]) }}
I get a syntax error for this bit: 'settings': {'classes': 'article--large'}
How can I pass in settings.classes as a parameter, when calling my settings macro?
As I just have found out, spaces matter in Nunjucks. So writing
{{ section([{ 'macro': article, 'settings': { 'classes': 'article--large' } }]) }}
instead, will actually run without any syntax errors.
Related
I've implemented IvoryCKEditorBundle in my SYMFONY 3.2 project.
I followed the guidelines from here and had an overview of the doc on the official Symfony site.
Now I see the following files exits in the IvoryCKEditorBundle directory:
[my
project]\vendor\egoloen\ckeditor-bundle\Resources\views\Form\ckeditor_widget.html.twig
[my
project]\vendor\egoloen\ckeditor-bundle\Twig\CKEditorExtension.php
And [my
project]\vendor\egoloen\ckeditor-bundle\Resources\views\Form\ckeditor_widget.html.twig defines {% block ckeditor_widget %}.
In my projet I have redefined my own template to render a form, using all the tricks given in the official doc. And under [my project]\src\MyBundle\Resources\views I have a file input_inline_template.html.twig which looks like that:
{% extends 'form_div_layout.html.twig' %}
{% use 'CKEditorBundle:Form:ckeditor_widget.html.twig' %}
{% block form_row %}
<div class='col-12' id={{ id ~ '_div_row_id'}}>
{% block form_label %}
<div class='col-4' id={{ id ~ '_div_label_id' }}>
{{ parent() }}
</div>
{% endblock %}
{% if form.vars.block_prefixes.2 == "textarea" %}
{% if (form.vars.block_prefixes.3 is defined) and (form.vars.block_prefixes.3 == "ckeditor") %}
{% block ckeditor_widget %}
<div class='col-8'>
{{ parent() }}
</div>
{% endblock %}
{% else %}
{% block textarea_widget %}
<div class='col-8'>
{{ parent() }}
</div>
{% endblock %}
{% endif %}
{% endif %}
</div>
{% endblock %}
This does not work. It tells me that it cannot find the ckeditor_widget if I don't have the line {% use 'CKEditorBundle:Form:ckeditor_widget.html.twig' %} it throws the error:
Block "ckeditor_widget" on template "form_div_layout.html.twig" does not exist in "form_div_layout.html.twig".
And when the line {% use 'CKEditorBundle:Form:ckeditor_widget.html.twig' %} is implemented, it throws an error that is:
Unable to find template "CKEditorBundle:Form:ckeditor_widget.html.twig"
It tells me it looks for CKEditorBundle:Form:ckeditor_widget.html.twig in:
[my_symf_project]\app/Resources/views, [my_symf_project]\vendor\symfony\symfony\src\Symfony\Bridge\Twig/Resources/views/Form, [my_symf_project]\vendor\knplabs\knp-menu\src\Knp\Menu/Resources/views.
I don't know how to configure in [my project]\app\config\config.yml that it should look in [my project]\vendor\egoloen\ckeditor-bundle\Resources\views\Form\ to find ckeditor_widget.html.twig.
I found a hint here.
In [my project]\src\MyBundle\Resources\views\input_inline_template.html.twig, I've replaced: {% use 'CKEditorBundle:Form:ckeditor_widget.html.twig' %} with: {% use 'IvoryCKEditorBundle:Form:ckeditor_widget.html.twig' %}.
It fixed it.
I would like to display form error message inside bootstrap tooltip.
<div class="btn-upload" data-toggle="tooltip" data-html="true" data-title="{% if document.documentFile.vars.errors|length > 0 %}<span class='text-danger'>{{ form_errors(document.documentFile) }}</span>{% endif %}">
It should display form error inside tooltip on icon.
But message is displayed like this:
Now if I change {{ form_errors(document.documentFile) }} to "TEST MESSAGE":
So the problem is form error rendering inside tooltip. Any ideas how to fix it?
The {{ form_errors(document.documentFile) }} renders HTML with " that breaks your div.
Consider doing this :
<div class="btn-upload" data-toggle="tooltip" data-html="true" id="error-tooltip">
<script type="text/html" id="form-error">
{% if document.documentFile.vars.errors|length > 0 %}
<span class='text-danger'>{{ form_errors(document.documentFile) }}</span>
{% endif %}
</script>
<!-- ... -->
</div>
And, in your JS :
$('#error-tooltip').data('tooltip', $('#form-error').html());
I finally figured out a simplier way to achieve it by foreaching errors of document.documentFile.vars.errors. A little bit similar way to Favian's answer but without rewriting a block.
<div class="btn-upload" data-toggle="tooltip"
{% if document.documentFile.vars.errors|length > 0 %}
data-html="true"
data-title="<span class='text-danger'>
{% for error in document.documentFile.vars.errors %}
{{ error.message }}
{% endfor %}
</span>"
{% endif %}
>
Works just fine!
By default, the errors are rendered inside an unordered list:
<ul>
<li>The file is to large bla bla bla</li>
</ul>
To override how errors are rendered for all fields, simply copy, paste and customize the form_errors fragment.
<div class="btn-upload" data-toggle="tooltip" data-html="true" data-title="{% if document.documentFile.vars.errors|length > 0 %}<span class='text-danger'>
{% block form_errors %}
{% spaceless %}
{% if errors|length > 0 %}
{% for error in document.documentFile %}
{{ error.message }}
{% endfor %}
{% endif %}
{% endspaceless %}
{% endblock form_errors %}
</span>{% endif %}">
</div>
I was sure I understand this process, but when I dug deeper I saw I am wrong ;(
Let's take simple form, please notice that this form contains 3 fields
$form = $this->createFormBuilder($defaultData, ['csrf_protection' => false])
->add('email', 'email')
->add('name', 'text')
->add('message', 'textarea')
->getForm()
->createView();
which is rendered as
{{ form(form, {'attr': {'novalidate': 'novalidate'}}) }}
into
Built in "form" block from vendor\symfony\symfony\src\Symfony\Bridge\Twig\Resources\views\Form\form_div_layout.html.twig looks like:
{% block form %}
{% spaceless %}
{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}
{% endspaceless %}
{% endblock form %}
and form_widget(form)
{% block form_widget %}
{% spaceless %}
{% if compound %}
{{ block('form_widget_compound') }}
{% else %}
{{ block('form_widget_simple') }}
{% endif %}
{% endspaceless %}
{% endblock form_widget %}
{% block form_widget_simple %}
{% spaceless %}
{% set type = type|default('text') %}
<input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{% endspaceless %}
{% endblock form_widget_simple %}
Let's modify form and form_widget a bit:
{% block form %}
{% spaceless %}
{{ form_start(form) }}
-form_widget before-
{{ form_widget(form) }}
-form_widget after-
{{ form_end(form) }}
{% endspaceless %}
{% endblock form %}
{% block form_widget %}
{% spaceless %}
- form_widget call -
{% if compound %}
- form_widget compound-
{{ block('form_widget_compound') }}
{% else %}
- form_widget simple-
{{ block('form_widget_simple') }}
{% endif %}
{% endspaceless %}
{% endblock form_widget %}
then as an output I got (listing 5):
<form name="form" method="post" action="" novalidate="novalidate">
-form_widget before-
- form_widget call -
- form_widget compound-
<div id="form" novalidate="novalidate">
<div>
<label for="form_email" class="required">Email</label>
<input type="email" id="form_email" name="form[email]" required="required" />
</div>
<div>
<label for="form_name" class="required">Name</label>
- form_widget call -
- form_widget simple-
<input type="text" id="form_name" name="form[name]" required="required" />
</div>
<div>
<label for="form_message" class="required">Message</label>
<textarea id="form_message" name="form[message]" required="required">Type your message here</textarea>
</div>
</div>
-form_widget after-
</form>
we can easly notcie the flow
form -> form_widget (input parameter is the whole form) -> form_widget_compound -> form_rows (iterates form elements into next function) -> form_row -> form_widget (this call form element is passed as parameter)
so here is the time for question, if form_widget is called 4 times (or more), once for form, 3 times for fields then why in listing 5 'form_widget call' text appears only 2 times?
or other words how email and message were rendered?
The form theming in SF2 uses inheritance. That means that if blocks named email_widget and textarea_widget are defined, neither your e-mail nor your textarea fields will use form_widget. They will rather respectively use their own widget blocks: email_widget and textarea_widget.
Well, in form_div_layout.twig, these two widget blocks are defined. Thus form_widget is not called for 2 of your fields. Thus your message is displayed 2 times instead of 4.
If you want to customize the rendering of these fields, you will have to create your own block definitions email_widget and textarea_widget in your custom form theme file.
Edit:
The default form theme files are defined under Symfony\Bridge\Twig\Resources\views\Form. The default file used is form_div_layout.html.twig.
Although the inheritance logic itself is indeed in the PHP code of the TWIG bridge, it does not define which block inherit from which other block.
Inheritance is actually defined in your FormType classes. Each form type class sports a getParent() method that return the name of the form from which it inherits. The name of a form type is the result of the method getName() of its associated form type class. For instance, with a built-in example, Symfony\Component\Form\Extension\Core\Type\TextareaType:
Textarea >> Text >> Field >> Form
All you have to do is to look for the methods getParent() and getName(). Thus, by default, when rendering the textarea row, Twig will search the block textarea_row, text_row, field_row and finally form_row (the base default row). The first of these blocks that is defined in your form theme is rendered.
The definition of the blocks themselves happen in the form theme files.
I need my symfony2/twig forms to adhere to a certain condition: All form rows must look similar to this:
{% block form_row %}
<div class="CONSTANT_CLASS class_based_on_field_type class_based_on_error">
{{ form_label(form) }}
{{ form_widget(form) }}
...
</div>
{% endblock form_row %}
Notice that I need to get the field type within the form_row block. Alas, the field type is only defined at the widget level.
I definitely need a way to let my form_row know what type of field it is dealing with.
So i suppose it would be best to somehow override the form_row twig function.
Where can the default twig functions be overridden? And how could this be done?
Remember, this is not about customizing a form. I need to know how to add to existing form variables for existing field types.
#nifr:
The key answer for you seems to be the {% set typeClass ... %}. But there is not a defined variable text anywhere for the template. Look at form_div_layout.html.twig at line 158ff, I think the type really gets set only at the form_widget level and is thus capsulated to be there. That means using the type at the form_row level will aways result in the given default (So it occurred to me while testing). If you can prove this wrong I will happily accept your answer.
How to override the form_row block in Twig adding attributes by field-type?
Though you say this is not about form customization it can be achieved with it ... Quick Introduction for others reading this now.
The default symfony twig form extensions can be found here.
The default twig form theme can be found at Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig.
General information on how to override forms can be found in the How to Customize Form Rendering chapter of the Book but i will sum this up shortly.
form_row Default
{% block form_row %}
{% spaceless %}
<div>
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</div>
{% endspaceless %}
{% endblock form_row %}
Overriding Form Level
Add this to the form template you want to customize:
{% form_theme form _self %}
If you want to put the {% block form_row %} into another bundle/template use this:
{% form_theme form 'AcmeDemoBundle:Form:fields.html.twig' %}
Now insert your custom form_row block after the form_theme declaration or put it into the specified template (in our case this would be AcmeDemoBundle:Form:fields.html.twig).
In my example we will add the class 'error' if there is an error in the form row and a another classname nameely the type name of the current field-type.
{% block form_row %}
{% spaceless %}
{# set class to 'error' if errors exist #}
{% set attr = attr|merge({'class': attr.class|default('') ~ (errors|length > 0 ? ' error' : '') }) %}
{% set typeClass = ' ' ~ type|default('text') %}
{#
you could also implement a logic matching input types with an array of their
desired classname-representations here.
#}
{% set attr = attr|merge({'class': attr.class|default('') ~ type) }) %}
<div class="{% for class in attr.class %}{{ class }}{% endfor %}{{ typeClass }}">
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</div>
{% endspaceless %}
{% endblock form_row %}
if you want to apply your form_row block system-wide add your AcmeDemoBundle:Form:fields.html.twig to your twig.templating.form.resources !
# app/config/config.yml
framework:
templating:
form:
resources:
- 'AcmeDemoBundle:Form'
In the form_row block you can use :
{{ form.vars.block_prefixes[2] }}
form.vars.block_prefixes gives you an array with more information and it might change with versions. But from what I have seen so far it is always index 2
I've got a collection of hidden fields in my form.
<ul id="user_roles">
<li><hidden field value="role1"></li>
<li><hidden field value="role2"></li>
(...)
</ul>
I use jQuery (and data-prototype) to add new roles.
The problem is that I would like to render something like this:
<ul id="user_roles">
<li>role1 <hidden field value="role1"></li>
<li>role2 <hidden field value="role2"></li>
(...)
</ul>
No problem with the initial rendering: i just put:
{% for role in roles %}
<li> {{ role }} {{ form_row(role) }} </li>
{% endfor %}
But the default data-prototype will render only {{ form_row(role) }} (a hidden field).
Where am I supposed to change the default data-prototype?
There is no {% block prototype %} in form_div_layout.html that i could customize....
The collection widget is defined as follows:
{% 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 %}
So you can override this to gain control on how you want to rendre the prototype.
You can also access prototype from inside template by calling roles.vars.prototype and use it later in your JS. If you want to put it into data-prototype attribute of div (as it is normally rendered) you have to remember to escape it:
<div data-prototype="{{ form_row(roles.vars.prototype) | escape }}">
{% for role in roles %}
<li> {{ role }} {{ form_row(role) }} </li>
{% endfor %}
</div>
The method recommended in the docs allows you to easily customize each collection independently inside your app, all within the same file.
Create a file prototype_layout.html.twig:
{% block _myform_mycollection_entry_row %}
<div class="row">
<div class="col-sm-6">{{ form_row(form.title) }}</div>
<div class="col-sm-6">{{ form_row(form.author) }}</div>
</div>
{% endblock %}
The name of the block is important. The first part will be _myform if your parent form is called MyformType and the second part _mycollection if your form field owning the collection is called so. The third part must always be _entry_row in order for this to work.
For example, if you have a UserType form with a collection of 'books' the block name might be _user_books_entry_row
To make sure you got the name right, add a subform (by clicking the add button adding subforms with javascript) and inspect the id of the corresponding select html element using the inspector tool of your browser.
If it looks like user_books_0_title, then the block name will be _user_books_entry_row
Declare this file as a global form theme in the twig section of config.yml:
twig:
form_themes:
- 'AppBundle:Form:prototype_layout.html.twig' #adapt this path if you saved your file elsewhere
You can also use the file directly in your form view:
{% use "AppBundle:Form:prototype_layout.html.twig" %}