How often have you looked at the dashboard inside Mautic and thought - I wish there was more I can do here.
Surge.Media went ahead and took on this task to create something amazing!!
When we began the exploration, we had a number of ideas:
- Find out how to redirect the “after-login” to another page with iFrame embedded.
- Trying to create a json file (which is what the dashboard uses)
- Hiding the Dashboard menu item and adding a new menu item.
So we played around with these few ideas:
We were able to hide the dashboard menu item, but still were not able to redirect to a different page.
We tried to create a json file where we were calling an iframe, but this did not work for us.
Eventually we went into the code and modified the dashboard part to do what we wanted.
We use Metabase as our choice of a BI system. This tool provides the ability to create an external link that can be embedded into a page and pull information from the original source.
In order to do this we created a dashboard inside Metabase for our instance and exported this.
We then went into the Mautic code and did the following:
- Go to the following directory: app/bundles/DashboardBundle/Views/Dashboard
- Make a copy of the file index.html.php to index.html.php.orig (this way you will have a backup of the original view if ever you want to role back, or mess something up)
- Edit the original file index.html.php
- Delete all the content from rows 15 downwards
You should be left with only the following:
<?php
/*
* @copyright 2014 Mautic Contributors. All rights reserved
* @author Mautic
*
* @link http://mautic.org
*
* @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
*/
$view->extend('MauticCoreBundle:Default:content.html.php');
$view['slots']->set('headerTitle', $view['translator']->trans('mautic.dashboard.header.index'));
$view['slots']->set('mauticContent', 'dashboard');
Next you go ahead and embed the BI code here, which will look like this:
?>
<style>
.iframe-container {
overflow: hidden;
padding-top: 100%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}</style>
<div class="iframe-container"><iframe loading="lazy" src="https://your.bi.domain/link"></iframe></div>
You will now have a super useful and fully customizable dashboard according to your needs and requirements.
Any questions, please feel free to ask.
