Niagara Toggle Switch Button

  • Drag n' Drop
  • Binds To Enum Writable
  • Renders in all major browsers
  • Clean pristine animation
  • 3 Different States
Add to Cart
n4 charting


The Tri State Switch binds to an EnumWritable and can control up to 3 different states. For example, On/Off/Hand. Switch between states easily for quick control. Its completely configurable and easy to use.

Are you looking for a cost effective way to manage and visualize data for all your customers? Why not have a look at View Builder?


Before you start. Download the modules from our portal (see your order confirmation, which also explains licensing). Copy the modules file to your modules directory. Restart BOTH station and Workbench.

1. Copy the triStateSwitch-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.

n4 graphics


bms toggle switch

The widget has a number of configurable properties that can be used to modify look, feel, and functionality. Change the properties as required.

Main Ord Binding:
Set this to an absolute ord, e.g.
station:|slot:/Drivers/NiagaraNetwork/EnumWritable or relativized ORD e.g.
The ord should point to a enum writable.

Example Enum Range:

enum range

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

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 type="text/javascript" src="/module/js/com/tridium/js/ext/require/require.min.js"></script>

            require(['/module/triStateSwitch/rc/'], function (app) {

                    backgroundColor: '#ececec',
                    buttonHeight: '27px',
                    buttonWidth: '103px',
                    fontColor: '#929292',
                    fontFamily: 'Poppins, sans-serif', // e.g, Helvetica, Arial, sans-serif
                    fontSize: '16px',
                    divId: '#widget1',
                    height: '32px',
                    labelHeight: '30px',
                    labelWidth: '100px',
                    ord: 'station:|slot:/Drivers/NiagaraNetwork/EnumWritable', // use absolute ord
                    width: '318px',

        <!--Rest of your html below...-->
        <!--widget to go here-->
        <div id="widget1" style="width:300px;height:300px;"></div>

You May Also Like

Alarm Notification Icon

N4 View Builder™©

tridium bms system

Alarm Acknowledge Table

alarm acknowledge table

back to more widgets...