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).

ChannelConfigForm

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;

MessageConfigForm

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.