Skip to main content

Dynamic Buttons

Mango dashboard pages often need navigation buttons that link to other pages or external URLs. You can create static links to external sites, dynamic links that change based on the current Watch List parameter, or links that pass parameters to a target page for context-aware dashboards.

Linking to an External URL​

The following code adds a button that opens an external URL in a new browser tab. Use a standard anchor tag (<a>) styled as an Angular Material button.

<a id="4b079dec-2665-47d0-ad70-efaf380b9b24"
   style="position: absolute; left: 644px; top: 348px;"
   href="https://www.google.com" target="_blank"
   class="md-button md-raised md-accent"
   md-ink-ripple="">Button Text</a>

Dynamic Button Based on Watch List Parameter​

You can build the ui-state name dynamically from the current Watch List parameter value. This is useful when the target page name follows a predictable pattern. The ui-state name for a page can be found in the Mango menu editor.

<md-button class="md-button md-raised md-accent"
   ui-state="'ui.hvacSystems.rooftopUnits.rooftopUnit'+ designer.parameters.dn.substr(3,1)"
   style="position: absolute; left: 9.234px; top: 253px; width: 115.766px; height: 36px;">
   Rooftop Unit {{designer.watchList.data.paramValues.dn.substr(3,1)}}
</md-button>

In this example, designer.parameters.dn contains the current device name. The substr(3,1) call extracts the unit number from the device name so the button label and link target both update dynamically as the user changes the Watch List selection.

Linking to a Page and Passing a Watch List Parameter​

To navigate to a specific page and preset a Watch List parameter on the target, use ui-state with ui-state-params. The target page must be configured to accept the incoming parameter as described in Linking to Dynamic Pages.

<md-button class="md-button md-raised md-accent"
   ui-state="'ui.hvacSystems.vavDashboard'"
   ui-state-params="{dn:'VAV201'}"
   style="position: absolute; left: 79.2188px; top: 103px; width: 115.766px; height: 36px;">
   Link Text
</md-button>

Here ui-state-params="{dn:'VAV201'}" passes dn=VAV201 as a URL query parameter. On the target page, the ma-state-params directive picks up this value and applies it to the Watch List, so the dashboard loads with the correct device context.