Chapters

40 Chapters | 4:19:16 |

01

Installing EasyAdmin

3:29
02

Admin Dashboard

7:31
03

Hello CRUD Controller

6:04
04

Global vs CRUD-Specific Configuration

9:13
05

Controlling the Dashboard Menu

5:55
06

Assets: Custom CSS and JS

8:17
07

Configuring Fields

7:01
08

Fields on some Pages, not Others

3:43
09

Deep Field Configuration

7:54
10

Upload Fields

7:21
11

Controlling the "Formatted Value"

4:23
12

The AssociationField

8:02
13

Auto-complete Association Field & Controlling the Query

5:36
14

AssociationField for a "Many" Collection

6:28
15

The Field Configurator System

7:23
16

Field Configurator Logic

8:32
17

Overriding Field Templates

6:04
18

Creating a Custom Field

5:27
19

configureCrud()

5:38
20

Custom Field JavaScript

5:23
21

Custom Stimulus JavaScript Controller

6:20
22

The Dashboard Page

6:54
23

Service Action Injection

3:14
24

Override all the Templates!

6:47
25

Permissions

6:35
26

Restricting Access to an Entire Crud Section

2:55
27

Entity & Field Permissions

5:39
28

Security Voter & Entity Permissions

8:36
29

The Filter System

6:40
30

Multiple Cruds for a Single Entity?

7:32
31

Extending with Events

8:03
32

Having Fun with the Menu

3:25
33

Conditionally Disabling an Action

8:37
34

Dynamic Disable an Action & AdminContext

10:40
35

Simple Custom GET Action

4:56
36

True Custom Action

5:19
37

Custom Controller & Generating Admin URLs

5:43
38

A Global "Export" Action

10:13
39

Linking to EasyAdmin from Twig

5:01
40

Form Panels

6:41

> Symfony > EasyAdmin! For an Awesomely Powerful Admin Area

Buy Access to Course

20.

Custom Field JavaScript

|

Autoplay

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 $12.00

Previous Chapter

Next Chapter

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

Login Subscribe

Login or register to check out the script

10 Comments

Sort By

Login or Register to join the conversation

ahmedbhs 2 years ago

This Stimulus controller will affect all the views. Is there a way to load it only in the edit and new views?

|

MolloKhan SFCASTS ahmedbhs 2 years ago edited

Yes, you can activate lazy loading on your Stimulus controllers by adding this annotation on top of the controller's definition

