12 Client-Side Add-Ons

Apps provide an easy way to customise and extend Oracle Communications Operations Monitor with capabilities that are not currently present in the user interface using Javascript and CSS.

You can enable or disable add-ons at login time using the Disable add-ons check box from the login form. The check box label shows the number of enabled extensions that will be loaded (unless the check box is selected), and the tooltip shows the name and the description of each add-on.

Structure of an Add-On

A valid Operations Monitor add-on consists of a manifest.json file and a set of files that will be exposed to the client. The manifest.json file must be a valid JSON file and include the fields found in Table 12-1:

Table 12-1 manifest.json File Required Fields

Field	Description
name	Name of the extension. This name will be used as the extension files path in the server script.
description	Describes the functions of the add-on.
api_version	The current supported API version is "0.1.0".
css	(Optional) List of CSS stylesheets that are included.
js	(Optional) List of Javascript files included.
images	(Optional) List of image files included.

Example:

{
  "name": "customextension',
  "description": "A simple example extension.\n Additional comments can be added here",
  "api_version": "0.1.0",
  "css": ["css1.css", "custom_css.css"],
  "js": ["custom.js", "extension.js"],
  "images": ["logo.png", "image.jpeg", "icon.ico"],
}

Note:

The CSS and JS files will be loaded in the same order as declared in the manifest.json file. They will be loaded after all Operations Monitor libraries. The image files order is not meaningful as they are not pre-loaded.

Packaging

The add-on files must be packed in ZIP format and its filename must use the .zip extension. The resulting ZIP file can contain a root folder. The name of that folder is not meaningful. Such a ZIP archive can be uploaded to the Platform Setup Application using the provided form in the Add-ons page.

Here is a sample directory structure for the ZIP archive:

> tree dashboardportlet/
dashboardportlet/
   css/
      dashboardportlet.css
   js/
      dashboardportlet.js
   manifest.json
  
2 directories, 3 files

Management

In the Add-ons page of the Platform Setup Application, a grid is provided where the system administrators can enable, disable, and sort the extensions load order. Each extension operation in this page will be applied for all ME active instances immediately on the next page reload. Figure 12-1 shows the Add-ons page.

Figure 12-1 Add-ons Page

Description of "Figure 12-1 Add-ons Page"

Code Examples

CSS file:

div.header {
    background-color: #EC0000 !important;
    background-repeat: repeat-x, repeat;
}
  
span#oracleProductName {
    background-image: url('/me/addons/redstyle/images/logo.png');
    height: 46px;
    background-repeat: no-repeat;
    background-position: right 20px top 10px;
    background-size: 45px 45px;
}

Javascript file:

Ext.onReady(function () {
  
  var log = function() {
    console.log("Page change")
  };
  
  Pld.Application.on("pagechange", log());
});