User Interface Customization

The UI can be customized using an external file.

The file format of the customization file is JSON. If the customization file is provided as a part of the custom static resource, the file must be named customization.json and placed in the top-level folder. The file should contain a single object. The object members are individual customization rules, where the member name is the selected attribute and the member value is the customization value. See the section, Running TIBCO Enterprise Administrator SDK Agent Library in Server mode.
Caution: If there are errors in the customization.json file, you will not be able to register agents. In such cases, stop the TIBCO Enterprise Administrator server, delete the data folder, restart the server, and then register the agent.
Note: Java/C++ style comments (both '/'+'*' and '//') are supported in customization.json file.

Syntax for the customization rules: 

<Object Type Name>#<Operation Name>#<Method Type>.<Parameter Name>

Syntax for the customization of references: 

<Object Type Name>@<TeaReference Name>

The following is an example for customizing the references in the EMS sample provided with the product: 

 "EMS" : {
        "label": "TIBCO Enterprise Messaging Service",
        "app" : {
            "name": "ems-app", 
            "modules": {
                "$strap.directives": "/tea/vendor/angularstrap/angular-strap.min.js",
                "ems": "scripts/ems.js"
            }
        },
        "views": {
            "default": {
                "template": "partials/ems.html",
                "app": "ems-app"
            }
        }
    },
    
    "EMS#registerEmsServer#UPDATE": {
   	    "label": "Register EMS Server"
    },
    
     "EMS#registerEmsServer#UPDATE.serverName": {
   	    "label": "EMS Server Name"
    },
    
    
    "EMS@members": {
        "title": "Servers",
        "columns": [
            { "label": "name", "expr": "name", "entityLink": true },
            { "label": "version",  "expr": "config.versionInfo" },
            { "label": "status",  "expr": "status.state" }
        ]
    },
    "server@queues": {
        "title": "Queues",
        "columns": [
            { "label": "name", "expr": "name", "entityLink": true },
            { "label": "pending message count",  "expr": "config.pendingMessageCount" },
            { "label": "pending message size",  "expr": "config.pendingMessageSize" }
        ]
    },
    "server@topics": {
        "title": "Topics",
        "columns": [
            { "label": "name", "expr": "name", "entityLink": true },
            { "label": "pending message count",  "expr": "config.pendingMessageCount" },
            { "label": "pending message size",  "expr": "config.pendingMessageSize" }
        ]
    }
}

code explanation:

  • "EMS@members": is the reference for the object type server
  • "title": "Servers": is the custom title which can also be defined using the "label" flag
  • "columns": indicates the number of columns. In this case, it is 3.
    • "label": is the title of the column.
    • "expr": is the content in the column.
    • "entityLink" is a toggle that can be either true or false. Indicates that a cell can be displayed as a link to an entity page.
The following additional properties can be set:
  • "collapsed": this property can be set on a reference. If set, the panel containing the reference will be collapsed, on display.
  • "referenceOrderIs": is the order in which a reference is displayed. For example, "referenceOrderIs": ["foo", "bar"] indicates that "foo" is displayed before "bar".
  • "confirm": this property can be set on an operation. If set to false, the confirmation dialog is skipped.
Note: @Customize(value="confirm:false") is not applicable for operations on TopLevelObject type.

Usage

{
    "CustomUI" : {
        "app" : {
            "name": "custom",
            "modules": {
                "dependency" : "scripts/dependency.module.js",
                "test" : "scripts/test.module.js"
            },
            "libraries" : ["scripts/test.library.js"],
            "stylesheets" : ["css/test.css", "css/test1.css"]
        },
        "views" : {
            "default": {
                "template": "mypage.html",
                "app": "custom"
            }
        }
    },
    "CustomApp" : {
        "views" : {
            "default": {
                "template": "mygrouppage.html",
                "app": "custom"
            }
        }
    }
}
where the customization properties are as follows:
Property Description
app Configures an AngularJS application.

The app property is only supported by an instance of TopLevelObject.The property takes the following values:

  1. name: defines the name of the application, will default to the name of the TopLevelObject.
  2. libraries: an array of paths of javascript files. Paths are relative to the static resource folder. Libraries are loaded before the modules get loaded. They are loaded in the order they occur in the array.
  3. modules: is a map that maps module names to the path of the javascript file that point to the module. Paths are relative to the static resource folder. Modules are loaded after libraries.
  4. stylesheets: an array of paths of css files. Paths are relative to the static resource folder. Stylesheets are loaded before the app is initialized and they maintain the order of the array.
views Applies to all object types. The value taken by this property is a Map. The map maps the view to the view definition as an object. The view definition contains the following properties:
  1. template: path to the HTML partial to load in the page. Paths are relative to the static resource folder.
  2. app: name of the app defined by the agent.
label Applies to all object types. The value is the name of the object to be displayed on the UI. The label of the TopLevelObject is used as the product name.

Configuring multiple .js files in customization.js

Use an array to configure more than one .js file in the customization.js file. For example, in the EMS sample provided above, you would configure multiple files as follows: 
"ems": ["scripts/ems.js", "scripts/ems1.js", "scripts/ems2.js"]

The files must be listed in the correct order of dependency. In the example above, ems.js is the main file, so it should be mentioned first in the array. ems2.js is dependent on ems1.js, so ems2.js must be placed after ems1.js. If there are no dependencies, the files can be listed in any order.