Buy

Dashboard & Menu Customizations

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:

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

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:

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

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

227 lines app/config/config.yml
... lines 1 - 80
easy_admin:
... lines 82 - 104
entities:
Genus:
... lines 107 - 174
GenusHorde:
... lines 176 - 183
GenusNote:
... lines 185 - 195
SubFamily:
... lines 197 - 200
User:
... lines 202 - 227

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:

228 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 - 228

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...

Leave a comment!