Application Search Box
- Finds Station Assets
- Search Multiple Items
- Fits Anywhere on Page
- Modify Colors to Your Style
- Works in Workbench and Modern Browser
Application Search Box is simple search box which finds station assets via tag name or NEQL syntax. Found items are displayed in a results box below the input area. Result items consist of an ord, location in station, and history link (if applicable). When a user clicks on the link or history link, they are redirected to ord the location. This widget utilises Niagara's new search service, but does not subscribe to data, only finds station components. Add this widget to any page and find station resources quickly. The widget has a number of configurable properties that can be used to modify look, feel, and functionality.
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 applicationSearchBox-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.
The widget has a few configurable properties that can be used to modify look, feel, and functionality. Change the properties as required:
When neql property is disabled searches should be a single item or multiple items separated by comma.
Single Item: AHU1
Multiple Items: AHU1, AHU2, AHU3
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/applicationSearchBox/rc/applicationSearchBoxWidget.run.js'], function (app) {
app.initialiseApplicationSearchBox({
backgroundColor: '#ffffff',
color: '#747e8b',
icon: 'search-grey-min', // search-grey-min or search-white-min
disableNeql: true,
height: '', // set with height, width, position left, and position top
width: '', // set with height, width, position left, and position top
maxResults: 10,
positionLeft: '', // set with height, width, position left, and position top
positionTop: '', // set with height, width, position left, and position top
startIndex: 0,
divId: '#widget1',
});
});
</script>
</head>
<!--html to go here-->
<div id="widget1" style="width:300px;height:300px;"></div>
<!--Rest of your html below...-->
Build Your Own dashboards and win Projects by showing data that increase value and reduces expenditure.
