Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

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


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


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


  • @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,


  • @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.
    0_1505318920286_bd42a8d9-89d0-4e12-af0f-a34e087ea7a8-image.png

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


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