Skip to content

Custom Cell

A Custom Cell is used to update the content of a table cell.

customCell attribute will be used in the table header on the inputs and configuration page.

Properties

Property Description
globalConfig is a hierarchical object that contains the globalConfig file’s properties and values.
el is used to render a custom cell element in a table.
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.
field is the name of the field as specified in the globalConfig file.

Methods

Property Description
render is a method which should have logic for the custom cell component, and it will be executed automatically when the create, edit, or clone actions performed.

Usage

Modify files accordingly:

globalConfig.json

{
    "name": "account",
    "title": "Account",
    "entity": [],
    "table": {
        "actions": ["edit", "delete", "clone"],
        "header": [{
            "label": "Name",
            "field": "name"
        }, {
            "label": "Auth Type",
            "field": "auth_type"
        }, {
            "label": "Test Custom Cell",
            "field": "test_custom_cell",
            "customCell": {
                "src": "CustomInputCell",
                "type": "external"
            }
        }]
    }
}

Component Example

Index.tsx

import React from "react";
import { CustomCellBase, GlobalConfig, RowDataFields } from "@splunk/add-on-ucc-framework";
import ReactDOM from "react-dom";

const CustomDateInput = React.lazy(() => import("./AdvancedCell.tsx"));

export default class AdvancedCellClass extends CustomCellBase {
  constructor(
    globalConfig: GlobalConfig,
    serviceName: string,
    el: HTMLElement,
    row: RowDataFields,
    field: string
  ) {
    super(globalConfig, serviceName, el, row, field);
  }

  render() {
    ReactDOM.render(
      <React.Suspense fallback={<div>Loading ...</div>}>
        <CustomDateInput value={this.row.account_multiple_select} />
      </React.Suspense>,
      this.el
    );
  }
}

AdvancedCell.tsx

import React from "react";
import { AcceptableFormValueOrNull } from ".";
import { SplunkThemeProvider } from "@splunk/themes";

export const AdvancedCell = ({
  value,
}: {
  value: AcceptableFormValueOrNull;
}) => {
  return (
    <SplunkThemeProvider>
      <div>
        {value === null || value === undefined || value === "" ? (
          <span>No value</span>
        ) : (
          <span>{String(value)}</span>
        )}
      </div>
    </SplunkThemeProvider>
  );
};

export default AdvancedCell;

ucc-ui.ts

import { uccInit } from "@splunk/add-on-ucc-framework";
import AdvancedCellClass from "./ucc-ui-extensions/AdvancedCell";

uccInit({
  AdvancedInputsTab: {
    component: AdvancedCellClass,
    type: "cell",
  },
}).catch((error) => {
  console.error("Could not load UCC", error);
});