/* stimulusFetch: 'lazy' */
export default class extends Controller {

It's a Symfony UX feature, so you need to install that component on your app

Cheers!

|

mofogasy 4 years ago edited

Hi, does anyone knows why I cannot get bootstrap features to work?
Things like <a href="https://getbootstrap.com/docs/4.0/components/carousel/"> carousel</a> (no sliding) <a href="https://getbootstrap.com/docs/4.0/components/dropdowns/">dropdown</a> (no dropdown)
don't work in the base.html.twig ?

isn't the {{ encore_entry_script_tags('app') }} in that file supposed to add bootstrapt link since app.js already import bootstrap ?

|

weaverryan SFCASTS mofogasy 4 years ago

Hey grenouille!

> isn't the {{ encore_entry_script_tags('app') }} in that file supposed to add bootstrapt link since app.js already import bootstrap ?

In theory, yes. But EasyAdmin also has its own Bootstrap JavaScript. What do you want to accomplish? And what does your app.js look like exactly?

Cheers!

|

JasonG 4 years ago

Hello,
I noticed an issue that occurs when my javascript assets require bootstrap. For example, if I import 'bootstrap' (Twitter Bootstrap, not the stimulus bootstrap file) in 'admin.js', then the dropdown actions (such as the avatar in the top right, or the 3 dots at the end of the row on the index page) stop working.

I made sure that my project required the exact same version of Bootstrap as EasyAdmin. Could anyone shine some light onto what the issue could be?

thanks,
Colin

|

Victor SFCASTS JasonG 4 years ago

Hey Colin,

I can't say for sure... but I would like to know why do you include bootstrap to your admin? Well, first of all, EasyAdmin already has bootstrap included, it's based on the latest bootstrap. So, you probably don't want to include your own one, even if you're including the same version, because it will cause some conflicts. Well, maybe not conflicts, but duplications for sure, as both CSS files will apply same rules twice.

But, if you curious to know the reason it breaks sometimes - then, in theory, it's because that EasyAdmin is based on bootstrap but also slightly modifies it. And so, the workflow when you include your own bootstrap is the next probably:

1. EasyAdmin includes bootstrap
2. EasyAdmin slightly modifies bootstrap for its needs
3. You include the bootstrap again, that overrides some rules that were overwritten by EasyAdmin

Well, sometimes like this, I can't think of anything else. Or, it might be so that you're including a bit different version of bootstrap that causes those issues. But in theory, if EA already has bootstrap (and it does have it) - you better don't include it again and just reuse the bootstrap EasyAdmin uses behind the scene.

I hope this helps.

Cheers!

|

edin Victor 4 years ago

Just for future reference, EA includes a global bootstrap var that can be used: https://github.com/EasyCorp...

There is no need to import bootstrap

1 |

Victor SFCASTS edin 4 years ago

Hey Edin,

Nice, thanks for sharing this!

Cheers!

|

JasonG Victor 4 years ago edited

Hey Victor,

I agree, there isn't a reason to include bootstrap again. I just noticed that the dropdowns stopped working after I showed another developer how to include custom webpack entries, and narrowed the cause of the error to importing bootstrap in our custom javascript we were adding to EasyAdmin.

For instance in our custom javascript we had:


import { Modal } from 'bootstrap';

which caused the error.

Probably from the beginning this should have been:


import { Modal } from 'bootstrap/js/dist/modal';

which works fine.

The theory of the EasyAdmin bootstrap modifications makes sense, I didn't think to check that out, so thank you for pointing that out.

Thanks for the help,
Colin

|

Victor SFCASTS JasonG 4 years ago

Hey Colin,

Ah, I see! So, it's good you thought about why it happened 👍. Yeah, not sure about how to import that Modal correctly, probably Bootstrap docs should cover, just look closer to the version of Bootstrap, they have a bit different docs for different version of it. But if it works with "bootstrap/js/dist/modal" path - great, thanks for sharing it!

Yeah, EasyAdmin have some tweaks to the bootstrap defaults... just to look less "bootstrappy" and be more unique, you know.

Anyway, I hope it helped!

Cheers!

|

This tutorial is built on Symfony 6 but works great on Symfony 7!

EasyAdmin 4 Symfony 6

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "^1.11", // 1.11.99.4
        "doctrine/doctrine-bundle": "^2.1", // 2.5.5
        "doctrine/doctrine-migrations-bundle": "^3.0", // 3.2.1
        "doctrine/orm": "^2.7", // 2.10.4
        "easycorp/easyadmin-bundle": "^4.0", // v4.0.2
        "handcraftedinthealps/goodby-csv": "^1.4", // 1.4.0
        "knplabs/knp-markdown-bundle": "dev-symfony6", // dev-symfony6
        "knplabs/knp-time-bundle": "^1.11", // 1.17.0
        "sensio/framework-extra-bundle": "^6.0", // v6.2.5
        "stof/doctrine-extensions-bundle": "^1.4", // v1.7.0
        "symfony/asset": "6.0.*", // v6.0.1
        "symfony/console": "6.0.*", // v6.0.2
        "symfony/dotenv": "6.0.*", // v6.0.2
        "symfony/flex": "^2.0.0", // v2.4.5
        "symfony/framework-bundle": "6.0.*", // v6.0.2
        "symfony/mime": "6.0.*", // v6.0.2
        "symfony/monolog-bundle": "^3.0", // v3.7.1
        "symfony/runtime": "6.0.*", // v6.0.0
        "symfony/security-bundle": "6.0.*", // v6.0.2
        "symfony/stopwatch": "6.0.*", // v6.0.0
        "symfony/twig-bundle": "6.0.*", // v6.0.1
        "symfony/ux-chartjs": "^2.0", // v2.0.1
        "symfony/webpack-encore-bundle": "^1.7", // v1.13.2
        "symfony/yaml": "6.0.*", // v6.0.2
        "twig/extra-bundle": "^2.12|^3.0", // v3.3.7
        "twig/twig": "^2.12|^3.0" // v3.3.7
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.3", // 3.4.1
        "symfony/debug-bundle": "6.0.*", // v6.0.2
        "symfony/maker-bundle": "^1.15", // v1.36.4
        "symfony/var-dumper": "6.0.*", // v6.0.2
        "symfony/web-profiler-bundle": "6.0.*", // v6.0.2
        "zenstruck/foundry": "^1.1" // v1.16.0
    }
}

Previous Chapter

Next Chapter