Skip to main content

Context menu plugin

This guide walks you through creating a basic plugin for ONLYOFFICE Apps that adds an item to the file context menu and logs an action when clicked.

Before you start​

Make sure you have an ONLYOFFICE Apps server running, and install ONLYOFFICE Apps Plugins SDK globally:

npm i -g @onlyoffice/docspace-plugin-sdk

Step 1: Create a plugin​

  1. Initialize your plugin using the CLI:

    npx create-docspace-plugin

  2. Fill out basic metadata: plugin name, version, author, description, logo, license, homepage.

  3. Select the required scopes from the list of available options. Use the arrow keys to highlight Context menu, press Space to select it, then press Enter to confirm and generate the plugin template.

Step 2: Confirm plugin configuration​

Ensure package.json includes all the necessary fields. Most importantly, make sure it contains:

{
  "scopes": ["ContextMenu"]
}

Step 3: Review and extend plugin code​

By default, the plugin template includes a basic implementation in the src/index.ts file. Here's an example of a context menu plugin:

import {
  IPlugin,
  PluginStatus,
  IContextMenuPlugin,
  IContextMenuItem,
  FilesType,
  Devices,
  UsersType
} from '@onlyoffice/docspace-plugin-sdk'

class Contextmenu implements IPlugin, IContextMenuPlugin {
  status: PluginStatus = PluginStatus.active;
  contextMenuItems: Map<string, IContextMenuItem> = new Map();

  onLoadCallback = async () => {};

  updateStatus = (status: PluginStatus) => { this.status = status };
  getStatus = () => this.status;
  setOnLoadCallback = (callback: () => Promise<void>) => { this.onLoadCallback = callback };
  addContextMenuItem = (item: IContextMenuItem) => { this.contextMenuItems.set(item.key, item) };
  getContextMenuItems = () => this.contextMenuItems;
  getContextMenuItemsKeys = () => Array.from(this.contextMenuItems).map(([key]) => key);
  updateContextMenuItem = (item: IContextMenuItem) => { this.contextMenuItems.set(item.key, item) };
}

const plugin = new Contextmenu();

declare global {
  interface Window {
    Plugins: any;
  }
}

window.Plugins.Contextmenu = plugin || {};
export default plugin;

Step 4: Add a context menu item​

Create a context menu item and append it to the end of the script:

const contextMenuItem: IContextMenuItem = {
  key: "convert-file-item",
  label: "Do something",
  icon: "icon.svg",
  onClick: (id: number) => {
    console.log("Context Menu works!")
  },
  fileType: [FilesType.file],
  devices: [Devices.desktop, Devices.mobile, Devices.tablet],
  usersTypes: [UsersType.owner, UsersType.docSpaceAdmin, UsersType.roomAdmin],
};

plugin.addContextMenuItem(contextMenuItem);

Step 5: Build the plugin​

From the root of your plugin, run the following command:

npm run build

This compiles src/index.ts to dist/plugin.js.

Step 6: Upload to ONLYOFFICE Apps​

  1. Log in as an administrator.
  2. Navigate to: Settings → Integration → Plugins.
  3. Click Upload plugin, and select the generated dist/plugin.zip.
  4. Enable the plugin toggle if it is not already active.

Step 7: Test the plugin​

  1. Go to any room.
  2. Right-click on a file.
  3. Look for your context menu item titled Do something.
  4. Click it - it should log "Context Menu works!" in the browser console.

Notes​

  • You can define multiple context items using different keys.
  • Use the fileType, devices, and usersTypes fields to control visibility.
  • The onClick function receives the selected file's ID.