CSS Script HTML Header title Attributes Events Methods Feedback

Introduction

At CM we have different teams working on different apps which should be available in the platform.
To be part of CM's platform use of the CM Platform header is mandatory.
With a common header our customers have a generic way to navigate through all the different apps on the platform.

Getting started

1. CSS

Include the following css link in your header.

<link rel="stylesheet" href="https://www.cm.com/app/header/css/header.min.css" />

2. Scripts

Include the following script tag at the end of your body tag.

<script src="https://www.cm.com/app/header/js/header.min.js"></script>

3. HTML

Include the following html tag somewhere in the body tag.

<platform-header title-text="CM Platform header"></platform-header>

Components

Attributes

Sets the title of the app in the top-left of the application.
<platform-header title-text="Header Template"></platform-header>
Sets the URL of the logo in the top-left of the application.
<platform-header logo-url="/"></platform-header>
Changes the helpcenter URL in top right to a the provided URL. Tip: Use permalinks, since the URL is translated.
Can be either an absolute URL or a relative (permalink) URL starting with a / .
Default: https://www.cm.com/app/help/
<platform-header  module-help-path="/permalink/item/380"></platform-header>/code>
Enables/Disables the NPS module to enable a dialog to ask customers to fill in NPS (Net Promoter Score).
Default: true.
<platform-header module-nps="true/false"></platform-header>
Override the switch account dialog with a switch organization dialog.
Default: false.
<platform-header module-switchorganization="true/false"></platform-header>
Enables/Disables debug information, showing load times for the header parts.
Default: false.
<platform-header debug-information="true/false"></platform-header>
Enables/Disables switch account dialog and buttons.
Default: true.
<platform-header module-switchaccount="true/false"></platform-header>
Determines the redirect URL for the switch account dialog. Relative URLs should be used.
The following placeholders may be used: [localization] [language] [logicalaccount] [organization] [appname]

Example usage for an app behind the CM.com apps proxy: /[localization]/app/[appname]/[logicalaccount]
Default: /[localization]/app/[appname]/[logicalaccount].
<platform-header module-switchaccount-path="/[localization]/app/[appname]/[logicalaccount]"></platform-header>
Enables forcing of logical account selection, if no account GUID is provided, dialog is forced open and is not closeable.
Default: false.
<platform-header force-logicalaccount="true"></platform-header>
Enables forcing of organization selection, if no organization ID is provided, dialog is forced open and is not closeable.
Default: false.
<platform-header force-organization="true"></platform-header>
Loads the translations for a specific translation-scope (scopes are shown at the translations page).
Default: none.
<platform-header translation-scope="scope"></platform-header>
Removes the webchat button.
<body class="no-cm-chat"></body>
Removes the demobanner (when the logicalAccount is set and the BillingType is DEMO).
<body class="platform-hide-demobanner"></body>
Set a custom banner url (when the logicalAccount is set and the BillingType is DEMO). Default: //[localization]/app/shop/[logicalaccount].
<platform-header trial-banner-url="https://mycustomurl.nl"></platform-header>
Set a custom banner message (when the logicalAccount is set and the BillingType is DEMO). Default: the translation of 'DemoBanner.Message'.
<platform-header trial-banner-text="This is the trial banner message"></platform-header>
Returns all the data in JSON. Easy for debugging.
<platform-header return-json></platform-header>
Sets the URL of the trial banner for accounts in DEMO state.
<platform-header trial-url="URL"></platform-header>
Turns off the profile language suggestion flag in the platform header. Default: true.
<platform-header profile-language-suggestion="false"></platform-header>

Events

  • loaded :

    The 'loaded' event is emitted by the platform-header when it is done loading.
    The 'detail' of this event will contain the SSO and the Account object.
    Loading...

Methods

  • getCmSSO() :

    Returns the logged in SSO Object (only available after the loaded event)
    Loading...
  • getCmAccount() :

    Returns the selected CM Account Object (only available after the loaded event)
    Loading...
  • openCmAccountDialogue:

    Opens the CM Account Dialogue (only available after the loaded event and when accounts are known)
  • getTranslations() :

    Returns the translations for the scope that's used as translation-scope attribute.
    Loading...
  • setCmHelpcenterUrl(url) :

    sets the helpcenter url in the header to the desired value (only available after the loaded event)
  • setCmSwitchAccountUrl(url) :

    sets the switch account url on the fly, this comes in handy for SPA's, where you may want to change the switch account dialog URL to a different 'page' in your SPA.
  • cmReloadHeader() :

    reloads the header on the fly, as if it's loaded for the first time, this combined with cmInvalidate() makes sure you can reload the header with fresh data without refreshing the page.
  • cmInvalidate(type) :

    invalidates the cache of the different objects in the platform header
    possible types:
    • - all (default when not set)
    • - logicalaccount
    • - organization
    • - identity