Integration

Note: If you are using Atlas in your project, you do not need to do anything additional to include Global Menus as it is bundled with Atlas 3+.

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="https://assets.ctl.io/dt-GlobalNavigationMenu/1.5.5/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. If an element should appear disabled, write an exclamation (!) before the code.

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="ACT ALM OPT MON !NEX"
  data-current-site="ACT">
</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 ACT ALM OPT MON !NEX A delimited list of site codes that you wish to be visible in the menu from the list of available sites. If an element should appear disabled, write an exclamation (!) before the code.

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>
</global-context-switcher-button>
    
  

Options

Option Default Value Description
selected-context-type null Type of the context that is selected in the parent application. Can be one of workspace, costcenter, or organization. If not specified, the personal workspace will be selected.
selected-context-id null ID of the context that is selected in the parent application. If not specified, the personal workspace will be selected.

Example with options

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

Menu population

The global menus are initialized when the DOMContentLoaded event is fired. By default, the options of every menu are linking to production environment. If you want to set up the menus for the _Beta_ environment, you need to send an additional parameter on the initialize function. The following list shows the available values for this parameter. The examples below show how to initialize the global menus for the _Beta_ and _Production_ environments respectively:

    
// beta environment
document.addEventListener('DOMContentLoaded', () => {
  GlobalMenus.initialize('BETA');
});

// production environment
document.addEventListener('DOMContentLoaded', () => {
  GlobalMenus.initialize('PROD');
});

// production environment
document.addEventListener('DOMContentLoaded', () => {
  GlobalMenus.initialize();
});
    
  

In order to populate the context switcher menu, a CAM token needs to be provided to the context switcher. However, the token cannot be provided until the context switcher has been added to the DOM.

The CAM token is persisted in memory in the global context switcher and is only used to make requests 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.

The call to GlobalMenus.populateContextSwitcher() returns a Promise, which when resolved returns the CAM API response. If the promise is rejected, it bubbles up the root error to the consuming application. This error may or may not include an HTTP status code.

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

// Example standalone function
function readyHandler() {
  GlobalMenus.populateContextSwitcher(token).then((response) => {
    doSomethingWithResponse(response);
  }).catch((err) => {
    doSomethingWithError(err);
  });
}
    
  

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).then((response) => {
    doSomethingWithResponse(response);
  }).catch((err) => {
    doSomethingWithError(err);
  });
}
    
  

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',
  enabledContexts: [
    'favorite',
    'organization',
    'costcenter',
    'workspace'
  ]
}
    
  

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"
      ],
      "owning_organization" : {
        "id": "demo",
        "name": "DEMO Organization"
      },
      "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"
      ],
      "owning_organization" : {
        "id": "demo",
        "name": "DEMO Organization"
      },
      "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",
      "costcenter_name": "Demo Cost Center",
      "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-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
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