How to add a plugin on the right panel of ONLYOFFICE Docs

Customization enhances your productivity by allowing you to tailor tools to your needs. With the latest update, ONLYOFFICE plugins offer even more flexibility. In the previous article, we demonstrated how to display a plugin as a tab. Another valuable customization option allows you to position the plugin panel on either the left or right side of the editor. In this blog post, we’ll dive into this feature and guide you step by step on how to implement it.

What changed?

Previously, the config.json file used several parameters to manage the plugin’s functionality and determine its display within the editor such as: isInsideMode, isModal, isSystem, isVisual and menu.

Now, the older parameters used in the config.json file have been replaced with a single parameter: type. This new parameter simplifies plugin configuration by offering the following options:

• system: A system-level plugin that is always active and cannot be disabled.
• background: A background plugin that runs continuously once started. Its state (enabled/disabled) persists between sessions.
• window: A plugin that operates as a standalone window upon launch.
• panel: A plugin that opens in the left-side panel.
• panelRight: A plugin that opens in the right-side panel.
• unvisible: A plugin that is invisible upon startup.

In this blog post, we will take a closer look at the panelRight option, which allows us to position the panel on the right side of the editor.

How to implement

As an example, we’ll use the Zotero plugin, which enables the creation of bibliographies using the Zotero service. After successfully installing the plugin, we navigate to the Zotero plugin folder within the sdkjs-plugins directory and modify the config.json file. We take the deprecated parameters:

 "isVisual": true,
 "isModal": false,
 "isInsideMode": true,

And replace them with:

 "type": "panelRight",

The edited config.json file might look as follows:

{
    "name": "Zotero",
    "nameLocale": {
        "ru": "Zotero",
        "fr": "Zotero",
        "es": "Zotero",
        "pt-BR": "Zotero",
        "de": "Zotero"
    },
    "guid": "asc.{BFC5D5C6-89DE-4168-9565-ABD8D1E48711}",
    "version": "1.0.3",
    "minVersion": "7.3.3",
    "variations": [
        {
            "description": "Create bibliographies in the required style using Zotero service.",
            "descriptionLocale": {
                "ru": "Оформляйте библиографические списки в нужном стиле с помощью Zotero.",
                "fr": "Créez des bibliographies dans le style nécessaire avec Zotero.",
                "es": "Cree bibliografías en el estilo requerido utilizando el servicio Zotero.",
                "pt-BR": "Crie bibliografias no estilo desejado usando o serviço Zotero.",
                "de": "Erstellen Sie Literaturverzeichnisse im gewünschten Stil mittels Zotero."
            },
            "url": "index.html",
            "icons": [
                "resources/light/icon.png",
                "resources/light/icon@2x.png"
            ],
            "icons2": [
                {
                    "style": "light",
                    "100%": {
                        "normal": "resources/light/icon.png"
                    },
                    "125%": {
                        "normal": "resources/light/icon@1.25x.png"
                    },
                    "150%": {
                        "normal": "resources/light/icon@1.5x.png"
                    },
                    "175%": {
                        "normal": "resources/light/icon@1.75x.png"
                    },
                    "200%": {
                        "normal": "resources/light/icon@2x.png"
                    }
                },
                {
                    "style": "dark",
                    "100%": {
                        "normal": "resources/dark/icon.png"
                    },
                    "125%": {
                        "normal": "resources/dark/icon@1.25x.png"
                    },
                    "150%": {
                        "normal": "resources/dark/icon@1.5x.png"
                    },
                    "175%": {
                        "normal": "resources/dark/icon@1.75x.png"
                    },
                    "200%": {
                        "normal": "resources/dark/icon@2x.png"
                    }
                }
            ],
            "isViewer": false,
            "EditorsSupport": [
                "word"
            ],
            "initDataType": "text",
            "initData": "",
            "type": "panelRight",
            "isUpdateOleOnResize": false,
            "initOnSelectionChanged": false,
            "store": {
                "background": {
                    "light": "#2D3037",
                    "dark": "#2D3037"
                },
                "screenshots": [
                    "resources/store/screenshots/screen_1.png",
                    "resources/store/screenshots/screen_2.png"
                ],
                "icons": {
                    "light": "resources/store/icons",
                    "dark": "resources/store/icons"
                },
                "categories": [
                    "specAbilities"
                ]
            }
        }
    ]
}

After completing all the modifications, your plugin may look like this:

Note! To position the panel on the left side, update the panelRight option to panel.

We hope this blog post was helpful in understanding how to customize your plugins within ONLYOFFICE. At ONLYOFFICE, we strive to make our products more user-friendly and customizable so that they meet your precise needs. This includes giving you the flexibility to tailor plugins according to your workflow.

We encourage you to explore developing your own plugins, and we are always open to any questions or suggestions you might have. Collaboration and discussion are welcome as we continue to enhance the ONLYOFFICE experience together. Best of luck in your exploratory endeavors!