Extending Notification Channel Types
NocoBase supports extending notification channel types on demand, such as for SMS notifications and app push notifications.
Client
Channel Type Registration
The client channel configuration and message configuration interface are registered through the registerChannelType method provided by the notification management plugin client:
import PluginNotificationManagerClient from '@nocobase/plugin-notification-manager/client';
class PluginNotificationExampleClient extends Plugin {
async afterAdd() {}
async beforeLoad() {}
async load() {
const notification = this.pm.get(PluginNotificationManagerClient);
notification.registerChannelType({
title: 'Example SMS', // Channel type name
type: 'example-sms', // Channel type identifier
components: {
ChannelConfigForm, // Channel configuration form
MessageConfigForm, // Message configuration form
},
});
}
}
export default PluginNotificationExampleClient;
Server
Extending Abstract Class
The core of server development involves extending the BaseNotificationChannel abstract class and implementing the send method, which contains the business logic for sending notifications through the extended plugin.
import { BaseNotificationChannel } from '@nocobase/plugin-notification-manager';
export class ExampleServer extends BaseNotificationChannel {
async send(args): Promise<any> {
console.log('ExampleServer send', args);
return { status: 'success', message: args.message };
}
}
Server Registration
The registerChannelType method of the notification server core should be called to register the server implementation class in the core:
import PluginNotificationManagerServer from '@nocobase/plugin-notification-manager';
import { Plugin } from '@nocobase/server';
import { ExampleServer } from './example-server';
export class PluginNotificationExampleServer extends Plugin {
async load() {
const notificationServer = this.pm.get(
PluginNotificationManagerServer,
) as PluginNotificationManagerServer;
notificationServer.registerChannelType({
type: 'example-sms',
Channel: ExampleServer,
});
}
}
export default PluginNotificationExampleServer;
Full Example
Here is a sample notification extension to describe in detail how to develop an extension.
Suppose we want to add SMS notification to NocoBase using a platform's SMS gateway.
Plugin Creation
- Run the command to create the plugin
yarn pm add @nocobase/plugin-notification-example
Client Development
For the client, develop two form components: ChannelConfigForm (Channel Configuration Form) and MessageConfigForm (Message Configuration Form).
To send SMS messages, an API key and secret are required. Create a new file named ChannelConfigForm.tsx in the src/client directory:
import React from 'react';
import { SchemaComponent } from '@nocobase/client';
import useLocalTranslation from './useLocalTranslation';
const ChannelConfigForm = () => {
const t = useLocalTranslation();
return (
<SchemaComponent
scope={{ t }}
schema={{
type: 'object',
properties: {
apiKey: {
'x-decorator': 'FormItem',
type: 'string',
title: '{{t("Transport")}}',
'x-component': 'Input',
},
secret: {
'x-decorator': 'FormItem',
type: 'string',
title: '{{t("Transport")}}',
'x-component': 'Input',
},
},
}}
/>
);
};
export default ChannelConfigForm;
The message configuration form mainly includes the configuration for recipients (receivers) and message content (content). Create a new file named MessageConfigForm.tsx in the src/client directory. The component receives variableOptions as a variable parameter. The content form is configured in the workflow node and typically needs to consume workflow node variables. The specific file content is as follows:
import React from 'react';
import { SchemaComponent } from '@nocobase/client';
import useLocalTranslation from './useLocalTranslation';
const MessageConfigForm = ({ variableOptions }) => {
const { t } = useLocalTranslation();
return (
<SchemaComponent
scope={{ t }}
schema={{
type: 'object',
properties: {
to: {
type: 'array',
required: true,
title: `{{t("Receivers")}}`,
'x-decorator': 'FormItem',
'x-component': 'ArrayItems',
items: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
input: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Variable.Input',
'x-component-props': {
scope: variableOptions,
useTypedConstant: ['string'],
placeholder: `{{t("Phone number")}}`,
},
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
properties: {
add: {
type: 'void',
title: `{{t("Add phone number")}}`,
'x-component': 'ArrayItems.Addition',
},
},
},
content: {
type: 'string',
required: true,
title: `{{t("Content")}}`,
'x-decorator': 'FormItem',
'x-component': 'Variable.RawTextArea',
'x-component-props': {
scope: variableOptions,
placeholder: 'Hi,',
autoSize: {
minRows: 10,
},
},
},
},
}}
/>
);
};
export default MessageConfigForm
Client Component Registration
After developing the form configuration components, register them in the notification management core. Assume the platform name is "Example." Edit src/client/index.tsx as follows:
import { Plugin } from '@nocobase/client';
import PluginNotificationManagerClient from '@nocobase/plugin-notification-manager/client';
import { tval } from '@nocobase/utils/client';
import ChannelConfigForm from './ChannelConfigForm';
import MessageConfigForm from './MessageConfigForm';
class PluginNotificationExampleClient extends Plugin {
async afterAdd() {}
async beforeLoad() {}
async load() {
const notification = this.pm.get(PluginNotificationManagerClient);
notification.registerChannelType({
title: tval('Example SMS', { ns: '@nocobase/plugin-notification-example' }),
type: 'example-sms',
components: {
ChannelConfigForm,
MessageConfigForm,
},
});
}
}
export default PluginNotificationExampleClient;
At this point, the development of the client is complete.
Server Development
The core of server development involves extending the BaseNotificationChannel abstract class and implementing the send method. The send method contains the business logic for the extension plugin to send notifications. Since this is an example, we will simply print the received arguments. In the src/server directory, add a file named example-server.ts:
import { BaseNotificationChannel } from '@nocobase/plugin-notification-manager';
export class ExampleServer extends BaseNotificationChannel {
async send(args): Promise<any> {
console.log('ExampleServer send', args);
return { status: 'success', message: args.message };
}
}
Next, register the server extension plugin by editing src/server/plugin.ts:
import PluginNotificationManagerServer from '@nocobase/plugin-notification-manager';
import { Plugin } from '@nocobase/server';
import { ExampleServer } from './example-server';
export class PluginNotificationExampleServer extends Plugin {
async load() {
const notificationServer = this.pm.get(
PluginNotificationManagerServer,
) as PluginNotificationManagerServer;
notificationServer.registerChannelType({
type: 'example-sms',
Channel: ExampleServer,
});
}
}
export default PluginNotificationExampleServer;
Plugin Registration and Launch
- Run the registration command:
yarn pm add @nocobase/plugin-notification-example
- Run the enable command:
yarn pm enable @nocobase/plugin-notification-example
Channel Configuration
Upon visiting the Notification management channel page, you can see that the Example SMS channel has been enabled.
Add a sample channel.
Create a new workflow and configure the notification node.
Trigger the workflow execution to view the following information output in the console.
