Responsive Desktop/Mobile Menu


Responsive Desktop/Mobile Menu

Overview


The responsive mobile/desktop menu is a drop down menu for station navigation via ords. You can modify the look and feel using a JSON config file or copying it directly into the appropriate property. The menu is responsive to screen size. When screen size is less than 1024px, the mobile click menu becomes available. Before you start, copy the .jar file to your modules directory. Restart the station and Workbench.

Usage


1. Copy the responsiveMenu-ux.jar file to your modules directory.
2. Open the module from your palette file.
3. Drag and drop the widget from the palette onto your px view.

Drag n' Drop Widget'

Widget Properties

Properties


Modifying the Config


The config is in JSON format. You can customise as needed. Below is the default config with examples. There are 2 themes: default and inverse. However you can override values as needed.

 {
  "backgroundColor": "",
  "borderColor": "",
  "menuFontColor": "",
  "menuFontHoverColor": "",
  "menuHoverColor": "",
  "menuFontFamily": "",
  "menuFontWeight": "",
  "menuFontSize": "",
  "submenuBackgroundColor": "",
  "submenuFontColor": "",
  "submenuFontHoverColor": "",
  "submenuHoverColor": "",
  "menu": [
    {
      "li": "",
      "link": [
        "Link 1",
        "station:|slot:/Drivers/NiagaraNetwork/AHU1"
      ]
    },
    {
      "li": "Dropdown",
      "maxHeight": 200, // optional. Shows scrollbars. Only works when no submenu.
      "dropDownLink": [
        {
          "li": "",
          "link": [
            "Action",
            "station:|slot:/Drivers/NiagaraNetwork/AHU1"
          ]
        },
        {
          "li": "",
          "link": [
            "Another Action",
            "station:|slot:/Drivers/NiagaraNetwork/AHU2"
          ]
        },
        {
          "li": "",
          "link": [
            "Something else",
            "station:|slot:/Drivers/NiagaraNetwork/AHU1"
          ]
        },
        {
          "li": "",
          "link": [
            "Separated Link",
            "station:|slot:/Drivers/NiagaraNetwork/AHU1"
          ]
        },
        {
          "li": "",
          "link": [
            "One More link",
            "station:|slot:/Drivers/NiagaraNetwork/AHU1"
          ]
        }
      ]
    },
    {
      "li": "Menu2",
      "dropDownLink": [
        {
          "li": "",
          "link": [
            "Action",
            "station:|slot:/Drivers/NiagaraNetwork/AHU2"
          ]
        },
        {
          "li": "",
          "link": [
            "Another Action",
            "station:|slot:/Drivers/NiagaraNetwork/AHU1"
          ]
        },
        {
          "li": "",
          "link": [
            "Something else",
            "station:|slot:/Drivers/NiagaraNetwork/AHU1"
          ]
        },
        {
          "li": "",
          "link": [
            "Separated Link",
            "station:|slot:/Drivers/NiagaraNetwork/AHU2"
          ]
        },
        {
          "li": "Sub Menu",
          "subMenu": [
            {
              "li": "",
              "link": [
                "Sub Action",
                "station:|slot:/Drivers/NiagaraNetwork/AHU1"
              ]
            },
            {
              "li": "",
              "link": [
                "Another Sub Link",
                "station:|slot:/Drivers/NiagaraNetwork/AHU1"
              ]
            },
            {
              "li": "",
              "link": [
                "Sub Link",
                "station:|slot:/Drivers/NiagaraNetwork/AHU1"
              ]
            },
            {
              "li": "",
              "link": [
                "One More link",
                "station:|slot:/Drivers/NiagaraNetwork/AHU1"
              ]
            }
          ]
        }
      ]
    }
  ]
}              

JSON Editing

1. To help build your menu configuration use an online JSON editor like:
https://jsoneditoronline.org/
Copy and paste the above JSON and modify.

2. After you have made changes to the JSON, set the config property value of the menu:

