custom dashboard's menu

[Amir MEKHALDI]

Hello all,

I'm trying to custom dashboard but I'm having issues changing the menu. Where i can setting the navigation part (number of item, sub-item, name..). I found that the nav links can be changes in app.js. Anyone run into this issue ?

Thanks

[Woody Beverley]

Perhaps you are having the same problem discussed in this post http://infiniteautomation.com/forum/topic/2283/app-js-changes-not-updating

[Amir MEKHALDI]

Thanks for your reply,

I'm able to see all my change by deleting the cache, but my issue is about how to add new item on the menu. What is the field which I need to use for that

I'm a beginner in html5

Sorry for my English

Thanks you

[Woody Beverley]

Hello Amir,

Can you post some of your code so we can see what you are attempting to modify? Maybe a screenshot of the demo menu you wish to modify would also be helpful.

Thanks,

[Will Geller]

The menu is defined in a block of code in app.js starting with:

// define our pages, these are added to the $stateProvider in the config block below
myAdminApp.constant('PAGES', [
    {

You will need to modify this JSON block. For example here I renamed "Section 1 > Page 1" to "Guages > Guage 1"

{
        state: 'dashboard.section1', // define some nested pages
        url: '/section-1',
        menuText: 'Guages',
        menuIcon: 'fa fa-building',
        menuType: 'toggle',
        children: [
            {
                state: 'dashboard.section1.page1',
                templateUrl: 'views/section1/page1.html', // html file to display
                url: '/page-1',
                menuText: 'Guage 1',
                menuType: 'link',
                menuIcon: 'fa fa-pie-chart'
            },
            {
                state: 'dashboard.section1.page2',
                templateUrl: 'views/section1/page2.html',
                url: '/page-2',
                menuText: 'Page 2',
                menuType: 'link'
            }
        ]
    },

You can also add the menuIcon property, as I did here, and set it to a string that is the font awesome icons class. http://fontawesome.io/icon/pie-chart/

You might want to do some reading up on JSON as that is the format used for configuring the menu.

Lastly let's say you add a new page by copying page1.html and move it to the views/guages/guage1.html directory. You can then point the menu link to this new page by setting

templateUrl: 'views/guages/guage1.html', // html file to display

[Amir MEKHALDI]

@Woody-Beverley Thank you for your replies, here's a screen shot of my menu, i'm using the last version of mango in date.

Thanks @Will-Geller i opened all my fields and made i global through it, there is any mention of "menuText" am using the sb-admin template source

[Will Geller]

From that screenshot you are showing, you are using an older version of the dashboard module. The new version of the custom dashboard module will look as shown in this video, it is using angular-material and all updates will be made in this new template.

https://help.infiniteautomation.com/support/solutions/articles/14000023049-getting-started-with-custom-dashboards-and-angularjs

The directions I gave for modifying the menu are for the new dashboard module. If you want to update to it you can click the puzzle icon from the main Mango console, to go to the modules page, then click the 'Check for Upgrades' button and upgrade the custom dashboard module to 3.1

I suggest following the instructions for creating a copy of the adminTemplate and using that as a starting point for customizing the menu and creating your own pages.

[Amir MEKHALDI]

Thanks you @Will-Geller i'm going to follow these steps

have a good day

[Amir MEKHALDI]

@Will-Geller i come back to you, i still have a problem

I followed what you said but i m not able to upload the change in my template page, I replaced "section 2" with "Eclairage" as you see in the screenshoot. The cache is disabled

Also im not able to load the logo, i replaced "logo.svg" (which i don't find) by "logo.png" as http://localhost:8080/modules/dashboards/web/img/logo.png

Thanks for your assitance

[Jared Wiltshire]

Hi Amir,

What you have looks right. Can you try and locate app.js under the sources tab in the developer console and check it matches what you entered in your developer console.

Jared