UI File

The UI file defines how the node will appear in the editor and all the details in the configuration panel. You can review this page to remember the information about the contents of the configuration panel. The UI file defines the rest of the skeleton except for the function of the node. With the UI file, you define:

• Event inputs and outputs
• Value input parameters
• Value outputs
• Function class of the node
• Configuration panel functions

All types can be accessed from the link below. Node.data should be taken as basis when creating the node's ui file.

UI Object types

Let's take the HTTP Request node as an example again:

The appearance of the node in the editor:

Configuration Panel of the node:

To create this node in the editor, your .ui.ts file should look like this:

import { Node } from "../../types";
import HttpRequest from "./HttpRequest.node.ts";

const HTTP_REQUEST: Node["data"] = {
  ioEngine: {
    targetCount: 1,
    sourceCount: 1,
    dynamicInput: true,
    dynamicOutput: true,
  },
  statusHandles: {
    outputs: {
      start: true,
      end: true,
      error: true,
    },
  },
  configParameters: [
    {
      tab: "HTTP Section",
      groups: [
        {
          name: "Request",
          formData: [
            {
              type: "text",
              name: "url",
              label: "Url:",
              placeholder: "Enter your url",
              defaultValue: "https://www.google.com.tr",
              required: false,
              area: true,
            },
            {
              type: "radio",
              name: "m-e-t",
              label: "Request Method:",
              required: true,
              options: [
                {
                  value: "get",
                  label: "GET",
                },
                {
                  value: "post",
                  label: "POST",
                },
                {
                  value: "put",
                  label: "PUT",
                },
                {
                  value: "delete",
                  label: "DELETE",
                },
              ],
            },
          ],
        },
        {
          name: "Server",
          formData: [
            {
              type: "text",
              name: "server",
              label: "Server:",
              placeholder: "Enter your server name",
              defaultValue: "localhost",
              required: true,
            },
            {
              type: "text",
              name: "apiKey",
              label: "API Key:",
              placeholder: "Enter your API Key",
              required: true,
            },
          ],
        },
      ],
    },
  ],
  inputParameters: {
    url: "string",
  },
  outputValues: {
    response: "any",
  },
  ui: {
    label: "HTTP Request",
    category: "Network",
    icon: "HttpRequest.icon.svg",
  },
  class: HttpRequest,
};

export default HTTP_REQUEST;

The type of all node ui objects is Node["data"]. Based on this example, ui files of other nodes can be created. As can be seen, ui files are used to define the appearance of the node in the editor, the input and output numbers and types, and the appearance and content of the configuration panel. There are tables and groups under them in the configuration panel. You can categorize your configurations by creating as many tabs and groups as you want using the API, and customize the appearance of the configuration panel. We recommend that you take a look at the UI Object types file for more details.