Custom Plugin
Table of contents
Overview
This guide explains how to create a custom plugin for CloudBeaver. It walks you through the process of adding a simple button to the application’s top bar.
Creating a custom plugin
Follow these steps to create a custom plugin that adds a button to the top bar and logs
Hello, World!
Create plugin folder
Inside
, create a folder with your desired name, e.g.,/webapp/packages.plugin-hello-world
Copy configuration files
Copy the following files from any existing package into your plugin folder:
-
.gitignore
-
package.json
-
tsconfig.json
-
Update package.json
- Open
and update thepackage.jsonfield to your plugin’s name,name.@cloudbeaver/plugin-hello-world
Remove the
anddependenciessections.devDependencies
Update tsconfig.json
Remove the
section fromreferences.tsconfig.json
Create source files
- Inside your plugin folder, create a
folder.src
- Add two files in
:src
-
index.ts
-
manifest.ts
-
Export the manifest from
:index.tsexport * from './manifest.js';
Create a service
- Create a service to add the button.
- It should:
- Be an injectable class.
- Extend the
class.Bootstrap
- Add a
method and implement the button-adding logic.register
Example service:
import { Bootstrap, injectable } from '@cloudbeaver/core-di';
import { ActionService, MenuService } from '@cloudbeaver/core-view';
import { MENU_APP_ACTIONS } from '@cloudbeaver/plugin-top-app-bar';
import { ACTION_HELLO_WORLD } from './ACTION_HELLO_WORLD.js';
@injectable()
export class HelloWorldService extends Bootstrap {
constructor(
private readonly actionService: ActionService,
private readonly menuService: MenuService,
) {
super();
}
override register(): void {
this.menuService.addCreator({
menus: [MENU_APP_ACTIONS],
getItems: (context, items) => [...items, ACTION_HELLO_WORLD],
});
this.actionService.addHandler({
id: 'hello-world-handler',
actions: [ACTION_HELLO_WORLD],
handler: (context, action) => {
switch (action) {
case ACTION_HELLO_WORLD: {
console.log('Hello, World!');
break;
}
}
},
});
}
}
Create the
ACTION_HELLO_WORLD
import { createAction } from '@cloudbeaver/core-view';
export const ACTION_HELLO_WORLD = createAction('hello-world', {
label: 'Hello, world!',
});
Register the service
Register your service in
manifest.ts
import type { PluginManifest } from '@cloudbeaver/core-di';
export const helloWorldPlugin: PluginManifest = {
info: {
name: 'Hello World Plugin',
},
providers: [() => import('./HelloWorldService.js').then(m => m.HelloWorldService)],
};
Connect plugin to product
Open
/webapp/packages/product-default/index.ts
import { helloWorldPlugin } from '@cloudbeaver/plugin-hello-world';
const PLUGINS: PluginManifest[] = [
...existingPlugins,
helloWorldPlugin,
];
Run commands
In
/webapp
yarn run update-ts-references
yarn
yarn run update-ts-references
Final result
Your button should now appear in the top bar and log
Hello, World!
