How to do custom dashboards now?
I am running latest version of Mango (3.4.4) and my custom dashboards are not working anymore.
I see that the web folder for the mangoUI module has changed substantially and that's why I can't use the overrides folder anymore in my app.
How can I make it work again?
@leandro What files do you have overridden? For what purpose? I will try and get you back up and running again.
You are correct that the file structure has changed, this is why your overrides aren't working. Instead of loading all the individual files over HTTP we now pack them up into a couple of large bundle files using webpack.
leandro last edited by leandro
I took what used to be the admin template and have been building on top of that.
So my files are here:
And changed all appropiate lines, i.e.:
Then I have built directives and components on top of that, using requireJS and AngularJS modules. Basically following the spirit of the admin template but more complex.
@leandro ok so you don't actually have any files that are overriden per say. They are your own files in the overrides directory. I'm working on getting a copy of the old adminTemplate ported over to the new environment so I can show you how to get it working. It looks like I might have to do a UI module release, something is broken.
Jared Wiltshire last edited by Jared Wiltshire
@leandro I just released a new UI module to deal with a bug loading
ngMango.jsby itself (caused by a bug in our build system - Webpack).
Here's a link to an updated admin template -
Changes, so you can just make them to your app -
- Remove the links for vendor CSS files (they are loaded automatically)
- Scripts to be loaded will look like this
<script src="/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js"></script> <script src="/modules/mangoUI/web/mangoUi~ngMango.js"></script> <script src="/modules/mangoUI/web/ngMango.js"></script> <script src="app.js"></script>
'ngMango/ngMangoMaterial'from the require/define array (its loaded inside ngMango.js already)
Hope that gets you up and running.
@Jared-Wiltshire Thanks! I have tried using the provided admin template and I get
app.js:6 Uncaught ReferenceError: require is not defined.
Then I tried downloading the mangoUI module from github (version 3.4.5 as of yesterday) but I still get errors. Maybe it is not as simple as replacing the mangoUI folder?
@leandro you should be downloading the module from the store, not from Github. If you download from Github it will not be compiled. You can download v3.4.5 from the modules page inside of Mango.
Thanks for your tips. It worked like a charm!
Since the new UI Module, the vendor CSS files, that are suppose to be loaded automatically, are blocked from loading in my Custom Dashboard.
mangoUi~ngMango~ngMangoServices.js:39 Refused to load the stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".
I believe I changed everything in my dashboard and is following your admin template.
Other than styling my dashboard works fine.
on Chrome 67