Custom Row
When a row is expanded on the Inputs 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 | it the object of the record for which the CustomRowInput constructor is called. |
Methods¶
Property | Description |
---|---|
render | is a method which should have logic for the custom row component, and it will be executed automatically when the create, edit, or clone actions are performed. |
Usage¶
"inputs": {
"title": "Inputs",
"description": "Manage your data inputs",
"services": [],
"table": {
"actions": ["edit", "enable", "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.
*/
constructor(globalConfig, serviceName, el, row) {
this.globalConfig = globalConfig;
this.serviceName = serviceName;
this.el = el;
this.row = row;
}
render() {
const content_html_template = 'Custom Input Row';
this.el.innerHTML = content_html_template;
return this;
}
}
export default CustomInputRow;
Note: 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: