Linking Between Pages

Mango's UI uses a navigation system based on UI-Router for AngularJS. Using the Edit Menu page you can set up menu items for your custom pages, which will also create UI states which you can route to.

You can then at the ui-state attribute on 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 you would use the following code:

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

Try putting this HTML onto a custom page and you should see a button. Clicking it will resolve the ui.dataPointDetails state and open that page.

Some pages support passing in parameters. With the Data Point Details page you can pass in 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

See the Dynamic Buttons and Linking to Dynamic Pages support articles for more information on setting up your own pages that use state parameters and linking to external pages.