Buy Access to Course
06.

More about List Field Types

Share this awesome video!

|

Keep on Learning!

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Navigate to the User entity section... open up the EasyAdminBundle profiler... and check out the list fields.

I want to talk a bit more about these field "data types". Check out isScientist. Its data type is set to toggle, my favorite type! Go back to the main page of the documentation and open List, Search and Show Views Configuration.

List Field Types and Options

Down the page a little, it talks about how to "Customize the Properties Appearance". This is great stuff. First, it lists the valid options for all the fields, like property, label, css_class, template - which we'll talk about later - and yes! The type, which controls that dataType config. There are a bunch of built-in types, including all of the Doctrine field types and a few special fancy ones from EasyAdminBundle, like toggle. The "toggle" type is actually super cool: it renders the field as a little switch that turns the value on and off via AJAX.

Changing to the boolean data type

Let's take control of the User fields. Below that entity, add list, then fields, with id and email:

130 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 89
entities:
// ... lines 91 - 119
User:
// ... line 121
list:
fields:
- id
- email
// ... lines 126 - 130

Let's customize isScientist and set its label to Is scientist?. And as cool as the toggle field is, for the great sake of learning, change it to boolean:

130 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 89
entities:
// ... lines 91 - 119
User:
// ... line 121
list:
fields:
- id
- email
- { property: 'isScientist', label: 'Is scientist?', type: 'boolean' }
// ... lines 127 - 130

Then add, firstName, lastName, and avatarUri:

130 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 89
entities:
// ... lines 91 - 119
User:
// ... line 121
list:
fields:
- id
- email
- { property: 'isScientist', label: 'Is scientist?', type: 'boolean' }
- firstName
- lastName
- avatarUri

Try that! Ok! The isScientist field is now a "less-cool" Yes/No label. Open up the EasyAdminBundle config to see the difference. Under list... fields... isScientist, yep! dataType is now boolean... and it's using a different template to render it. More on that later.

Virtual Fields

Back in the config, obviously, these are all property names on the User entity. But... that's not required. As long as there is a "getter" method, you can invent new, "virtual" fields. Our User does not have a fullName property... but it does have a getFullName() method. So, check this out: remove firstName and lastName and replace it with fullName:

129 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 89
entities:
// ... lines 91 - 119
User:
// ... line 121
list:
fields:
// ... lines 124 - 126
- fullName
// ... lines 128 - 129

Try that out! Magic!

The email and url Fields

As we saw earlier, EasyAdminBundle also has a few special types. For example, expand the email property and set its type to email:

129 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 89
entities:
// ... lines 91 - 119
User:
// ... line 121
list:
fields:
// ... line 124
- { property: 'email', type: 'email' }
// ... lines 126 - 129

While we're here, do the same for avatarUri, setting it to url:

129 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 89
entities:
// ... lines 91 - 119
User:
// ... line 121
list:
fields:
// ... line 124
- { property: 'email', type: 'email' }
// ... lines 126 - 127
- { property: 'avatarUri', type: 'url' }

Try that! I know, it's not earth-shattering, but it is nice: the email is now a mailto link and the avatarUri is a link to open in a new tab.

The image Type

Of course, avatarUri is an image... so it would be way trendier to... ya know... actually render an image! Yea! But let's do it somewhere else: go to the GenusNote section. Then, in config.yml, under the entity's list key - add fields. Let's show id and username:

135 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 89
entities:
// ... lines 91 - 109
GenusNote:
// ... lines 111 - 112
list:
// ... line 114
fields:
- id
- username
// ... lines 118 - 135

One of the fields is called the userAvatarFileName, which is a simple text field that stores an image filename, like leanna.jpeg or ryan.jpeg. I want that to show up as an image thumbnail. To do that, add property: userAvatarFilename, label: User avatar and... type: image:

135 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 89
entities:
// ... lines 91 - 109
GenusNote:
// ... lines 111 - 112
list:
// ... line 114
fields:
- id
- username
- { property: 'userAvatarFilename', label: 'User avatar', type: 'image' }
// ... lines 119 - 135

Before we try that, also add createdAt and genus:

135 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 89
entities:
// ... lines 91 - 109
GenusNote:
// ... lines 111 - 112
list:
// ... line 114
fields:
- id
- username
- { property: 'userAvatarFilename', label: 'User avatar', type: 'image' }
- createdAt
- genus
// ... lines 121 - 135

Actually, genus is the property that points to the related Genus object, which is pretty cool:

121 lines | src/AppBundle/Entity/GenusNote.php
// ... lines 1 - 10
class GenusNote
{
// ... lines 13 - 43
/**
* @ORM\ManyToOne(targetEntity="Genus", inversedBy="notes")
* @ORM\JoinColumn(nullable=false)
*/
private $genus;
// ... lines 49 - 100
public function getGenus()
{
return $this->genus;
}
public function setGenus(Genus $genus)
{
$this->genus = $genus;
}
// ... lines 110 - 119
}

That will totally work because our Genus class has a __toString() method:

243 lines | src/AppBundle/Entity/Genus.php
// ... lines 1 - 17
class Genus
{
// ... lines 20 - 237
public function __toString()
{
return (string) $this->getName();
}
}

Refresh! Ok, it kinda works... there is an image tag! Yea... it's broken, but let's try to be positive! Right click to open that in a new tab. Ah, it's look for the image at http://localhost:8000/leanna.jpeg. In our simple system, those images are actually stored in a web/images directory. In a more complex app, you might store them in an uploads/ directory or - even better - up on something like S3. But no matter where you store your images, you'll need to configure this field to point to the right path.

How? Via a special option on the image type: base_path set to /images/:

135 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 89
entities:
// ... lines 91 - 109
GenusNote:
// ... lines 111 - 112
list:
// ... line 114
fields:
// ... lines 116 - 117
- { property: 'userAvatarFilename', label: 'User avatar', type: 'image', base_path: '/images/' }
// ... lines 119 - 135

You can of course also use an absolute URL.

Try it! There it is! And it's even got a fancy lightbox.

Next up, let's finish talking about the list view by taking crazy control of filtering and ordering.