Integration

Note: If you are using Atlas in your project, please reference see these instructions instead.

The first thing you need to do to integrate the global menus is to load the library by adding the following to your page header, and if your application is not using Open Sans font, add it too:

    
<script src="http://assets.ctl.io/dt-GlobalNavigationMenu/1.2.0/global-menus.js"></script>

// Import the font only if necessary
<link href='//fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400,600.700,800' rel='stylesheet' type='text/css'>
    
  

Global Menu Container

The Services and Sites menu display in a drawer-like fashion that require known positioning inside your application's layout. Because of this, you will need to add an element in the DOM that will be used to display the menu when either the Services or Sites menus are activated.

Add the following element in the DOM where you wish the drawer to be displayed.

    
<global-menu-container></global-menu-container>
    
  

Services Menu

To display the Services menu, all you need to do is include the following tag where you wish to display the button used to trigger the menu (this is typically in the navigation bar of your project).

    
<global-services-menu-button
  data-services="CAM MH MS CLC DCC"
  data-current-service="CAM">
</global-services-menu-button>
    
  

Options

Option Default Value Description
current-service null Code of the service that is currently active from the list of available services. If not specified, a generic menu button will be provided.
services CAM MH MS CLC DCC A delimited list of service codes that you wish to be visible in the menu from the list of available services.

Sites Menu

To display the Sites menu, all you need to do is include the following tag where you wish to display the button used to trigger the menu (this is typically in the navigation bar of your project).

    
<global-sites-menu-button
  data-sites="MAN OPT MON CAP IMG NEX"
  data-current-site="MAN">
</global-sites-menu-button>
    
  

Options

Option Default Value Description
current-site null Code of the site that is currently active from the list of available sites. If not specified, a generic menu button will be provided.
sites MAN OPT MON CAP IMG NEX A delimited list of site codes that you wish to be visible in the menu from the list of available sites.

Context Switcher

To display the Context Switcher menu, all you need to do is include the following tag where you wish to display the button used to trigger the menu (this is typically in the navigation bar of your project).

    
<global-context-switcher-button
  data-selected-workspace-id="workspaceId">
</global-context-switcher-button>
    
  

Options

Option Default Value Description
selected-workspace-id null ID of the workspace that is selected in the parent application. If not specified, the personal workspace will be selected.

Menu population

The context switcher interacts with the integrating application by dispatching custom events.

In order to populate the menu, a CAM token needs to be provided to the context switcher. However, since the global menus are initialized when the DOMContentLoaded event is fired, the token cannot be provided until the context switcher has been added to the DOM.

The CAM token is not persisted in the global context switcher and is only used to make the request to the CAM API.

The cam-context-switcher-ready event is fired when it is ready to accept a token. An event listener should handle this event and provide the token to the context switcher. In these examples this is a placeholder for the element that will listen for the event and readyHandler is a generic function or method name.

The GlobalMenus object is available in the global scope, so access might be slightly different depending on the front-end framework being used.

    
document.addEventListener('cam-context-switcher-ready', readyHandler);

// Example standalone function
function readyHandler() {
  GlobalMenus.populateContextSwitcher(token);
}
    
  

Depending on the application, this handler may need to be bound to the correct class.

    
this.addEventListener('cam-context-switcher-ready', this.readyHandler.bind(this));

// Example class method
readyHandler () {
  GlobalMenus.populateContextSwitcher(token);
}
    
  

The populateContextSwitcher function has an optional second argument of config. This will allow configuration of certain values used by the context switcher. The default configuration object is below.

    
{
  apiUrl: 'https://cam.ctl.io'
}
    
  

If the consuming application requires this information, it can implement an event listener that will pass the context to the rest of the application.

    
this.addEventListener('cam-context-switcher-context-changed', this.contextChangedHandler.bind(this));

// Example class method
contextChangedHandler(e) {
  this.doSomethingWithWorkspace(e.detail.workspace);
}
    
  

When the context is changed by selecting a workspace, the context switcher dispatches a cam-context-switcher-context-changed event with the following structure.
All objects in the event payload are directly from the CAM API /services/scopes endpoint. The organization and/or costcenter may be null but the workspace will always be populated.

    
{
  "detail": {
    "organization": {
      "updated": "2018-01-02 3:04:05.000006",
      "name": "DEMO Organization",
      "roles": {
          "organization": "administrator",
          "clc_org_admin": false
      },
      "type": "organization",
      "members": {
          "workspaces": 4,
          "groups": 1
      },
      "clc_alias": "DEMO",
      "clc_org_billing": false,
      "id": "demo"
    },
    "costcenter": {
      "organizations": [
          "demo"
      ],
      "updated": "2018-01-02 3:04:05.000006",
      "name": "Demo Cost Center",
      "roles": {
          "organization": "administrator"
      },
      "clc_org_billing": false,
      "members": {
          "workspaces": 8
      },
      "clc_alias": "DEMO",
      "type": "costcenter",
      "id": "12345678-abcd-5678-1234-567890abcdef"
    },
    "workspace": {
      "organizations": [
          "demo",
          "ctlops"
      ],
      "updated": "2017-10-09 18:26:39.962617",
      "name": "Demo Workspace",
      "roles": {
          "organization": "administrator",
          "costcenter": "administrator"
      },
      "clc_org_billing": false,
      "members": {
          "workspaces": 2
      },
      "costcenter": "12345678-abcd-5678-1234-567890abcdef",
      "clc_alias": "DEMO",
      "type": "team_workspace",
      "id": "demo1"
    }
  },
  "bubbles": true,
  "cancelable": false
}
    
  

Support Menu

To display the Support menu, all you need to do is include the following tag where you wish to display the button used to trigger the menu (this is typically in the navigation bar of your project).

    
<global-menu-support
  data-create-ticket-url="https://managedservices.ctl.io/msp/oauth/login?state=request"
  data-feedback-url="http://centurylinkcloud.uservoice.com"
  data-knowledge-base-url="https://www.ctl.io/knowledge-base/"
  data-status-url="https://status.ctl.io"
  data-support-center-url="https://managedservices.ctl.io/msp/oauth/login">
</global-menu-support>
    
  

Options

Option Default Value
create-ticket-url https://managedservices.ctl.io/msp/oauth/login?state=request
chat-url
feedback-url http://centurylinkcloud.uservoice.com
knowledge-base-url https://www.ctl.io/knowledge-base/
phone-number
status-url https://status.ctl.io
support-center-url https://managedservices.ctl.io/msp/oauth/login