How to render a Tabler submit button

[cavasinf]

@kevinpapst just curious, how do you render your submit form button.

From the embeds/button macro you can only create a fake button through <a> element. In that case, no submit type possible.

So, did you create it from your formbuilder and render it via form_row() ?

[kevinpapst]

That is something I am not entirely sure if it should be embedded in the theme or not.

I have two includes. One for inline forms:

{% if form_theme is defined %}
    {% form_theme form form_theme %}
{% endif %}
{% set _back = back is defined and back is not same as (false) ? back : false %}
{% set _reset = reset is defined and reset is same as (false) ? false : true %}
<div class="card mb-3">
    {% block form_before %}{% endblock %}
    {{ form_start(form, formStartOptions|default({})) }}
    <div class="card-header">
        <h3 class="card-title">
            {% if form.vars.docu_chapter is defined and form.vars.docu_chapter is not empty %}
                <a class="btn btn-icon btn-outline-secondary me-2" href="{{ form.vars.docu_chapter|docu_link }}" target="_blank">{{ icon('docu_chapter') }}</a>
            {% endif %}
            {{ title }}
        </h3>
    </div>
    <div class="card-body">
        {% block form_body %}
            {{ form_widget(form) }}
        {% endblock %}
    </div>
    <div class="card-footer">
        {% block submit_button %}
            <input type="submit" data-loading-text="{{ (submit_button|default('action.save'))|trans }}…" value="{{ (submit_button|default('action.save'))|trans }}" class="btn btn-primary" />
        {% endblock %}
        {% if _back is not same as (false) %}
            <a href="{{ _back }}" class="btn btn-link">{{ 'action.back'|trans }}</a>
        {% endif %}
        {% if _reset is not same as (false) %}
            <input type="reset" value="{{ 'action.reset'|trans }}" class="btn btn-link pull-right" />
        {% endif %}
    </div>
    {{ form_end(form) }}
    {% block form_after %}{% endblock %}
</div>

And one for modals:

<div class="modal modal-blur fade {% block modal_class %}{% endblock %}" id="{% block modal_id %}form_modal{% endblock %}" tabindex="-1" role="dialog" aria-labelledby="{{ block('modal_id') }}_label">
    <div class="modal-dialog {% block modal_size %}modal-lg{% endblock %}" role="document">
        <div class="modal-content">
            {% block form_before %}{% endblock %}
            {% block modal_before %}{{ form_start(form, formStartOptions|default({})) }}{% endblock %}
            <div class="modal-header">
                <h5 class="modal-title" id="{{ block('modal_id') }}_label">
                    {% block modal_title %}
                        {% if form.vars.docu_chapter is defined and form.vars.docu_chapter is not empty %}
                            <a class="btn btn-icon btn-outline-secondary me-2" href="{{ form.vars.docu_chapter|docu_link }}" target="_blank">{{ icon('docu_chapter') }}</a>
                        {% endif %}
                        {{ title }}
                    {% endblock %}
                </h5>
                <button type="button" class="btn-close{% if tabler_bundle.isDarkMode() %} btn-close-white{% endif %}" data-bs-dismiss="modal" aria-label="{{ 'action.close'|trans }}"></button>
            </div>
            <div class="modal-body">
                {% block modal_body %}
                    {% block form_body %}
                        {{ form_widget(form) }}
                    {% endblock %}
                {% endblock %}
            </div>
            <div class="modal-footer">
                {% block modal_footer %}
                    {% block submit_button %}
                        <button type="submit" class="btn btn-primary pull-left modal-form-save" data-loading-text="{{ (submit_button|default('action.save'))|trans }}…" id="{{ block('modal_id') }}_save">{{ (submit_button|default('action.save'))|trans }}</button>
                    {% endblock %}
                    <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">{{ 'action.close'|trans }}</button>
                {% endblock %}
            </div>
            {% block modal_end %}{{ form_end(form) }}{% endblock %}
            {% block form_after %}{% endblock %}
        </div>
    </div>
</div>

What do you think, should they be included in the theme?

[cavasinf]

As the Symfony "best practice" define: https://symfony.com/doc/5.4/best_practices.html#add-form-buttons-in-templates

Instead of adding buttons in form classes or the controllers, it's recommended to add buttons in the templates.

Unless if it's a multiple submit button, it should not be a form_row()..
https://symfony.com/doc/current/form/multiple_buttons.html

At the end, it could be embedded in theme IMO.
There is only 2 majors param that changes from different use cases:

• label
• btn-xxxxxx (class)

The other custom can be:

• Icon (or twig label|raw)
• extra classes
• extra attr

Note: post url is defined by form. If called/defined outside of a form, it will for sure doesn't do anything. Dev awareness, not us.

[cavasinf]

I don't know if you do that too but when I am using "save" and "create new" just behind from the same button without JS. I can't see any other option unless create the button from the controller.

#[Route('/new', methods: ['GET', 'POST'], name: 'admin_post_new')] 
public function new(Request $request, EntityManagerInterface $entityManager): Response { 
        $post = new Post();
        $post->setAuthor($this->getUser());
        $form = $this->createForm(PostType::class, $post)
            ->add('saveAndCreateNew', SubmitType::class);

        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $entityManager->persist($post);
            $entityManager->flush();

            $this->addFlash('success', 'post.created_successfully');

            if ($form->get('saveAndCreateNew')->isClicked()) {
                return $this->redirectToRoute('admin_post_new');
            }

            return $this->redirectToRoute('admin_post_index');
        }

...
}

So form_row on a ButtonType should still/always be implemented.

For other/normal case, we can add a submit_button() macro on TablerBundle to auto create it with label + type param.

[kevinpapst]

I have forms with multiple buttons, but I have to check if that is JS or not. But do you think this has to do with the theme? Or is that a Symfony issue?

I have either forms using one of the above includes OR I use forms without submit button and JS submits via "onchange" events.

Maybe that is why I cannot exactly follow your issue. Can you explain what you think is missing? I haven't had a second ☕ yet, so I am slow 😬

[cavasinf]

Reply for #23 (reply in thread) to summarize.

We have two possible ways to create a button from Symfony

Controller render

⚠️ Only used when MULTIPLE submit buttons ⚠️

You can create button from Symfony form via SubmitType:

$form = $this->createForm(PostType::class, $post)
            ->add('saveAndCreateNew', SubmitType::class);

And check in controller if used by:

$form->get('saveAndCreateNew')->isClicked()

It will be rendered from Twig via form_row() or form_widget().

Everything is fine today because it is already implemented in TablerBundle ✔️

HTML/Twig render

When using ONE submit button, Symfony recommend to create it from raw HTML.

In our case, we have:

• Macro that can render fake buttons through <a> element with btn class.
  It cannot be used to submit form❌
• No Macro to render <button> ❌

At the end, we have to manually copy/pasta HTML <button type="submit"> to submit form.
It will be nicer to have macro like button() to render that with: label, btn type, icon, ...

[kevinpapst]

Aha, okay then we should add a form_button() macro to render a <button>?

[cavasinf]

Indeed 👍