Creating a profile menu plugin
This guide walks you through creating a plugin for DocSpace that adds a custom item to the user profile dropdown menu and performs an action when clicked.
Before you start
Make sure you have a DocSpace server running, and install DocSpace Plugins SDK globally:
npm i -g @onlyoffice/docspace-plugin-sdk
Step 1: Create a plugin
-
Initialize your plugin using the CLI:
npx create-docspace-plugin
-
Fill out basic metadata: plugin name, version, author, description, logo, license, homepage.
-
Select the required scopes from the list of available options. Use the arrow keys to highlight
Profile menu
, pressSpace
to select it, then pressEnter
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": ["ProfileMenu"]
}
Also verify that the scripts/createZip.js
file is present. This script will:
- compile your plugin;
- package everything into
dist/plugin.zip
.
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 profile menu plugin:
import { IPlugin, PluginStatus, IProfileMenuPlugin, IProfileMenuItem } from '@onlyoffice/docspace-plugin-sdk'
class Profilemenuitem implements IPlugin, IProfileMenuPlugin {
status: PluginStatus = PluginStatus.active;
profileMenuItems: Map<string, IProfileMenuItem> = new Map();
onLoadCallback = async () => {};
updateStatus = (status: PluginStatus) => {
this.status = status;
};
getStatus = () => {
return this.status;
};
setOnLoadCallback = (callback: () => Promise<void>) => {
this.onLoadCallback = callback;
};
addProfileMenuItem = (item: IProfileMenuItem): void => {
this.profileMenuItems.set(item.key, item);
};
getProfileMenuItems = (): Map<string, IProfileMenuItem> => {
return this.profileMenuItems;
};
updateProfileMenuItem = (item: IProfileMenuItem): void => {
this.profileMenuItems.set(item.key, item);
};
}
const plugin = new Profilemenuitem();
declare global {
interface Window {
Plugins: any;
}
}
window.Plugins.Profilemenuitem = plugin || {};
export default plugin;
Step 4: Add a profile menu item
Create a profile menu item and append it to the end of the script:
// Add this after generating the plugin
const ProfileMenuItem: IProfileMenuItem = {
key: "profile-menu-plugin",
label: "Profile menu item",
icon: "icon.svg",
onClick: () => {
console.log("Profile menu item clicked");
},
};
plugin.addProfileMenuItem(ProfileMenuItem);
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
and runs scripts/createZip.js
to bundle everything into dist/plugin.zip
.
Step 6: Upload to DocSpace
- Log in as an administrator.
- Navigate to: Admin Panel → Integration → Plugins.
- Click Upload, and select the generated
dist/plugin.zip
. - Enable the plugin toggle if it is not already active.
Step 7: Test it
- Go to the bottom-left corner of the DocSpace interface.
- Click
next to your profile (avatar).
- A dropdown menu will appear.
- Look for your custom menu item titled
Profile menu item
.
Notes
- You can add multiple items via
addProfileMenuItem
. - The
onClick
function is a good place to trigger modals, open side panels, or call APIs. - You can extend this plugin to support other scopes like
MainButton
,Settings
, orContextMenu
by updating thepackage.json
and plugin logic accordingly.