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

21.

Custom Stimulus JavaScript Controller

|

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

14 Comments

Sort By

Login or Register to join the conversation

Jony-T 3 years ago edited

If does not work for anyone under symfony6 add to the DashboardController

    public function configureAssets(): Assets
    {
        return parent::configureAssets()
            ->addWebpackEncoreEntry('admin');
    }

1 |

Victor SFCASTS Jony-T 3 years ago

Hey Jony,

Thanks for this hint! Yeah, you should have this to make it work... we did it in previous chapters: https://symfonycasts.com/screencast/easyadminbundle/assets#codeblock-9cb529831f - so if you follow this course from the beginning - you should have this.

Cheers!

1 |

Jony-T Victor 3 years ago edited

Yes, Victor.
In my case was that I called the CSS with another name than admin so: If you follow the tutorial there is no problem when admin.js include the admin.css due to the name being the same in the ->addWebpackEncoreEntry('admin'); but in my case, I called adminstyles so I had ->addWebpackEncoreEntry('adminstyles'); .
When I created an admin.js that includes adminstyles.css in the tutorial we updated the webpack.config.js but no reference to taking care of the configureAsset() method of DashboardController, obviously because it is the same name.

So the advice here is: "if you are taking a look at a tutorial, follow the tutorial! " XDD.

|

Victor SFCASTS Jony-T 3 years ago

Hey Jony,

Ah, I see! Yes... that's a good practice to name the JS and CSS files with the same exact name :) I think it's enough, because you have the file extension anyway, so it's clear that admin.css file is for "styles" for admin.js :)

Cheers!

|

Courtney-T 2 years ago edited

What is the best way to render data in real time? I want to show in a field the subtotal price of items that are selected in another collection field.

            yield CollectionField::new('SaleLineItems')
                ->setEntryType(QuantityType::class)
                ->setFormTypeOptions([
                    'by_reference' => false,
                    'attr' => [
                        'data-subtotal-target' => 'subtotal',
                    ],
                ])
                ->setColumns(12);
            yield TextField::new('invoiceTotal')
                ->hideOnIndex()
                ->setFormTypeOption(
                    'disabled',
                    true
                )
                ->setFormTypeOptions([
                    'row_attr' => [
                        'data-controller' => 'subtotal_controller',
                    ],
                    'attr' => [
                        'data-action' => 'subtotal#render',
                    ],
                ]);

The controller:

import { Controller } from '@hotwired/stimulus';
const document = window.document;

/*
 * This is an example Stimulus controller!
 *
 * Any element with a data-controller="hello" attribute will cause
 * this controller to be executed. The name "hello" comes from the filename:
 * hello_controller.js -> "hello"
 *
 * Delete this file or adapt it for your use!
 */
export default class extends Controller {
    static targets = ['subtotal'];
    outputElement = null;

    initialize() {
        this.outputElement = document.createElement('div');
        this.outputElement.className = 'subtotal';
        this.outputElement.textContent = 'Subtotal:';
        this.element.append(this.outputElement);
    }
    connect() {
        this.render();
    }
    render() {

        lineItems = document.getElementById("Sale_SaleLineItems");
        items = this.lineItems.getElementsByClassName("item").textContent;
        subtotal = 0;
        prices = [];
        this.items.array.forEach(element => {
            price = element.split('$');
            prices.push(price[1]);
        });
        this.subtotal = prices.reduce((accumulator, currentValue) => {
            return accumulator + currentValue
        },0);
        this.outputElement.innerHTML = subtotal;    
    }
}

|

weaverryan SFCASTS Courtney-T 2 years ago

Hey @Courtney-T!

Sorry for the slow reply! You've got the general approach that I would use: a Stimulus controller that responds when those fields changes, and does the calculation. Is this working? The only notes I'd have are:

