Search code examples
easyadminsymfony6

How to integrate Symfony 6 form with proper style into EasyAdmin 4?


I have a logic that wouldn't be easy to implement in EasyAdmin so I decided that I implement it in Symfony 6 then integrate it into EA. The integration worked like a charm but I can't figure out which form_theme should I use to look like the other EA forms.

I have created a form type which doesn't belong to any entity since multiple entities will be generated after the validation based on the input data.

This is the controller

<?php
    
namespace App\Controller\Admin;
    
use App\Form\Type\NewTextType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
    
class TextController extends AbstractController
{
    #[Route('/admin/text/new', name: 'new_text')]
    public function new(): Response
    {
        $defaultData = [];
        $form = $this->createForm(NewTextType::class, $defaultData);

        if ($form->isSubmitted() && $form->isValid()) {
            $data = $form->getData();

            // process the data and persist them as different entities
            // redirect to the empty form and do it again
        }

        return $this->renderForm('admin/text/new.html.twig', [
            'form' => $form,
        ]);
    }
}

and the template

{% extends '@EasyAdmin/page/content.html.twig' %}
{% form_theme form 'foundation_5_layout.html.twig' %}

{% block content_title %}
    <h1 class="title">Add new Text</h1>
{% endblock %}

{% block main %}
    {{ form(form) }}
{% endblock %}

Unfortunately it looks like a crap.

enter image description here

It looks better if I replace foundation_5_layout with {% form_theme form 'bootstrap_5_layout.html.twig' %} but then the appearance setting is not applied even though it is presented in the BODY tag: data-ea-dark-scheme-is-enabled="true"

enter image description here

What do I miss here?

I use Symfony 6.1.2 and EasyAdmin 4.3.2


Solution

  • Finally I have found the right template which supports the Light/Dark appearance:

    {% form_theme form '@EasyAdmin/crud/form_theme.html.twig' %}
    

    The whole template

    {% extends '@EasyAdmin/page/content.html.twig' %}
    {% form_theme form '@EasyAdmin/crud/form_theme.html.twig' %}
    
    {% block content_title %}
        <h1 class="title">Add new Text</h1>
    {% endblock %}
    
    {% block main %}
        {{ form(form) }}
    {% endblock %}