Custom Tab

Custom Tab feature can be used to render any customized UI component in the Configuration tabs. With this feature, you can design and render any complex input with ease. This is an advanced feature and can be leveraged with limitless functionalities. Modern add-ons are receiving complex use cases and this feature will allow you to design the UI perfectly for your case without having to depend on newer releases of UCC for support.

Properties

Property	Description
tab	is an object with the properties and values of a custom tab object from the global config file.
el	is used to render a customized component on the Configuration tabs.

Methods

Property	Description
render	is a method which should have logic for the custom component, and it will be executed automatically when the configuration page is rendered.

Usage

"configuration": {
    "title": "Configuration",
    "descriptions": "Set up your add-on",
    "tabs": [
        {
            "name": "account",
            "title": "Account",
            "entity": [],
            "table": {}
        },
        {
            "name": "logging",
            "title": "Logging",
            "entity": []
        },
        {
            "name": "proxy",
            "title": "Proxy",
            "entity": []
        },
        {
            "name": "custom_tab",
            "title": "Customized Tab",
            "customTab": {
                "src": "custom_tab",
                "type": "external"
            }
        }
    ]
}

Example

index.tsx

import React from "react";
import ReactDOM from "react-dom";

import { CustomTabBase } from "@splunk/add-on-ucc-framework";

const CustomAdvancedInputsTab = React.lazy(
  () => import("./AdvancedInputsTab.tsx"),
);

export default class AdvancedInputsTabClass extends CustomTabBase {
  render(): void {
    ReactDOM.render(
      <React.Suspense fallback={<div></div>}>
        <CustomAdvancedInputsTab />
      </React.Suspense>,
      this.el,
    );
  }
}

AdvancedInputsTab.tsx

import React from "react";
import Table from "@splunk/react-ui/Table";
import { SplunkThemeProvider } from "@splunk/themes";

import Message from "@splunk/react-ui/Message";

export function AdvancedInputsTab() {
  const { data, error } = {
    error: { message: "No data" },
    data: { entry: [] },
  }; // Replace with actual data fetching logic

  const inputs = data?.entry;

  return (
    <SplunkThemeProvider>
      {error && <Message type="error">{error.message}</Message>}
      {data && (
        <Table>
          <Table.Head>
            <Table.HeadCell>Name</Table.HeadCell>
            <Table.HeadCell align="right">Interval</Table.HeadCell>
            <Table.HeadCell>Account</Table.HeadCell>
          </Table.Head>
          <Table.Body>
            {inputs?.map(
              (row: {
                name: string;
                content: {
                  disabled: boolean;
                  interval: string;
                  account: string;
                };
              }) => (
                <Table.Row key={row.name} disabled={row.content.disabled}>
                  <Table.Cell>{row.name}</Table.Cell>
                  <Table.Cell align="right">{row.content.interval}</Table.Cell>
                  <Table.Cell>{row.content.account}</Table.Cell>
                </Table.Row>
              )
            )}
          </Table.Body>
        </Table>
      )}
    </SplunkThemeProvider>
  );
}

export default AdvancedInputsTab;

ucc-ui.ts

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

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