V3 Overrides folder usage with custom pages/dashboards

---

Hi, this could probably be answered by IA staff.

I have recently purchased a Mango ES V3 for my new agriculture demo site, and wand to use custom pages.

Could you please link me to a tutorial on using the overrides folder, as well as the directory structure that custom dashboards uses. I have looked for info on the Forum, but cannot locate such info.

I am running the Demo version of V3, so I can get all these bugs sorted before deploying the ES. The help section does not have enough info and also some broken links (ie to Templates)

Hayden

G'day @hayden_AUS

We have a release version of Mango out now so the best first step would be to upgrade to Mango 3.0.2 and the latest versions of the modules, we will also have Mango 3.1.0 out pretty soon with further bug-fixes and enhancements.

https://help.infiniteautomation.com/how-to-upgrade-mango/?rq=upgrade

Are you planning on developing your own AngularJS app based off one of the templates? We generally recommend using the built in page editor/dashboard designer to create custom pages instead unless you have a specific need for a custom app.

If you give me a rundown on what you are trying to achieve I can give you some guidance.

In the meantime, to answer your question here is a link about the overrides folder.
https://help.infiniteautomation.com/how-to-use-the-overrides-folder/?rq=overrides

You will probably also want to enable the examples and api docs from the edit menu page. There is information about copying the templates at this URL /ui/examples/templates/admin-template

Thanks Jared,

I will be using the dashboard designer to build the pages.

I enabled examples and API docs in the EDIT MENU page, which I think is where the main problem was.

The admin template page has further info on the overrides folder usage.

This is the sequence I have so far:

1. Copy the entire ${MA_HOME}/web/modules/mangoUI/web/adminTemplate folder into the ${MA_HOME}/overrides/web/modules/mangoUI/web directory, give it a new name.

2. Change two references to adminTemplate in index.html to the name of the folder which you created in overrides.

WHERE IS index.html in this instance?
Where do I configure Mango with what folder I am working in when customizing the dashboard/pages?

Can you please do a step by step guide to setting up a new Mango instance for using AngularJS/page templates, including operating in the overrides folder.

Hayden

Hi again Jared,

1. Have copied the adminTemplate folder to overrides as above,
2. Renamed the adminTemplate folder to demoSite,
3. Changed the references in the demoSite index.html to from adminTemplate to demoSite.
4. Created a new menu item and pointed it to the new folders index.html

This menu item does not work. Is this how I link to the new folder?

I just want to basically log onto Mango, go to my blank/default template, and build my site/dashboard from there.

So you only need to copy the adminTemplate if you plan on creating and maintaining your own entirely custom app based off our AngularJS modules/directives/services.

If you are creating a custom app by copying the adminTemplate:

• You will have to update it so it remains compatible every time you update the UI module
• You will access the pages inside this app via their URL (e.g. /user-ui/demoSite/demoPage or via the template's hard-coded menu

However most of our customers use the built in page editing tools in the standard Mango UI (/ui). That is the "Edit pages" link and the "Dashboard designer" link in your menu.

• You can edit the pages directly through the web UI, no need to upload html files using FTP etc.
• Pages automatically use the latest version of our AngularJS app, you will only need to make minor changes if the directives change
• Pages can be linked into the standard Mango UI menu using the Menu editor or the Edit/Add menu item link on the page editors
• You can easily set permissions on the pages and their menu items so they dont show up for certain users

Thanks Jared,

Could I please confirm, so if I want to build custom pages using the Dashboard designer and/or the Edit Pages feature, those pages will not be lost after an upgrade? I only need to copy the env.properties file as described in the installation notes?

When creating pages, where is the page stored in the directory structure? Say if I wanted to edit the code with an external editor.

Secondly, I have just found a few bugs with Firefox and IE. Firefox is unable to delete pages, and does not show an Editor box in Edit pages. In IE, the Dashboard designer is unuseable, and does not show an Editor box in Edit pages.
Chrome seems to work with all features.

Hayden

Custom pages from the Dashboard Designer are stored in the SQL Database (H2 by default) into the jsonData table so you can not edit them directly on the disk but they do get backed up along with the SQL database backup. It will also be upgraded without loosing any data.

We do not support IE so you'll have to use Chrome of Firefox but we would be interested in any issues so will look into them further.

Thanks Joel, just wanted to get a few things clear before deploying my first ES. I don't use IE either, just used it to see if the Firefox issue was browser related.

Hi guys,

Still having issues with overrides folder, specifically adding images.

I have made custom pages and added images by placing them in the /opt/mango/web/images folder, and specifying the location in dashboard designer (add image) as /images/imagename.jpg
This method works fine.

However the help page for creating custom pages suggests creating a folder in overrides as below:

Adding Your Own Images
If you would like to include your own images on a page you can put them in an image folder in your overrides. Create a new folder at Mango/overrides/web/modules/mangoUI/web/images and place your image files in there. You can then insert the image onto a page using: <img ng-src="/modules/mangoUI/web/images/myImage.png" alt="My Image"/>

This does not work.

Can I just use the method I have used? Will I lose the image after an update?

Also, I see there is now an image picker in dashboard designer, where are these "default" and "public" folders?

Thanks

Hi Hayden,

I just retested the overrides folder, it is working as described. I didn't need to restart Mango or anything like that, images are immediately available to be included as described. What version of mangoUI are you on?

You will probably not lose your images. Only the work/ and lib/ folders are completely destroyed. However, files in web/ are overwritten, so if you use a filename already existing or that we create in the future, it will be lost at update.

Are these the "public" and "default" folders you are referring to?

We are adding in a unified file manager since there are many things one can upload, and it makes more sense to unify the uploader/picker than have a hundred similar file uploads. There's a new directory in Mango/ called filestore, and if you have uploaded any files into public or default you should see them there.

Here's my img ng-src using the filestore: /rest/v2/file-stores/default/myImage.png

Hi Phil,

I am on the latest version (5th July).

This is where my image is:
mango@mangoES3297:/opt/mango/overrides$cd opt/mango/overrides/web/modules/mangoUI/web/images mango@mangoES3297:/opt/mango/overrides/web/modules/mangoUI/web/images$ls
KilkivanSat720.jpg

In "Edit pages", this is the only code:
<img ng-src="/modules/mangoUI/web/images/KilkivanSat720.jpg" alt="My Image"/>

The image does not display.

Could you maybe check your code and post the location/code as above?

Referring to file stores
Yes they are the folders, "public" and "default".
Now that you have given me the folder locations, I tested the default folder from code in "Edit pages", and this works.
I think I will go ahead and use the file store method now for adding images.

@hayden_AUS I think the issue is that you are using ng-src instead of plain old src. You only need to use ng-src when you are supplying a dynamic url from an AngularJS variable.

The file store is definitely your best bet for uploading and inserting images, you will notice the dashboard designer can now insert the src attribute by selecting an image from the file store.