A) If calculating client-side is good enough, awesome. Otherwise, you can always send the data back to an Ajax endpoint.
B) Some of the JavaScript to fetch the data looks a bit complex - as you probably now. Like, grabbing the item class elements, then textContent on them (does that work? getElementsByClassName returns a collection). I'm not sure if there's an easier way to do it - it depends on what the fields look like (are these option elements)? I would normally recommend perhaps adding some extra data attributes to the elements to help with this - e.g. a data-price with the actual price, so you don't need to parse the text - but adding extra attributes to option elements is not something the form theming system is built to do easily, I believe.

So, in short, while it's a bit ugly, I think you're on the right track here.

Cheers!

|

Coding010 3 years ago

Hello, I have a question if it's possible setting a data-controller attribute to a panel in stead of a field. To create a controller surrounding multiple forms at the same time. I'm not able to get this working.

The following code works to add an extra class value to the panel:

yield FormField::addPanel('User Details')->addCssClass('foobar');

But the following code doesn't do anything:

yield FormField::addPanel('User Details')->setFormTypeOptions([
    'row_attr' => [
        'data-controller' => 'foo',
    ]
]);

The goal is to group a couple of fields and create a single controller. Then adding the fields as a target.

Best regards

|

Victor SFCASTS Coding010 3 years ago

Hey Coding010,

Yeah, setFormTypeOptions() won't work for that addPanel() because in the source code EA just does not render any additional things like this. There's another method called setCssClass() but it will help to set a CSS class to that whole panel wrapper and that's it. But if you want to add some data attributes - I think you should override a template for this, in specific vendor/easycorp/easyadmin-bundle/src/Resources/views/crud/form_theme.html.twig one - you will find a <div class="form-panel"> tag there, add your data controller there.

I hope this helps!

Cheers!

|

Coding010 Victor 3 years ago

Hi Victor, thanks for your reply.

I browsed around a bit on EasyAdmin's Github page and found this newly added feature:
https://github.com/EasyCorp/EasyAdminBundle/pull/5488.
It was added in Easy Admin 4.4.3.

This helped me out, as now I can set a Stimulus controller data attribute on the <body> element of a crud.
It's not specifically around a group of field as I first wanted, but this should do the trick.

Here a quick code example:

Override the templates via the CrudController.

// src/Controller/Admin/Crud/FooCrudController.php

public function configureCrud(Crud $crud): Crud
{
    return $crud
         ->overrideTemplates([
            'crud/new' => 'admin/crud/new.html.twig',
            'crud/edit' => 'admin/crud/edit.html.twig',
        ])
    ;
}

Note that 'crud/layout' doesn't work, even though the examples on the Symfony documentation page say it should.

And then create the template to override:

{# templates/admin/crud/new.html.twig #}

{% extends '@EasyAdmin/crud/new.html.twig' %}

{% block body_attr %}
  {{ stimulus_controller('admin/foo') }}
{% endblock body_attr %}

This adds the data-controller attribute to the body.

<body data-controller="admin--foo"> 
 ...

Hope this helps out others with this "problem" as well.

|

Sergey-P 3 years ago

Hello! If I start a stimulus application, this way

public function configureAssets(Assets $assets): Assets
 {
     return parent::configureAssets($assets)->addWebpackEncoreEntry('app');
 }

or this way

{{ encore_entry_script_tags('admin') }}

then actions menu(3 dorts) stops working. It doesn't expand if i click it.

|

Sergey-P Sergey-P 3 years ago edited

I found the problem it's related to the bootstrap import
import { Modal } from 'bootstrap';

|

weaverryan SFCASTS Sergey-P 3 years ago

Oh yea, that pesky thing! Good job debugging that!

|

julien_bonnier 4 years ago

I know it is out of scope, but what if we do not want admin related (stimulus) controllers to load at all on non-admin pages? Let's say someone manipulate the DOM.

|

sadikoff julien_bonnier 4 years ago edited

Hey julien_bonnier

Great question. I had the same when developed some internal stuff. And there is pretty easy question. IIRC Stimulus controller loader is configured in assets/bootstrap.js so you can duplicate it and configure to load a separate folder for admin, so you will have everything separated.

Cheers!

1 |

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