Menu

Building a Responsive Page in Tridium Niagara N4.7

Responsive Pane
Since the introduction of the Responsive Pane into the Platform, Niagara can now build some really nice HTML5 mobile pages what work well on both desktop browser and mobile device. The examples below show just a couple of designs I am working on for One Sightsolutions. The first screenshot is a draft design for an Air Handling Unit, which uses 2D graphics in the overview image. Having used the Responsive Pane on a purely mobile page, I found that the individual Panes are ideal for relativising data so that a single Pane can be used over and over again. The AHU has 4 Supply and 4 Extract fans.

If you have a small selection of data that is repeated, using a variable in place of the 'Ord' like $(supply) allows for re-use on multiple data folders. A really nice feature of this design is the ability to make Panes invisible so that you can de-clutter a page when viewed. This can be achieved by toggling the invisibility property of the Responsive Pane... nice!


A lot of information can be shown on a screen, some of which may not be needed by the user. By adding a show/hide button, it is possible to switch off some of the Panes.

Transport for London and Our API
The second page shows how the Responsive Pane can be used in conjunction with the One Sightsolutions API reader to provide a Dashboard of Public Data. This Dashboard shows the Car Parking space availability in London for Transport station car parks. Building up a simple design using some Icons, the design is easy on the eye and functional.

I this is the type of look required for your project then get in touch with One Sightsolutions and we might just be able to assist you!!