For displaying notifications in CoreMedia Studio, three levels are distinguished:

Levels 1 and 2 are considered as the typical cases for displaying notifications. For these, CoreMedia offers default components. However, in certain cases it might be necessary or desired to develop a more refined notification UI.

Level 1: Simple Notification Display

For just displaying a notification in terms of an icon and a text message, you simply have to provide an icon class property and a text key property. These properties must match the patterns Notification_{notificationType}_iconCls and Notification_{notificationType}_{notificationKey}_msg respectively. For the example of a publication workflow notification from above, the properties look as follows:

Notification_publicationWorkflow_iconCls : CollaborationIcons_properties.start_publication_workflow,
Notification_publicationWorkflow_offered_msg : "The publication workflow \"{0}\" is new in your inbox."

In this example, the message property has a placeholder. By default, the parameters of the notification (see notification creation above) are inserted in the placeholders one after the other. Consequently, the parameters have to be of type string. However, it is also possible to compute the placeholder insertions from the notification's parameters (for example, if you have a complex bean as a parameter that should be the basis for all placeholder insertions). In this case your notification's Studio component (see below) has to implement the interface TextParametersPreProcessor.

You define your properties in your own resource bundle (WorkflowNotifications_properties.ts, for instance) and have to make sure to copy it onto the resource bundle Notifications_properties.ts which is provided by CoreMedia:

import Config from "@jangaroo/runtime/Config";
import ConfigUtils from "@jangaroo/runtime/ConfigUtils";
import resourceManager from "@jangaroo/runtime/l10n/resourceManager";
import CopyResourceBundleProperties from "@coremedia/studio-client.main.editor-components/configuration/CopyResourceBundleProperties";
import StudioPlugin from "@coremedia/studio-client.main.editor-components/configuration/StudioPlugin";
import Notifications_properties from "@coremedia/studio-client.main.notification-studio-client/Notifications_properties";
import WorkflowNotifications_properties from "./WorkflowNotifications_properties";

class MyStudioPlugin extends StudioPlugin {

  constructor(config:Config<StudioPlugin>){
    super(ConfigUtils.apply(Config(MyStudioPlugin, {
      rules: [
      ],

      configuration: [
        new CopyResourceBundleProperties({
          destination: resourceManager.getResourceBundle(null, Notifications_properties),
          source: resourceManager.getResourceBundle(null, WorkflowNotifications_properties),
        }),
      ],
    }), config));
  }
}

export default MyStudioPlugin;

Level 2: Simple Notification Display with Click Action

In many cases it is not enough to just display a notification. Normally, a notification is a request to the user to do something. So it should be possible to click the notification and be directed to the part of Studio where the user can do something about it.

In order to add an action click handler to your notification, you have to register your own notification component. You always register a notification component for a specific notification type:

import Config from "@jangaroo/runtime/Config";
import ConfigUtils from "@jangaroo/runtime/ConfigUtils";

import StudioPlugin from "@coremedia/studio-client.main.editor-components/configuration/StudioPlugin";
import PublicationWorkflowNotificationDetails from "@coremedia/studio-client.main.control-room-editor-components/notification/components/PublicationWorkflowNotificationDetails";
import RegisterNotificationDetailsPlugin from "@coremedia/studio-client.main.notification-studio-client/RegisterNotificationDetailsPlugin";

class MyStudioPlugin extends StudioPlugin {

  constructor(config: Config<StudioPlugin>) {
    super(ConfigUtils.apply(Config(MyStudioPlugin, {

      rules: [],

      configuration: [
        new RegisterNotificationDetailsPlugin({
          notificationType: "publicationWorkflow",
          notificationDetailsComponentConfig: Config(PublicationWorkflowNotificationDetails),
        }),
      ],
    }), config));
  }
}

export default MyStudioPlugin;

You do not have to do any component developing for level 2. You can simply let your notification component extend DefaultNotificationDetails and add your notification action as its baseAction. You need to let your action extend NotificationAction. This yields numerous benefits like accessing the notification via the method NotificationAction.getNotification(). Consequently, you have also access to all the notification's parameters.

import { mixin } from "@jangaroo/runtime";
import Config from "@jangaroo/runtime/Config";
import ConfigUtils from "@jangaroo/runtime/ConfigUtils";
import DefaultNotificationDetails from "@coremedia/studio-client.main.notification-studio-client/components/DefaultNotificationDetails";
import TextParametersPreProcessor from "@coremedia/studio-client.main.notification-studio-client/components/TextParametersPreProcessor";
import MyNotificationAction from "./MyNotificationAction";

class CustomNotificationDetails extends DefaultNotificationDetails implements TextParametersPreProcessor {

  constructor(config: Config<DefaultNotificationDetails>){
    super((()=> ConfigUtils.apply(Config(CustomNotificationDetails, {
      baseAction: new MyNotificationAction({}),
    }), config))());
  }

  preProcessTextParameters(params: Array<any>): Array<any> {
    return params;
  }
}

mixin(CustomNotificationDetails, TextParametersPreProcessor);

export default CustomNotificationDetails;

Level 3: Custom Notification Display

You are free to develop your own notification component that does not inherit from DefaultNotificationDetails. CoreMedia gives no further guidelines here but point out that your component at least has to inherit from NotificationDetails. You register your custom component just as it was described above.