How to do custom dashboards now?

leandro

Hi,

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?

Regards. Leandro

Jared Wiltshire

@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

I took what used to be the admin template and have been building on top of that.

So my files are here:
/mango/overrides/web/modules/mangoUI/web/myProject

And changed all appropiate lines, i.e.:
<script>require(['mangoUIModule/myProject/app']);</script>

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.

Jared Wiltshire

@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

@leandro I just released a new UI module to deal with a bug loading ngMango.js by itself (caused by a bug in our build system - Webpack).

Here's a link to an updated admin template -
https://drive.google.com/file/d/1k1M3JMl49624yeVCV9C7xEYEbfpBrf8Z/view?usp=sharing

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>

Use require() instead of define() in app.js
Remove 'ngMango/ngMangoMaterial' from the require/define array (its loaded inside ngMango.js already)

Hope that gets you up and running.

leandro

@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?

Jared Wiltshire

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

leandro

Thanks for your tips. It worked like a charm!

Jared Wiltshire

@leandro said in How to do custom dashboards now?:

Thanks for your tips. It worked like a charm!

Great! Glad you got it all working again. Sorry for the hassle.

Balistar

Hi Jared,
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.

mangoUI 3.4.5
on Chrome 67

Jared Wiltshire

@balistar
https://forum.infiniteautomation.com/search?term=Content Security Policy&in=titlesposts