Niagara Font Awesome Buttons


  • Drag n' Drop
  • Font Awesome Full Icon Library
  • Renders in all major browsers
  • Bootstrap V4 styling
Add to Cart

Overview


Font Awesome Icon style buttons for your px pages. Drag and drop the icon widget from the palette onto your px view.

Usage


n4 buttons


Properties


The widget has 2 main configurable properties that can be used to modify look, feel, and functionality. Change the properties as required:

Main Ord:

The Niagara object the button points to.

Set this to an absolute ord, e.g.
station:|slot:/Drivers/NiagaraNetwork/AHU5
OR
relativized ORD e.g. slot:AHU5

Button Text:

The button text to show on the button. You can also enter html character codes. E.g. non-breaking space:

 Button 

The Niagara object the button points to.

Button Style:

Bootstrap V4 - the following values are acceptable: btn-primary, btn-secondary, btn-success, btn-info, btn-warning, btn-danger, btn-link, btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-info, btn-outline-warning, btn-outline-danger.

Button Width:

Add a non-breaking space to either side by using

 

Button Examples:

Image

Image


Font Awesome:

Set the fontAwesomeStyleProperty. Uses version font awesome library version 4.7.0. Font Awesome Icons Homepage


Note: the buttons have a transparent canvas background in browser mode.




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",
                    "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/fontAwesomeButtons/rc/fontAwesomeButtons.run.js'], function (app) {

                app.initialiseFontAwesomeButton({
                    ord: '/ord?station:%7Cslot:/Services/AlarmService/ConsoleRecipient', // should use hyperlink syntax
                    buttonStyle: 'btn-outline-primary',
                    buttonText: 'Submit',
                    fontAwesomeStyle: 'fa-download',
                    divId: '#widget1'
                });
            });
        </script>
        </head>
        <!--html to go here-->
        <div id="widget1" style="width:300px;height:300px;"></div>
        <!--Rest of your html below...-->
                                    

You May Also Like





Bootstrap Buttons

N4 View Builder™©

tridium bms system

Icons Buttons

alarm messenger

back to more widgets...