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);
});