Skip to main content

UI & Dashboards

Mango's modern UI is built on AngularJS (1.x) with Angular Material Design, providing a responsive single-page application for monitoring, controlling, and visualizing your SCADA and IoT data. The UI framework includes a rich library of <ma-*> components, a drag-and-drop Dashboard Designer, and a full-featured page editor for building custom dashboards.

In This Section​

  • UI Overview -- Getting started with the Mango UI, navigation, and key concepts.
  • Dashboard Designer -- Build dashboards visually using the drag-and-drop designer, with dynamic watch list bindings and auto-scaling layouts.
  • Pages -- Create custom pages with the page editor, configure navigation menus, link between pages with state parameters, and style elements dynamically with data point values.
  • Components -- Reference for built-in UI pages and components including the Date Bar, Events page, Data Point Details, and Users and Roles management.
  • Customization -- Customize the look and feel of Mango with custom CSS, themes, menus, and interactive SVG graphics.