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¶
globalConfig.json
"inputs": {
"title": "Inputs",
"description": "Manage your data inputs",
"services": [],
"table": {
"actions": ["edit", "delete", "clone"],
"header": [],
"customRow": {
"src": "custom_input_row",
"type": "external"
}
}
}
Example¶
index.tsx
import { CustomRowBase, RowDataFields } from "@splunk/add-on-ucc-framework";
import React from "react";
import ReactDOM from "react-dom";
const AdvancedRow = React.lazy(() => import("./AdvancedRow"));
export default class AdvancedRowClass extends CustomRowBase {
getDLRows(): RowDataFields {
return {
...this.row,
...Object.fromEntries(
Object.entries(this.row).map(([key, value]) => [
key,
key === "interval" ? `${value} sec` : value,
])
),
};
}
render(): void {
ReactDOM.render(
<React.Suspense fallback={<div></div>}>
<AdvancedRow row={this.row} />
</React.Suspense>,
this.el
);
}
}
AdvancedRow.tsx
import React from "react";
import { SplunkThemeProvider } from "@splunk/themes";
import { RowDataFields } from "@splunk/add-on-ucc-framework";
import Table from "@splunk/react-ui/Table";
export const AdvancedRow = ({ row }: { row: RowDataFields }) => {
return (
<SplunkThemeProvider>
<Table.Row>
{Object.entries(row).map(([key, value]) => {
// Skip the __toggleShowSpinner field
if (key === "__toggleShowSpinner") {
return null;
}
// Render each field in a Table.Cell
return (
<Table.Cell key={key} data-testid={`cell-${key}`}>
{typeof value === "object" && value !== null
? JSON.stringify(value)
: String(value)}
</Table.Cell>
);
})}
</Table.Row>
</SplunkThemeProvider>
);
};
export default AdvancedRow;
ucc-ui.tsx
import { uccInit } from "@splunk/add-on-ucc-framework";
import AdvancedRow from "./ucc-ui-extensions/AdvancedRow";
uccInit({
AdvancedRow: {
component: AdvancedRow,
type: "row",
},
}).catch((error) => {
console.error("Could not load UCC", error);
});