IMPORTANT. You should remove all carriage returns and line breaks from the generated configuration before pasting. You can do this by using a text editor like Notepad++. In Notepad++ do CTRL+H (make sure extended Search mode is selected) to find and replace \r and \n with blank. This will remove all carriage returns and line breaks.

3. For the hyperlinks, valid ords must be used. e.g.:
station:|slot:/Drivers/NiagaraNetwork/AHU1

File Config

You can point the menu to a file that exists on the station. Valid values are ords e.g.:
file:^responsiveMenu/config.txt
If you do not specify a file reference the config property will be used instead.

* Workbench Viewing Workaround

Niagara Px View doesn't allow the menu items to appear over other items, however, there is a workaround:
If you're running 4.3 or above, there should be a "toggle preview" button at the end of the toolbar when looking at a Px graphic. This will show you your Px page rendered in a browser.

Using in your HTML Page


You can now use the widget in your custom html page as long as the html file is in a appropriate station directory. E.g.:
C:/../station/shared/demo1.html

1. Create an html page and place in your station files directory.
2. Create a div element and give it an id so you can inject the widget into this area. E.g.: widget1.
3. Add the following scripts before the closing head tag or the closing body tag. E.g.:


<script type="text/javascript">

    var require = {
        paths: {
            "nmodule": "/module",
            "baja": "/module/bajaScript/rc/plugin/baja",
            "bajaScript": "/module/bajaScript/rc",
            "bajaux": "/module/bajaux/rc",
            "lex": "/module/js/rc/lex/lexplugin",
            "css": "/module/js/com/tridium/js/ext/require/css",

            "jquery": "/module/js/rc/jquery/jquery-2.1.1",  // For N4.4 or higher use /module/js/rc/jquery/jquery-3.2.0.min
            "Promise": "/module/js/rc/bluebird/bluebird",

            // these are runtime dependencies
            "hbs": "/module/js/rc/require-handlebars-plugin/hbs", // For N4.4 or higher use /module/js/rc/handlebars/handlebars.min-v4.0.6
            "i18nprecompile": "/module/js/rc/require-handlebars-plugin/hbs/i18nprecompile",
            "json2": "/module/js/rc/require-handlebars-plugin/hbs/json2",
            "underscore": "/module/js/rc/underscore/underscore",
        },

        hbs: {
            disableI18n: true
        }
    }
</script>
<script type="text/javascript"
        src="/module/js/com/tridium/js/ext/require/require.min.js"></script>
<script>
    require(['/module/responsiveMenu/rc/responsiveMenu.run.js'], function (app) {

        app.initialiseDropdownMenu({
            config: '<JSON CONIFG HERE>',
            fileConfig: 'file:^responsiveMenu/config.txt',
        });
    });
</script>
</head>  
<!--Gauge to go here-->
<div id="widget1" style="width:300px;height:300px;"></div>
<!--Rest of your html below...-->
                                
4. Change the configuration values as required. IMPORTANT: When using in html the links should be changed to the following format:
/ord/station:|slot:/Drivers/Logic/AHU1_on_off

Licensing


Widgets and drivers must be licensed with us. Licenses are bound to the stations host Id. You will be provided access to the Software and Licensing Portal where you can manage your own licenses. Here you can add, update, or delete licenses as needed.

There are few ways to get a license file:

1. Add our licensing module to your station services. This module automatically retrieves the license from our servers and saves it to your stations shared folder directory.

2. Alternatively, Login to the Software and Licensing Portal (link provided in Order Confirmation) and add your host id's as needed. Copy the license file to the stations shared directory.

Finally, make sure the station user has access to WLicenseService in the user management and category service section.

Niagara Licensing

Niagara Dashboard


Niagara IOT technologies and modern toolsets allow you to build a powerful Niagara dashboard which is real time, data-driven, and cost effective. Our widgets are purpose-built by providing information with faster communication through real-time, data-driven, dashboards for web, desktop and mobile devices. You can now create a cutting-edge display of conventional HVAC system graphics, Dashboards, Alarms & Scheduling, Historical Data, and Analytics.

You May Also Like

Cosmo Dropdown Menu

Flyout Menu

PX Template View


back to more widgets...