> Symfony 6 > EasyAdmin! For an Awesomely Powerful Admin Area
Buy Access to Course
07.

Configuring Fields

Share this awesome video!

|

Open up the "Users" section. EasyAdmin has a concept of fields. A field controls how a property is displayed on the index and detail pages, but also how it renders inside of a form. So the field completely defines the property inside the admin. By default, EasyAdmin just... guesses which fields to include. But usually you'll want to control this. How? Via the configureFields() method in the CRUD controller.

In this case, open UserCrudController.php... and you can see that it already has a commented-out configureFields() method:

26 lines | src/Controller/Admin/UserCrudController.php
// ... lines 1 - 7
class UserCrudController extends AbstractCrudController
{
// ... lines 10 - 14
/*
public function configureFields(string $pageName): iterable
{
return [
IdField::new('id'),
TextField::new('title'),
TextEditorField::new('description'),
];
}
*/
}

Go ahead and uncomment that.

Notice that you can either return an array or an iterable. I usually return an iterable by saying yield Field::new() and passing the property name, like id:

21 lines | src/Controller/Admin/UserCrudController.php
// ... lines 1 - 6
use EasyCorp\Bundle\EasyAdminBundle\Field\Field;
class UserCrudController extends AbstractCrudController
{
// ... lines 11 - 15
public function configureFields(string $pageName): iterable
{
yield Field::new('id');
}
}

When I refresh... we have "ID" and nothing else.

Field Types

So EasyAdmin has many different types of fields, like text fields, boolean fields, and association fields... and it does its best to guess which type to use. In this case, you can't really see it, but when we said id, it guessed that this is an IdField. Instead of just saying Field::new() and letting it guess, I often prefer being explicit: IdField::new():

22 lines | src/Controller/Admin/UserCrudController.php
// ... lines 1 - 7
use EasyCorp\Bundle\EasyAdminBundle\Field\IdField;
class UserCrudController extends AbstractCrudController
{
// ... lines 12 - 16
public function configureFields(string $pageName): iterable
{
yield IdField::new('id');
}
}

Watch: when we refresh... that makes absolutely no difference! It was already guessing that this was an IdField.

Cool! So how do we figure out what all of the field types are? Documentation is the most obvious way. If you look on the web debug toolbar, there's a little EasyAdmin icon.

Tip

If you're using EasyAdmin 4.4.2 or later, you won't find an EasyAdmin icon on the Web Debug Toolbar. Instead, click on any link on the toolbar to get to the Profiler, then look for the "EasyAdmin" section near the bottom of the left sidebar.

Click into that... to see some basic info about the page... with a handy link to the documentation. Open that up. It has a "Field Types" section down a ways. Yup, there's your big list of all the different field types inside of EasyAdmin.

Or, if you want to go rogue, you find this directly in the source code. Check out vendor/easycorp/easyadmin-bundle/src/Field. Here is the directory that holds all the different possible field types.

Back in our CRUD controller, let's add a few more fields.

If you look in the User entity, you can see $id, $email, $roles, $password, $enabled, $firstName, $lastName, $avatar... and then a couple of association fields:

283 lines | src/Entity/User.php
// ... lines 1 - 15
class User implements UserInterface, PasswordAuthenticatedUserInterface
{
use TimestampableEntity;
#[ORM\Id]
#[ORM\GeneratedValue]
#[ORM\Column]
private ?int $id;
#[ORM\Column(length: 180, unique: true)]
private ?string $email;
#[ORM\Column(type: Types::JSON)]
private array $roles = [];
/**
* The hashed password
*/
#[ORM\Column]
private ?string $password;
/**
* The plain non-persisted password
*/
private ?string $plainPassword;
#[ORM\Column]
private bool $enabled = true;
#[ORM\Column]
private ?string $firstName;
#[ORM\Column]
private ?string $lastName;
#[ORM\Column(nullable: true)]
private ?string $avatar;
#[ORM\OneToMany('askedBy', Question::class)]
private Collection $questions;
#[ORM\OneToMany('answeredBy', Answer::class)]
private Collection $answers;
// ... lines 59 - 281
}

We won't need to manage all of these in the admin, but we will want most of them.

Add yield TextField::new('firstName')... repeat that for $lastName... and then for the $enabled field, let's yield BooleanField::new('enabled'). We also have a $createdAt field... so yield DateField::new('createdAt'):

