Custom Script

You can create a custom script.

With every custom component you create you must use a custom script. Files with custom scripts are specified in the action property of the UI configuration for a component.

Important: Custom script is executed inside the sandbox and does not have access to the DOM tree of the UI client, local storage, or any other parameters directly. However, there is a way to communicate with the UI client and execute different actions. To do this, you must use global object UI in your custom script and call async methods on this object.

General

{
                    "point":"com.reltio.plugins.ui.view",
                    "id":"com.reltio.plugins.entity.bbChartView",
                    "class":"com.reltio.plugins.ui.CustomActionView",
                    "caption":"B2B Integration",
                    "url":"https://cgraph-dev.reltio.com/custom-graph/bbChart?entityUri=",
                    "height":200,
                    "action":{
                    "files":[
                    "https://dl.dropboxusercontent.com/u/465285497/iframe.js"
                    ]
                    }
                    }

In this example, the API path and UI configuration of the current custom component is shown, and then two call alerts on the UI client.

log

UI.log(message);

This method allows a message to be logged.

@param message {String|Object} log message.

setEnabled

UI.setEnabled(value);

This method allows a change to the enabled state of control (must be used only with custom buttons).

@param value {Boolean} is enabled.

setVisibility

UI.setVisibility(value);

This method allows a change in the visibility of the control state.

@param value {String} "visible" | "hidden" | "excluded".

setHtml

UI.setEnabled(value);

Set widget's internal HTML (can be used only with custom view).

@param html {String?} HTML

setChildHtml

UI.setChildHtml(id, html);

Set widget child's internal HTML (can be used only with custom view).

@param id {String} widget child's id.

@param html {String?} HTML.

setHeight

UI.setHeight(height);

Set widget's height (can be used only with custom buttons and views).

@param height {Number?} height in pixels.

setWidth

UI.setWidth(width);

Set widget's width (can be used only with custom buttons and views).

@param height {Number?} width in pixels.

setToolTip

UI.setEnabled(value); 

Set widget's tooltip.

@param toolTip {String?} tool tip.

onAction

UI.onAction(function(){
   //Some code
});

@deprecated: Use UI.onEvent(...) and listen for event "execute" instead.

The entry point of the script. When the all scripts are loaded, then the on action is invoked (can be used only with custom buttons and menu items/actions).

onEvent

UI.onEvent(function(type, data) {
  
});

The entry point of the script when a new event is thrown.

@param type {String} type of event:

  • "execute": when you click a custom button or menu item. "data" is null.
  • "updateEntity": when a new entity is loaded from API. "data" is JSON of the entity.
  • "changeSearchQuery": when search criteria are changed. "data" is string with search query.
  • "changeVisibility": when visibility of custom component is changed. "data" is true or false.
  • "uiAction": when specified ui action occurs on DOM element of custom view. "data" is JSON: {type: uiAction, id: id, event: event}.
    • uiAction: name of action ("click", "mousemove", "mousedown", etc.).
    • id: id of target DOM element.
    • event: clone of javascript event object.

@param data {String} additional data (see above).

getEntityURI

UI.getEntityUri().then(function(entityUri){
   //Code here
});

This method allows a get of the current entity uri.

getEntity

UI.getEntity().then(function(entity){
   //Code here
});

This method allows a get of the current entity.

getApiPath

UI.getApiPath().then(function(apiPath){
   //Code here
});

This method allows a get of the api path url.

getSearchQuery

UI.getApiPath().then(function(apiPath){
   //Code here
});

This method allows a get of the current search query.

getTenant

UI.getTenant().then(function(tenant){
   //Code here
});

The method allows a get of the current tenant name.

getPerspective

UI.getPerspective().then(function(perspective){
   //Code here
});

This method allows a get of the current perspective id.

setPerspective

UI.setPerspective(perspective).then(function(){
   //Code here
});

The method allows a set to the current perspective.

@param perspective {String} perspective id.

setEntityUri

UI.setEntityUri(entityUri).then(function(){
   //Code here
});

This method allows a set to the entity uri.

@param entityUri {String} entity URI.

api

UI.api(url,
method,
tenant,
headers,
data).then(function(response){
   //Code here
});

This method allows a send of the api or external request.

@param url {String} url.

@param method {String?} request method: GET, POST, PUT, DELETE.

@param tenant {String?} tenant.

@param headers {Object?} headers.

@param data {Object|String?} request body.

alert

UI.alert(text).then(function(){
   //Code here
});

This method allows showing the alert box with text.

@param text {String} alert text.

confirm

UI.confirm(text).then(function(response){
   //Code here
});

This method allows showing the confirm box with text.

@param text {String} confirm text.

prompt

UI.prompt(text,
defaultText).then(function(response){
   //Code here
});

This method allows showing the prompt box.

@param text {String} prompt text.

@param defaultText {String?} prompt default value.

getConfiguration

UI.getConfiguration().then(function(jsonApiConfiguration){
   //Code here
});

Get metadata configuration.

getUiConfiguration

UI.getUiConfiguration().then(function(jsonUiConfiguration){
   //Code here
});

Get UI configuration of current custom component.

openSearch

UI.openSearch(searchState).then(function(){
   //Code here
});

Open search screen with some state.

@param searchState {Object?} search state json.