Open topic with navigation

TIBCO® Enterprise Administrator 2.4.2

# 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 must 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 cannot 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 is 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: name: defines the name of the application, defaults to the name of the TopLevelObject. 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. 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. 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: template: path to the HTML partial to load in the page. Paths are relative to the static resource folder. 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 must 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.

Subtopics

Did you find this helpful?

Yes No
Great!
Thanks for taking the time to give us some feedback.
Sorry about that

Why wasn't this helpful? (check all that apply)

Could not find what I was looking for
Instructions confusing or unclear
Instructions did not work

Want to tell us more?

Please select at least one option or provide details about the issue!!

Error occurred while submitting feedback.

Error2 occurred while submitting feedback.

TIBCO® Enterprise Administrator

Copyright © 1996-2025. Cloud Software Group, Inc. All Rights Reserved.