Customizing Job Monitor

Cell properties

You can change cell properties such as field values. For more information, see the sample external data service: EDS sample for Datacap Navigator.

Column properties

You can change column properties such as the column name and style. You can define the style with a CSS snippet, for example:

background-color: #b0c4de;

Alternatively, you can use a JavaScript function to change column properties. Define a string that is evaluated as a function on the JavaScript side. Set the function to a variable named func, for example:

var func = function(cell){};

Then, define the column style as shown in the following example:

cell.put("style", "background-color: #b0c4de;");
cell.put("style", "var func = function(cell){var data = cell.rawData();
if(data==='aborted'){return 'background-color: #ff0000;'}};");

Showing Dojo widgets in cells

You can declare a widget by setting widgetsInCell to true and decorator to a function. For example, the following code displays the ProgressBar dijit in a cell:

cell.put("widgetsInCell",true);
cell.put("decorator", "progressBarDecorator");

progressBarDecorator is a JavaScript function that is used by decorator and can be defined in your IBM® Content Navigator plug-in. You can replace the existing ProgressBar widget with widgets that are defined in your plug-in, for example:

lang.setObject("progressBarDecorator", function(data, rowId, rowIndex) {
   return [
      "<div data-dojo-type='dijit.ProgressBar' data-dojo-props='maximum: 1' ",
      "class='gridxHasGridCellValue' style='width: 100%;'></div>"
   ].join('');
});

The Job Monitor GridX widget uses the cells object in the payload as a column structure definition. By default, the cells object does not include extra columns. When you update the properties of an extra column in EDS, you must add the column to the cells object manually. If you are working with a default column that is already defined in the cells object, simply update the column.