30 lines | src/Controller/Admin/UserCrudController.php
// ... lines 1 - 6
use EasyCorp\Bundle\EasyAdminBundle\Field\BooleanField;
use EasyCorp\Bundle\EasyAdminBundle\Field\DateField;
// ... lines 9 - 10
use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
class UserCrudController extends AbstractCrudController
{
// ... lines 15 - 19
public function configureFields(string $pageName): iterable
{
// ... line 22
yield TextField::new('email');
yield TextField::new('firstName');
yield TextField::new('lastName');
yield BooleanField::new('enabled');
yield DateField::new('createdAt');
}
}

So I'm just listing the same properties that we see in the entity. Well, we don't see $createdAt... but that's only because it lives inside of the TimestampableEntity trait:

283 lines | src/Entity/User.php
// ... lines 1 - 9
use Gedmo\Timestampable\Traits\TimestampableEntity;
// ... lines 11 - 15
class User implements UserInterface, PasswordAuthenticatedUserInterface
{
use TimestampableEntity;
// ... lines 19 - 281
}

Anyways, with just this config, if we move over and refresh... beautiful! The text fields render normal text, the DateField knows how to print dates and the BooleanField gives us this nice little switch!

Using "Pseudo Properties"

As a challenge, instead of rendering "First Name" and "Last Name" columns, could we combine them into a single "Full Name" field? Let's try it!

I'll say yield TextField::new('fullName'):

29 lines | src/Controller/Admin/UserCrudController.php
// ... lines 1 - 12
class UserCrudController extends AbstractCrudController
{
// ... lines 15 - 19
public function configureFields(string $pageName): iterable
{
// ... lines 22 - 23
yield TextField::new('fullName');
// ... lines 25 - 26
}
}

This is not a real property. If you open User, there is no $fullName property. But, I do have a getFullName() method:

283 lines | src/Entity/User.php
// ... lines 1 - 15
class User implements UserInterface, PasswordAuthenticatedUserInterface
{
// ... lines 18 - 194
public function getFullName(): ?string
{
return $this->firstName.' '.$this->lastName;
}
// ... lines 199 - 281
}

So the question is: is it smart enough - because the field is called fullName - to call the getFullName() method?

Let's find out. I bet you can guess the answer. Yup! That works!

Behind the scenes, EasyAdmin uses the PropertyAccess Component from Symfony. It's the same component that's used inside of the form system... and it's really good at reading properties by leveraging their getter method.

Field Options

Back in configureFields(), I forgot to add an "email" field. So, yield TextField::new('email'):

29 lines | src/Controller/Admin/UserCrudController.php
// ... lines 1 - 12
class UserCrudController extends AbstractCrudController
{
// ... lines 15 - 19
public function configureFields(string $pageName): iterable
{
// ... line 22
yield TextField::new('email');
// ... lines 24 - 26
}
}

And... no surprise, it renders correctly. But, this is a case where there's actually a more specific field for this: EmailField:

30 lines | src/Controller/Admin/UserCrudController.php
// ... lines 1 - 13
class UserCrudController extends AbstractCrudController
{
// ... lines 16 - 20
public function configureFields(string $pageName): iterable
{
// ... line 23
yield EmailField::new('email');
// ... lines 25 - 27
}
}

The only difference is that it renders with a link to the email. And, when you look at the form, it will now be rendering as an <input type="email">.

The real power of fields is that each has a ton of options. Some field options are shared by all field types. For example, you can call ->addCssClass() on any field to add a CSS class to it. That's super handy. But other options are specific to the field type itself. For example, BooleanField has a ->renderAsSwitch() method... and we can pass this false:

31 lines | src/Controller/Admin/UserCrudController.php
// ... lines 1 - 13
class UserCrudController extends AbstractCrudController
{
// ... lines 16 - 20
public function configureFields(string $pageName): iterable
{
// ... lines 23 - 25
yield BooleanField::new('enabled')
->renderAsSwitch(false);
// ... line 28
}
}

Now, instead of rendering this cute switch, it just says "YES". This... is probably a good idea anyways... because it was a bit too easy to accidentally disable a user before this.

So... this is great! We can control which fields are displayed and we know that there are methods we can call on each field object to configure its behavior. But remember, fields control both how things are rendered on the index and detail pages and how they're rendered on the form. Right now, if we go to the form... yup! That's what I expected: these are the five fields that we've configured.

It's not perfect, though. I do like having an "ID" column on my index page, but I do not like having an "ID" field in my form.

So next, let's learn how to only show certain fields on certain pages. We'll also learn a few more tricks for configuring them.