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:
Note that the file being sourced is global-menus-module.js. This is an addition with Global Menus version 1.6.0 or greater.

    
<script src="https://assets.ctl.io/dt-GlobalNavigationMenu/3.1.0/global-menus-module.js"></script>
// Listener to initialize menus to production
<script>
document.addEventListener('DOMContentLoaded', () => {
  GlobalMenus.initialize();
});
</script>
    
  

To point the Global Menus to the beta environment, pass the BETA parameter in the initilization.

    
<script src="https://assets.ctl.io/dt-GlobalNavigationMenu/3.1.0/global-menus-module.js"></script>
// Listener to initialize menus to Beta and Dev URLs
<script>
document.addEventListener('DOMContentLoaded', () => {
  GlobalMenus.initialize('BETA');
});
</script>
    
  

In addition to that, the following line is needed if your application is not using Inter font:

    
// Import the font only if necessary
<link href='//fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap' 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>
    
  

Global Account Menu

    
<global-account-menu
  data-account-name="John Doe"
  data-account-url="#my-account"
  data-master-account-url="https://sso-lab.ctl.io/oxauth/account"
  data-logout-url="#logout">
</global-account-menu>
    
  

Options

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 EO CLC DCC CC"
  data-current-service="CAM">
</global-services-menu-button>
    
  

Options

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

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

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, if source the global-menus.js script, the Global Menus are initialized to the _Production_ environment when the DOM is fully loaded.

When sourcing the global-menus-module.js script, the GlobalMenus must be initialized by the consuming application. The following list shows the available values for this parameter. The examples below show how the global menus should be initialized for _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();
});

// custom environment
document.addEventListener('DOMContentLoaded', () => {
  let urls = {
    domain:'mycustomurl.com', // required field
    monitoring:'https://mymonitoring.com',  // not required field by default will be https://monitoring.mycustomurl.com
    analytics:'https://myanalytics.com'  // not required field by default will be https://analytics.mycustomurl.com
  };
  GlobalMenus.initialize('CUSTOM', urls);
});
    
  

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