V3 Dashboard Designer

[arvand.owji]

Hi,
I have a question regarding Mango V3 dashboard designer. Is there any way to modify the way the menus look? It seems the default way is to have a vertical menu on the left side, what if i want to have a top horizontal menu? Also what about changing the menus and using my own icons for it? Thanks.

[Jared Wiltshire]

Not possible sorry. What are you trying to achieve exactly?

[arvand.owji]

@jared-wiltshire I have a custom dashboard created using API for the older versions and now that the dashboard designer has been improved dramatically, i want to move/remake my dashboard into the new dashboard designer. I'm trying to achieve the same look and feel of my custom dashboard.

[arvand.owji]

@jared-wiltshire Was this even the intention to enhance the dashboard designer to the point that it can easily replace any needs for a custom dashboard built by the API? How far are we from that point? Thanks,

[Jared Wiltshire]

@arvand-owji Ahh sorry I thought you wanted to re-arrange the menus on the dashboard designer iteself. But I think you are talking about modifying the way the Mango UI menus are displayed.

It is not possible to change the position/orientation of the Mango UI menus however you can add links to pages and modify the text/icons.

I will put together an example of how to build your own menu structure within the Mango UI custom pages/dashboard designer.

[Jared Wiltshire]

@arvand-owji
I'm going to recommend a hybrid approach. Use a userModule.js file like this, you can add it from the UI settings page. We are going to add a parent state which you can then nest custom pages inside of. The myApp.home state etc will be nested inside the <div ui-view> element of the myApp state. The "page" that is linked to from the myApp state is the menu,

define(['angular', 'require'], function(angular, require) {
'use strict';

var userModule = angular.module('userModule', ['maUiApp']);

userModule.config(['maUiMenuProvider', (maUiMenuProvider) => {
    maUiMenuProvider.registerMenuItems([{
        name: 'myApp',
        url: '/my-app',
        template: '<ma-ui-page-view xid="d012dd15-0b4e-4539-8e8a-e0235c08411d"></ma-ui-page-view><div ui-view></div>',
        menuText: 'My app base',
        //menuHidden: true,
        abstract: true
    }]);
}]);

return userModule;

}); // define

Menu "page":

<div class="ma-designer-root" id="cd40a324-2725-42fa-9778-12255ebb5a62" style="width: 1024px; height: 48px; position: relative;">
    <ma-button id="54f9db80-3064-4c61-8db4-59380f86df6e" style="position: absolute; left: 104px; top: 0px;" icon="android" label="Page 1" raised="true" palette="accent" ui-sref="myApp.page1"></ma-button>
    <ma-button id="7bd73a7c-6923-4e3d-93e2-85c2d4cf3f25" style="position: absolute; left: 0px; top: 0px;" icon="home" label="Home" raised="true" palette="primary" ui-sref="myApp.home"></ma-button>
</div>

Home page, page 1 etc.. Create pages as desired then add menu icons for them, making sure to choose "My app base" as their parent.