Skip to content

Custom Row

When a row is expanded on the Inputs table or Configuration Table, Custom Row is utilized to incorporate a customized element. By clicking on the icon provided on the left side of each row, the input-specific details are displayed.

Properties

Property Description
globalConfig is a hierarchical object that contains the globalConfig file’s properties and values.
el is used to render a customized element on the Inputs table when a row is expanded.
serviceName is the name of the service/tab specified in the globalConfig file.
row is the object of the record for which the CustomRowInput constructor is called.

Methods

Property Description
render is a method which contains the logic to display the custom row component. This method is automatically executed when the row is expanded
getDLRows is a method which contains the logic to update the custom row values, return a key-value pair.

Note

  • Atleast one method should be present
  • If both method is present then the getDLRows method have the high priority.

Usage

"inputs": {
    "title": "Inputs",
    "description": "Manage your data inputs",
    "services": [],
    "table": {
        "actions": ["edit", "delete", "clone"],
        "header": [],
        "customRow": {
            "src": "custom_input_row",
            "type": "external"
        }
    }
}

Example

class CustomInputRow {
  /**
   * Custom Row Cell
   * @constructor
   * @param {Object} globalConfig - Global configuration.
   * @param {string} serviceName - Input service name.
   * @param {element} el - The element of the custom cell.
   * @param {Object} row - custom row object,
   *     use this.row.<field_name>, where <field_name> is a field name
   */
  constructor(globalConfig, serviceName, el, row) {
    this.globalConfig = globalConfig;
    this.serviceName = serviceName;
    this.el = el;
    this.row = row;
  }

  getDLRows() {
    return Object.fromEntries(
      Object.entries(this.row).map(([key, value]) => [
        key,
        key === "interval" ? `${value} sec` : value,
      ])
    );
  }

  render() {
    const content_html_template = "Custom Input Row";
    this.el.innerHTML = content_html_template;
    return this;
  }
}

export default CustomInputRow;

Note:

  • The content should be included in the JavaScript file named by customRow.src property in globalConfig (see usage for details).
  • The Javascript file for the custom control should be saved in the custom folder at appserver/static/js/build/custom/.

Output

This is how it looks in the UI:

image