How to split a large form into tabs in symfony 4?

Question

symfony

Hey!
There is a form form with many fields, which, according to the meaning, need to be distributed among the tabs:
General | security | details | SEO | Additional
How can this be done in Symfony 4?

Answer 1

You just need to manually render the form fields in the tabs code in the template ( How to Control the Rendering of a Form ). If this is the admin and you are using bootstrap, you can use tabs: https://getbootstrap.com/docs/4.0/components/navs/#tabs .
The main problem with using tabs is that you want the current tab to remain open after the form is submitted. Therefore, you need to save the ID of the current tab in the browser's storage. An example can be found here: How to keep the current tab active on page reload ... .
It might look something like this:

{% extends 'base.html.twig' %}

{% block body %}
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#general-tab" data-toggle="tab" role="tab" aria-selected="true">
            General
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#security-tab" data-toggle="tab" role="tab" aria-selected="false">
            Security
        </a>
    </li>
</ul>
<div class="tab-content">
    {{ form_start(form) }}
    {{ form_errors(form) }}
    <div class="tab-pane active show" id="general-tab" role="tabpanel" aria-labelledby="general-tab">
        {{ form_row(form.field1) }}
        {{ form_row(form.field2) }}
    </div>
    <div class="tab-pane" id="security-tab" role="tabpanel" aria-labelledby="security-tab">
        {{ form_row(form.field3) }}
        {{ form_row(form.field4) }}
    </div>
    <button type="submit">Submit</button>
    {{ form_end(form) }}
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script charset="utf-8">
$(function() {
    $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });

    var activeTab = localStorage.getItem('activeTab');

    if (activeTab) {
        $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
    }
});
</script>
{% endblock javascripts %}

{% block stylesheets %}
{{ parent() }}
<style type="text/css" media="screen">
.tab-pane:not(.show) {
    display: none;
}
.tab-pane.show {
    display: block;
}
</style>
{% endblock  %}