EasyAdmin 3 : modifier l’agencement des champs dans un formulaire

Bonjour à tous, je souhaite partager ce petit tuto pour aider les développeur Symfony à modifier, (ré)agencé les champs dans le formulaire de création, modification, …

Formulaire de base sur une entités Article

Pour commencer, allons faire un tour dans le crudController de notre entitée.

Nous allons séparer les champs par “Panel”

Dans cette exemple, je souhaite avoir a gauche du formulaire, les champs “title” et “content”.

A droite les autres champs.

Au dessus de

IdField::new(‘id’)->hideOnForm(),

TextField::new(‘title’)->setLabel(‘Titre de l\’article’),

TextEditorField::new(‘content’)->setFormType(CKEditorType::class)->setLabel(‘Contenu de l\’article’)->hideOnIndex(),

Je vais ajouter :

FormField::addPanel()->addCssClass(‘col-md-8’),

Se qui nous donne :

FormField::addPanel()->addCssClass(‘col-md-8’),

IdField::new(‘id’)->hideOnForm(),

TextField::new(‘title’)->setLabel(‘Titre de l\’article’),

TextEditorField::new(‘content’)->setFormType(CKEditorType::class)->setLabel(‘Contenu de l\’article’)->hideOnIndex(),

Vous aurais reconnu les classes CSS utilisée dans bootStrap.

Il nous faut un deuxième panel pour la partie de droite j’ajoute donc :

FormField::addPanel()->addCssClass(‘col-md-4’),

Au debut du champ qui va démarrer le deuxième Panel, je renseigne aussi au passage la variable pour la methode addPanel(), afin d’ajouter un titre au panel :

FormField::addPanel(‘Options Article’)->addCssClass(‘col-md-4’),

Regardons le résultat :

Les panels contenant les champs sont bien séparer maintenant ont va aligner tout sa.

Dans public/assets/

je crée un repertoire “backend”, ainsi qu’un fichier “form_article.css”

Ensuite nous devons appeler le fichier dans le crudcontroller.

Pour se faire nous avons besoin d’une function :

public function configureAssets(Assets $assets): Assets

{

return $assets

->addCssFile(‘/assets/css/backend/form_article.css’);

}

/!\ pas oublier d’importer :

use EasyCorp\Bundle\EasyAdminBundle\Config\Assets;

Maintenant dans le fichier form_article.css il faut mettre un peu de code CSS pour finalisé tout sa :

form#new-Article-form {

display: flex;

flex-wrap: wrap;

margin-right: -15px;

margin-left: -15px;

}

form#edit-Article-form {

display: flex;

flex-wrap: wrap;

margin-right: -15px;

margin-left: -15px;

}

Les changements seront effectuer sur les formulaires : new et edit

Et voila !!!!

Je reste disponible si vous avez des questions :

[embed]Développeur Web & Mobile à l'île de La Réunion | ethsam.fr Développeur à La Réunion. Je cultive une extrême polyvalence, je suis aussi technicien, administrateur réseau…ethsam.fr