Surge Mautic Dashboard into something Amazing!

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

surge-post-dashboard-1000x1000

When we began the exploration, we had a number of ideas:

  1. Find out how to redirect the “after-login” to another page with iFrame embedded.
  2. Trying to create a json file (which is what the dashboard uses)
  3. 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:

  1. Go to the following directory: app/bundles/DashboardBundle/Views/Dashboard
  2. 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)
  3. Edit the original file index.html.php
  4. 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.

5 Likes

Nicely done, @mikew and Surge.Media. This looks great. Thanks for the tips!

2 Likes

Thanks @ericgr .

Hello @mikew,

Do you think you can make it a “Mautic/Metabase” plugin and propose it as PR on Github?

Pierre

I do not think there is a need for a plugin. It is a nice hack that really provides a huge surge to the current dashboard.

1 Like

Hello @mikew,

It’s a bad things because as a hack it will disappear with the next Mautic update.
This is not sustainable over time. :slight_smile:

Pierre

Many Mautic providers do their own patch after an update.
We also do it. This is standard procedure.
The reason is, that by sometimes you can’t opensource customer specific data, and masking it / creating variables would be counter productive. You would spend way more time in maintaining an open source plugin, then using your own quick and dirty solution. Balance.

“Balance is what the force seeks.” - little green guy from a galaxy far far away.

2 Likes

exactly @joeyk . We have scripts written up that take care of any customization we do on each update.

2 Likes

Hello @joeyk,

For me its important to open source all patch. :slight_smile:
If it is something that brings value to Mautic then it can surely help the community.
It avoids to maintain each one a different version and to make the work of “patch” in duplicate. :slight_smile:

Pierre

Hey @pierre_a

I am not really sure how one would go about making a plugin here. The hack is very dependent on an external system and is actually intended to be wide enough that anyone can input any type of information inside the dashboard, so for example if someone was using google studio, they could embed that as well.

I think the fact that the code is here on the form is in line with the open source theme, such that it is available for everyone to use at their will.

The just of it is two fold:

  1. To show the possibility of modifying a view within the Mautic interface
  2. To input your own dashboard or information.

I only hope that this will provide some additional value to the mautic community and users all around.

2 Likes

You don’t need to make a plugin. If you’d make one you take all the support in your neck.

  1. You gave a perfect explanation, anyone with a little skill can implement this.
  2. You already open sourced the solution, thank you for that.

If someone would like to use a plugin, you can use this:

Plus set the default mautic page to this new page. Thats it.

4 Likes