Skip to main content

Linking Between Pages

Mango's UI uses a navigation system based on UI-Router for AngularJS. Using the Edit Menu page, you set up menu items for your custom pages, which also create UI states that you can route to. This state-based routing system lets you create links and buttons that navigate between pages, optionally passing parameters to control what data the target page displays.

Basic Page Links​

You can add the ui-state attribute to any HTML element to make it link to an internal page. For example, to create a button that links to the built-in Data Point Details page:

<md-button ui-state="'ui.dataPointDetails'" class="md-raised md-primary">
    Go to Details
</md-button>

Place this HTML on a custom page and you will see a button. Clicking it resolves the ui.dataPointDetails state and opens that page.

Finding State Names​

Every menu item has a corresponding state name. To find the state name for a page:

  1. Open the Edit Menu page.
  2. Click the pencil icon on the menu item you want to link to.
  3. The State name field shows the unique identifier (for example, ui.dataPointDetails).

For custom pages, the state name is automatically generated based on the parent item and URL path you set when creating the menu item.

Passing Parameters​

Some pages support passing in parameters through the URL. Parameters let you control the initial state of the target page -- for example, pre-selecting a specific data point.

With the Data Point Details page, you can pass the XID of a data point to open the page with that data point pre-selected:

<md-button ui-state="'ui.dataPointDetails'"
           ui-state-params="{ pointXid: 'internal_mango_num_data_points' }"
           class="md-raised md-primary">
    Go to Details
</md-button>

Notice how the URL contains the state parameter: /ui/data-point-details/internal_mango_num_data_points

Common Built-In Page Parameters​

PageParameterDescription
Data Point DetailspointXidPre-selects the data point with the given XID.
Data Source EditxidOpens the editor for the data source with the given XID.
EventsalarmLevelPre-filters the events table to the specified alarm level.

Custom Page Parameters​

You can define your own parameters on custom pages. This is done through the menu item configuration and allows your pages to accept URL parameters.

Defining Parameters​

When creating a menu item for your custom page, the URL path can include parameter segments:

/my-dashboard/:deviceId

The :deviceId portion defines a URL parameter named deviceId. When a user navigates to /ui/my-dashboard/chiller-01, the value chiller-01 is available in your page's AngularJS scope.

Accessing Parameters in Your Page​

Use the $stateParams service to access URL parameters in your page markup:

<ma-get-point-value point-xid="{{$stateParams.deviceId + '-temperature'}}"
                    point="tempPoint">
</ma-get-point-value>
<h2>Temperature for {{$stateParams.deviceId}}: {{tempPoint.value}}</h2>

Linking with Parameters​

To link to a custom page with parameters:

<md-button ui-state="'ui.myDashboard'"
           ui-state-params="{ deviceId: 'chiller-01' }">
    View Chiller 01
</md-button>

Dynamic Button Lists​

A common pattern is generating a list of buttons from a data source or watch list, where each button links to a detail page with the appropriate parameter:

<ma-watch-list-get watch-list-xid="WL_devices"
                   on-points-change="points = $points">
</ma-watch-list-get>

<div layout="row" layout-wrap>
    <md-button ng-repeat="point in points"
               ui-state="'ui.deviceDetail'"
               ui-state-params="{ deviceId: point.deviceName }"
               class="md-raised">
        {{point.deviceName}}
    </md-button>
</div>

This creates a button for each device in the watch list. Clicking a button navigates to the device detail page with the correct device pre-selected.

To link to an external website, use a standard HTML anchor tag:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    External Documentation
</a>

Or use an Angular Material button styled as a link:

<md-button href="https://example.com" target="_blank" class="md-raised">
    External Documentation
</md-button>
  • Use ui-state for internal links instead of href with hardcoded URLs. This ensures that navigation works correctly with the SPA routing system.
  • Always quote state names in the ui-state attribute: ui-state="'ui.pageName'" (note the single quotes inside double quotes).
  • Provide visual feedback -- Use md-raised and md-primary classes on buttons that navigate to make them clearly clickable.
  • Handle missing parameters gracefully -- In your custom pages, check whether expected parameters are present and show appropriate content or a fallback if they are not.