This tutorial has a new version, check it out!
> Symfony 3 > EasyAdminBundle v1 for an Amazing Admin Interface
Login to bookmark this video
Buy Access to Course
22.

Dashboard & Menu Customizations

Share this awesome video!

|

Keep on Learning!

Start your All-Access Pass

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

Login Subscribe

The only thing we have not talked about is this big, giant menu on the left! This menu is actually the key to one other commonly-asked question: how do I create an admin dashboard?

The answer... like always... lives in the configuration! In config.yml, under design, add a menu key:

177 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... line 82
design:
// ... lines 84 - 94
menu:
// ... lines 96 - 177

This works like many other config keys. First, it has a simple format: just list the sections in the order you want them: User, Genus, GenusHorde and SubFamily:

177 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... line 82
design:
// ... lines 84 - 94
menu:
- User
- Genus
- GenusHorde
- GenusNote
- SubFamily
// ... lines 101 - 177

These keys are coming from the keys that we chose for each section's configuration:

177 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... lines 82 - 104
entities:
Genus:
// ... lines 107 - 174
GenusHorde:
// ... lines 176 - 177

These could have been anything.

Thanks to this, the User link will move from the bottom all the way to the top. There are a lot of other customizations you can make to the menu... but before we get there, I want a dashboard! Yea know, an admin homepage full of important-looking graphs!

Adding a Dashboard

If you downloaded the course code, you should have a tutorial/ directory. Inside, it has an AdminController with a dashboardAction(). Copy that. Then, in src/AppBundle/Controller/EasyAdmin, open our AdminController and paste it there:

31 lines | src/AppBundle/Controller/EasyAdmin/AdminController.php
// ... lines 1 - 8
class AdminController extends BaseAdminController
{
// ... lines 11 - 15
/**
* @Route("/dashboard", name="admin_dashboard")
*/
public function dashboardAction()
{
$em = $this->getDoctrine()->getManager();
$genusRepository = $em->getRepository(Genus::class);
return $this->render('easy_admin/dashboard.html.twig', [
'genusCount' => $genusRepository->getGenusCount(),
'publishedGenusCount' => $genusRepository->getPublishedGenusCount(),
'randomGenus' => $genusRepository->findRandomGenus()
]);
}
}

Thanks to the prefix on the route import:

14 lines | app/config/routing.yml
// ... lines 1 - 9
easy_admin_bundle:
// ... lines 11 - 12
prefix: /easyadmin

This creates a new /easyadmin/dashboard route named admin_dashboard. Oh, I'm missing my use statement for @Route. I'll re-type that and hit enter so that it auto-completes the use statement on top:

31 lines | src/AppBundle/Controller/EasyAdmin/AdminController.php
// ... lines 1 - 6
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
class AdminController extends BaseAdminController
{
// ... lines 11 - 15
/**
* @Route("/dashboard", name="admin_dashboard")
*/
public function dashboardAction()
{
// ... lines 21 - 28
}
}

Perfect!

This renders a template, which I will also grab from the tutorial/ directory. Paste that in app/Resources/views/easy_admin:

84 lines | app/Resources/views/easy_admin/dashboard.html.twig
{% extends '@EasyAdmin/default/layout.html.twig' %}
{% set _content_title = 'Admin dashboard' %}
{% block page_title -%}
{{ _content_title }}
{%- endblock %}
{% block content_header %}
<h1 class="title">{{ _content_title }}</h1>
{% endblock %}
{% block main %}
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Stats</h3>
</div>
<div class="panel-body">
<ul class="list-group" style="margin-left: 0;">
<li class="list-group-item">
<span class="badge">{{ genusCount }}</span>
Genus count
</li>
<li class="list-group-item">
<span class="badge">{{ publishedGenusCount }}</span>
Published genus count
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Chart</h3>
</div>
<div class="panel-body">
<script type="text/javascript"
src="https://ssl.gstatic.com/trends_nrtr/1015_RC10/embed_loader.js"></script>
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {
"comparisonItem": [{
"keyword": "funny cat videos",
"geo": "",
"time": "2012-05-17 2017-05-17"
}], "category": 0, "property": ""
}, {
"exploreQuery": "q=funny%20cat%20videos",
"guestPath": "https://trends.google.com:443/trends/embed/"
});
</script>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ randomGenus.name }}</h3>
</div>
<div class="panel-body">
<p>
<img src="{{ asset('images/octopus-rubescens.jpg') }}" />
</p>
<p>{{ randomGenus.funFact }}</p>
<a href="{{ path('easyadmin', {entity: 'Genus', action: 'show', id: randomGenus.id}) }}"
class="btn btn-primary">
Show details
</a>
</div>
</div>
</div>
</div>
{% endblock %}

At this point... the page should work. Cool... but how can I tell EasyAdminBundle to show this page when we go to the admin section's homepage? Right now, if you go directly to /easyadmin, it will take you to whatever the first-defined entity section is... so Genus.

But... add a new menu item and use the expanded config format with label: Dashboard, route: admin_dashboard and - here is the key - default: true:

178 lines | app/config/config.yml
// ... lines 1 - 80
easy_admin:
// ... line 82
design:
// ... lines 84 - 94
menu:
- { label: 'Dashboard', route: 'admin_dashboard', default: true }
// ... lines 97 - 178

Thanks to default: true, when you click on the AquaNote logo to go to the admin homepage... ah! You'll get an error! That was not the dramatic success moment I was hoping for.

But... look! It did redirect to /easyadmin/dashboard! The error is just a Ryan mistake: I forgot a use statement for my Genus class. Add that on top:

31 lines | src/AppBundle/Controller/EasyAdmin/AdminController.php
// ... lines 1 - 4
use AppBundle\Entity\Genus;
// ... lines 6 - 8
class AdminController extends BaseAdminController
{
// ... lines 11 - 18
public function dashboardAction()
{
// ... line 21
$genusRepository = $em->getRepository(Genus::class);
// ... lines 23 - 28
}
}

Try it again! Hello super fancy dashboard! Where apparently, somehow, interest in funny cat videos has been decreasing. Well, anyways, say hello to your new dashboard. Where hopefully, you will build infinitely more useful graphs than this.

Now, back to customizing that menu...