ISettings

Defines the administrator or owner settings block that is embedded in the side panel of the plugin.

The portal owns the panel around it: the plugin name in the header, the description and metadata below the block, and a Save/Cancel footer.

Example

API key settings panel

import { useEffect, useState } from "react";
import { usePluginSettings } from "@onlyoffice/docspace-plugin-sdk/react";
import { ISettings, Components, ButtonSize } from "@onlyoffice/docspace-plugin-sdk";

type Config = { apiKey: string };

function ApiKeySettings() {
  const settings = usePluginSettings();
  const [apiKey, setApiKey] = useState(() => settings.load<Config>()?.apiKey ?? "");
  const [savedKey, setSavedKey] = useState(apiKey);

  useEffect(() => {
    settings.setSaveButton({
      component: Components.button,
      props: {
        label: "Save",
        size: ButtonSize.small,
        isDisabled: apiKey === savedKey || !apiKey.trim(),
        onClick: async () => {
          await settings.save({ apiKey });
          setSavedKey(apiKey);
        },
      },
    });
  }, [apiKey, savedKey]);

  return <input type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />;
}

const apiKeySettings: ISettings = {
  component: ApiKeySettings,
};

Properties

Property	Type	Description
settings	IBox	Defines the administrator or owner settings rendered via the IBox component tree. Use either settings or component, not both. Deprecated: Use component instead — accepts a React component and supports hooks from @onlyoffice/docspace-plugin-sdk/react.
component	ComponentType	A React component rendered as the settings UI. Use either component or settings, not both. The component can use usePluginActions and other hooks from @onlyoffice/docspace-plugin-sdk/react.
saveButton	ButtonGroup	Defines the button to save the settings
isLoading	boolean	Specifies if the settings block will be displayed as a loader icon or not
onLoad	() => Promise<{ settings?: IBox; saveButton?: ButtonGroup; }>	Defines a function that is triggered whenever the settings block is loaded. Returns a promise with the updated settings box and optional save button. Deprecated: Use a React component via component with useEffect for data loading instead.