Skip to main content

Dynamic Link to Schedule

Mango includes a built-in scheduler page for editing data point schedules. In some cases, you may want to let users view and edit a single specific schedule directly from a custom dashboard page, without navigating through the full scheduler interface. This tutorial shows how to create a dedicated schedule editing page and link to it from other dashboard pages.

Overview​

The approach involves three steps:

  1. Create a minimal custom page that embeds the scheduler component and hides the schedule selection UI.
  2. Register a menu item with a URL that accepts the schedule XID as a parameter.
  3. Add a link or button on your dashboard that opens the schedule page in a popup window.

Step 1: Create the Schedule Page​

Create a new custom page with the following contents. The ma-scheduler-page component renders the full scheduler interface. The CSS rules hide the schedule selector card so only the schedule editor is visible.

<ma-scheduler-page></ma-scheduler-page>
<style>
    body {
        overflow-x: hidden;
    }
    ma-scheduler-page > div > md-card {
        display: none !important;
    }
</style>

Step 2: Register the Menu Item​

Create a page menu item with a URL of /scheduler-no-ui/{xid} and set its parent to Root - Top Level. The {xid} portion of the URL is a route parameter that tells the scheduler which schedule to load. When the page opens, the scheduler automatically reads the XID from the URL and displays that schedule for editing.

Step 3: Link to the Schedule Page​

From any other dashboard page, you can add a link that opens the schedule page in a popup window. Replace the XID in the URL with the actual schedule XID you want the user to edit.

<a href="#"
   onclick="window.open('/ui/scheduler-no-ui/ADVSCH_6fcef9e2-c002-4407-8fe8-e72e1fd2903b', 'schedule', 'height=800,width=1024')">
   Open Schedule
</a>

The window.open call opens the page in a separate browser window sized at 1024 by 800 pixels. The second argument ('schedule') is the window name -- if a window with that name is already open, it will be reused instead of opening a new one.

To make the schedule link dynamic based on a Watch List parameter or a data point selection, you can use AngularJS expressions to build the XID dynamically:

<a href="#"
   ng-click="$event.preventDefault(); openSchedule(point.tags.scheduleXid)">
   Edit Schedule for {{point.name}}
</a>

This approach lets users click a single button to jump directly to the relevant schedule editor for whichever device or data point they are currently viewing.