Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
TRACK

Symfony 3 >

COURSE

EasyAdminBundle v1 for an Amazing Admin Interface

Buy Access to Course
This tutorial has a new version, check it out!

More about List Field Types

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $8.00
Previous Chapter

Next Chapter
Edit on GitHub

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.

Leave a comment!

Most Useful Newest Oldest
4
Login or Register to join the conversation
Rainer-S Avatar
Rainer-S Avatar Rainer-S | posted 2 years ago

I have a special question does an easy solution exist to add the value "Is scientist?" in different languages (e.g. English, French...) in the config.yml

- { property: 'isScientist', label: 'Is scientist?', type: 'boolean' }

Reply
Victor Avatar

Hey Sven,

Yes, form labels are translated by Symfony by default, so you just need to use a translation key for the label instead. And as far as your translation key is translated into different languages - you will see the translation to the current language instead of the translation key. In other words, try to replace that label with a translation key, something like "form_label.is_scientist" and translate this key to different languages you're using in your application.

Cheers!

Reply
Andrzej S. Avatar
Andrzej S. Avatar Andrzej S. | posted 5 years ago

How I can add sortting to virtual field?

Reply
weaverryan Avatar

Hi Andrzej S.!

Unfortunately, this is not possible :/. https://github.com/javiereg... It makes sense, as EasyAdminBundle wouldn't know how to sort it, but in theory, it certainly *could* work by requiring you to pass in some DQL to execute for the sorting. But, it's not a feature currently. This is a case where the EasyAdminBundle is easy, but cannot to everything :/.

Cheers!

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

This tutorial is built on an older version of Symfony & EasyAdminBundle. Many of the concepts are the same, but you can expect major differences in newer versions.
Symfony 3 EasyAdminBundle 1

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=5.5.9",
        "symfony/symfony": "3.3.*", // v3.3.18
        "doctrine/orm": "^2.5", // v2.7.2
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.5
        "symfony/swiftmailer-bundle": "^2.3", // v2.6.7
        "symfony/monolog-bundle": "^2.8", // v2.12.1
        "symfony/polyfill-apcu": "^1.0", // v1.17.0
        "sensio/distribution-bundle": "^5.0", // v5.0.25
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.29
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.4
        "knplabs/knp-markdown-bundle": "^1.4", // 1.7.1
        "doctrine/doctrine-migrations-bundle": "^1.1", // v1.3.2
        "stof/doctrine-extensions-bundle": "^1.2", // v1.3.0
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "javiereguiluz/easyadmin-bundle": "^1.16" // v1.17.21
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.7
        "symfony/phpunit-bridge": "^3.0", // v3.4.40
        "nelmio/alice": "^2.1", // v2.3.5
        "doctrine/doctrine-fixtures-bundle": "^2.3" // v2.4.1
    }
}
Edit on GitHub
Previous Chapter
Next Chapter
userVoice